最近不忙，一直写React，所以打算重温一下Vue的东西，从创建项目开始，有兴趣的可以了解一下。
先说下前置条件：
node版本在18.3以上（vue2可能不需要这么高的版本）
输入： node –v，查看node版本
一、基于vue-cli搭建
@vue/cli版本在4.5.0以上，vue2不需要，但是尽量使用高版本吧。
未安装或版本过低，安装或者升级你的@vue/cli
输入：npm install -g @vue/cli
1. 项目创建
|
1 |
vue create vue3_test |
选择 Vue3，babel, eslint，包管理器(pnpm，npm，yarn)。ps：键盘上下键控制选择
2、项目启动
|
1 |
输入：cd vue3_test 到达项目根目录 输入：`pnpm run serve` 启动项目 |
二、基于vite搭建（推荐）
vite 是新一代前端构建工具，vite的优势如下：
- 轻量快速的热重载（HMR），能实现极速的服务启动。
- 对 TypeScript、JSX、CSS 等支持开箱即用。
- 真正的按需编译，不再等待整个应用编译完成。
1. 项目创建
|
1 2 |
输入项目创建命令 pnpm create vite 输入项目名字，选择vue框架，TypeScript |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
E:\Workspace\FrontEndProject\Vue3Project>pnpm create vite .../19130b8c8bd-60b8 | +1 + .../19130b8c8bd-60b8 | Progress: resolved 1, reused 0, downloaded 1, added 1, done √ Project name: ... vue3-test √ Select a framework: » Vue √ Select a variant: » TypeScript Scaffolding project in E:\Workspace\FrontEndProject\Vue3Project\vue3-test... Done. Now run: cd vue3-test pnpm install pnpm run dev |
2. 项目启动
|
1 2 3 |
输入：cd vue3_test 到达项目根目录 输入：pnpm install 安装项目所需依赖 输入：pnpm run dev 启动项目 |
启动成功后出现地址 http://localhost:5173/ 复制到浏览器打开，或按住Ctrl键点击命令行里的地址打开。
三、通过create-vue搭建
1. 项目创建
|
1 |
输入项目创建命令 pnpm create vue@latest |
输入项目名字，根据需求安装插件，没安装的插件后面在项目中也可以手动安装
ps：键盘左右选择 是/否
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
E:\Workspace\FrontEndProject\Vue3Project>pnpm create vue@latest .../19130c78fdf-37c8 | +1 + .../19130c78fdf-37c8 | Progress: resolved 1, reused 0, downloaded 1, added 1, done Vue.js - The Progressive JavaScript Framework √ 请输入项目名称： ... vue3-test √ 是否使用 TypeScript 语法？ ... 否 / 是 √ 是否启用 JSX 支持？ ... 否 / 是 √ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是 √ 是否引入 Pinia 用于状态管理？ ... 否 / 是 √ 是否引入 Vitest 用于单元测试？ ... 否 / 是 √ 是否要引入一款端到端（End to End）测试工具？ » 不需要 √ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是 √ 是否引入 Prettier 用于代码格式化？ ... 否 / 是 √ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是 正在初始化项目 E:\Workspace\FrontEndProject\Vue3Project\vue3-test... 项目初始化完成，可执行以下命令： cd vue3-test pnpm install pnpm dev |
2. 项目启动
|
1 2 3 |
输入：cd vue3_test 到达项目根目录 输入：pnpm install 安装项目所需依赖 输入：pnpm run dev 启动项目 |
启动成功后出现地址 http://localhost:5173/， 复制到浏览器打开，或按住Ctrl键点击命令行里的地址打开