使用 create-vue 创建项目

create-vue是Vue官方提供的项目脚手架工具，用于快速创建标准的Vue3项目。本章节将指导你使用create-vue创建Vue3项目。

什么是 create-vue？

create-vue是Vue官方推荐的项目创建工具，它基于Vite构建，提供了一个交互式的命令行界面，让你可以选择需要的功能和依赖。

安装 create-vue

1. 全局安装

# 使用npm安装
npm install -g create-vue

# 验证安装
create-vue --version

2. 使用 npx

如果你不想全局安装，也可以使用npx直接运行：

npx create-vue@latest

创建 Vue3 项目

1. 运行 create-vue

# 全局安装后运行
create-vue

# 或使用npx
npx create-vue@latest

2. 交互式配置

运行命令后，你会看到一个交互式的配置界面，需要回答以下问题：

• Project name：项目名称
• Add TypeScript?：是否添加TypeScript
• Add JSX Support?：是否添加JSX支持
• Add Vue Router for SPA?：是否添加Vue Router
• Add Pinia for state management?：是否添加Pinia
• Add Vitest for unit testing?：是否添加Vitest
• Add an End-to-End Testing Solution?：是否添加端到端测试
• Add ESLint for code quality?：是否添加ESLint
• Add Prettier for code formatting?：是否添加Prettier

3. 配置建议

对于初学者，建议选择以下配置：

• Project name：输入你的项目名称，如 my-vue3-app
• Add TypeScript?：可以选择 No，先学习JavaScript版本
• Add JSX Support?：可以选择 No，暂时不需要
• Add Vue Router for SPA?：建议选择 Yes，学习路由功能
• Add Pinia for state management?：建议选择 Yes，学习状态管理
• Add Vitest for unit testing?：可以选择 No，暂时不需要
• Add an End-to-End Testing Solution?：可以选择 No，暂时不需要
• Add ESLint for code quality?：建议选择 Yes，保持代码质量
• Add Prettier for code formatting?：建议选择 Yes，保持代码格式一致

4. 项目创建

配置完成后，create-vue会自动创建项目结构并安装依赖。

项目结构

创建完成后，你会看到以下项目结构：

my-vue3-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── router/
│   │   └── index.js
│   ├── stores/
│   │   └── counter.js
│   ├── views/
│   │   ├── AboutView.vue
│   │   └── HomeView.vue
│   ├── App.vue
│   └── main.js
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

安装依赖

如果create-vue没有自动安装依赖，你需要手动安装：

cd my-vue3-app
npm install

运行项目

1. 开发服务器

npm run dev

运行后，你会看到一个本地开发服务器的地址，如 http://localhost:5173/，在浏览器中打开这个地址即可查看项目。

2. 构建项目

npm run build

构建完成后，项目会被编译到 dist 目录中，用于生产环境部署。

常见问题

1. 权限问题

• Windows：以管理员身份运行命令提示符
• macOS/Linux：使用 sudo 命令或修改权限

2. 网络问题

• 配置镜像：确保npm配置了正确的镜像源
• 代理设置：如果在公司网络中，可能需要配置代理

3. 版本问题

• Node.js版本：确保Node.js版本 >= 16
• create-vue版本：使用最新版本的create-vue

总结

使用create-vue创建Vue3项目是一个简单而高效的过程，它为你提供了一个标准化的项目结构和必要的依赖。通过交互式配置，你可以根据自己的需求选择需要的功能，为后续的开发做好准备。

在后续的章节中，我们将学习如何使用Vite创建Vue3项目，以及如何理解和使用项目结构。