利用vite创建vue3项目

目录:


使用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

最后:用编辑器打开此项目文件夹就可以进行编辑了!

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注