Vue CLI 5 和 vite 创建 vue3.x 项目以及 Vue CLI 和 vite 的区别

这几天进入 Vue CLI 官网，发现不能选择 Vue CLI 的版本，也就是说查不到 vue-cli 4 以下版本的文档。

如果此时电脑上安装了 Vue CLI，那么旧版安装的 vue 项目很可能会构建失败。于是我试着运行一些早期开源的 vue 项目，比如vue-element-admin 管理系统，发现会提示 “'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件” 。

所以一些已上线项目在构建过程中很可能会出现类似的提示，最直接粗暴的解决办法就是使用 Vue CLI 创建一个新的 vue2 的项目，并修改 package.json 之后再重新安装依赖即可。也可以全局安装一个桥接工具（官网有提及，本人没有尝试）。

我试着去查找官方对此问题更详细的说明，但没有在官方文档中找到此类文档。猜测 vue 官方在引导开发者创建 vue 项目时使用是 Vue CLI（官方文档中现在未发现称其为 Vue CLI 4，而直接称为 Vue CLI，git 上有则其是 vue-cli 4.0的说明文字） 及 Vite（尤雨溪老师开发并推荐的下一代前端开发与构建工具）构建。

在此整理了 Vue CLI 和 Vite 两种构建工具创建 Vue 3 项目的方法及区别，以供参考和学习。

一、Vue CLI 创建 vue3 项目

鉴于 Vue CLI 官网现在没有写明版本，本文也不提以往的 vul-cli 版本。

1.安装 Vue CLI

Vue CLI 4 的包由之前的 vue-cli 改成了 @vue/cli。如果本地已经全局安装了旧版本的 vue-cli，需要先使用 npm uninstall vue-cli -g 卸载。再使用 npm install -g @vue/cli 安装 Vue CLI 最新版本

npm install -g @vue/cli

安装之后，可以访问 vue 命令，并使用 vue --version 检查版本

vue --version

2.使用 “vue create 项目名” 命令创建新项目

vue create new-vue3-project

3.选择项目预设

通过 vue create 命令后，会提示选择预设，如图所示：

选项	说明
Default ([Vue 2] babel, eslint)	安装vue2基本配置的预设
Default (Vue 3 Preview) ([Vue 3] babel, eslint)	安装vue3基本配置的预设
Manually select features	手动选择特性安装

4.选择项目配置功能

使用 Vue CLI 脚手架很方便的一点，就是可以同时安装一些插件。比如通常所说的 Vue 全家桶中的 vue-router、 vuex 可以在此直接选择配置，如图所示：

建议在此选择 Choose Vue versio、Babel、Router、Vuex、CSS Pre-processors 五项。

TypeScript 根据个人技术喜好选择；Progressive Web App (PWA) Support 根据项目需要选择；Linter / Formatter 强烈推荐不要选择，严重影响开发效率和团队合作体验；Unit Testing 和 E2E Testing 并没有什么用，实际工作中测试人员会有自己的工具。

选项	说明
Choose Vue versio	选择vue版本
Babel	安装Babel编译器
TypeScript	支持TypeScript
Progressive Web App (PWA) Support	支持渐进式web应用
Router	安装 Vue 路由
Vuex	安装 Vuex （vue 状态管理模式）
CSS Pre-processors	安装 CSS 预处理器
Linter / Formatter	代码检测和格式校验
Unit Testing	安装单元测试
E2E Testing	安装端到端测试

5.选择 Vue 版本

6.选择路由历史记录模式

如果选择历史记录模式，生产环境需要在服务器设置无页面返回 index 首页的配置，如图所示：

7.选择 CSS 预处理器，可根据个人喜好选择

8.选择配置选项放在专用的配置文件中还是 package.json 中，建议选择 In dedicated config files 放在专用的配置文件中

9.是否保存本次选择的预设

在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc),选择保存后,本地再创建 Vue 项目将可默认本次的配置进行自动安装，有兴趣的可以自己尝试一下。

完成这些步骤后，Vue CLI 会自动安装选择预设的依赖。还有需要的插件，如 Axios 和 Element plus 需要自行安装。

二、Vite 创建 Vue 3 项目

Vite 是一种新型前端构建工具，能够显著提升前端开发体验，Vite 需要 Node.js 版本 >= 12.0.0。

1.使用 Vite 安装 Vue

npm init @vitejs/app

2.输入项目名称，如图所示：

3.选择 vue 框架

4.选择使用 vue (javascript 语法) 或 vue-ts (typescript 语法)

Vite 不支持 vue2，所以不能选择版本，是直接构建 vue3。

配置完成后还需要进入项目并安装依赖。

  cd vite-vue3-project    //进入项目
  npm install          //安装依赖
  npm run dev        //构建项目本地开发环境

Vite 创建的项目没有集成 vue-router、vuex 等插件，还需要手动安装。看到这里都可以根据步骤创建 vue3 项目，如有疑问，欢迎留言讨论。