目录:
使用Vite创建Vue 3项目的核心优势
🚀 极致的开发体验
1. 闪电般的启动速度
- 冷启动时间缩短10-100倍:Vite利用ES模块原生支持,无需打包即可启动开发服务器
- 按需编译:只编译当前屏幕显示所需的代码,而不是整个项目
2. 瞬间的热更新(HMR)
真正的按需更新:不重新加载整个页面,保持开发流程的连续性
毫秒级更新:HMR保持应用状态,只更新修改的模块
完整创建流程
第一步:环境准备
确保您的系统已安装Node.js(版本14.18+或16+)
下载地址:Node.js 中文网
# 检查Node.js版本
node --version
# 检查npm版本
npm --version
第二步:创建项目
先打开项目文件夹,然后在地址栏输入cmd,回车。在命令行输入第一个命令。
# 使用npm创建Vue项目(一般用这个)
npm create vue@latest
# 或者使用yarn
yarn create vue
# 或者使用pnpm
pnpm create vue
第三步:项目配置选项详解
执行命令后,您将看到一系列配置选项:
(ps:初学什么都不用勾,以后仍可安装)
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
选项说明:
- TypeScript:添加TypeScript支持(推荐用于大型项目)
- JSX Support:启用JSX语法支持
- Vue Router:添加Vue官方路由管理器(SPA必需)
- Pinia:新一代Vue状态管理库(替代Vuex)
- Vitest:基于Vite的单元测试框架
- Cypress:端到端测试框架
- ESLint:代码质量检查工具
- Prettier:代码格式化工具
第四步:安装依赖并启动
# 进入项目目录(注意填自己的项目名)
cd your-project-name
# 安装依赖
npm install
# 启动开发服务器
npm run dev
最后:用编辑器打开此项目文件夹就可以进行编辑了!
