| 项目 \ 方式 | create-vue | @vue/cli | vue-cli |
|---|---|---|---|
| 介绍 | Vue 官方的项目脚手架工具（基于Vite） | 第二代官方项目脚手架 cli版本 >= 3（基于Webpack） | 第一代官方项目脚手架 cli版本 < 3（基于Webpack） |
| 与Vue版本的关系 | Vue3、Vue2都可以创建 | @vue/cli@3 ~ 4.5，只能创建vue2项目 @vue/cli@4.5以上，可以创建vue2和3的项目 | 只能创建vue2的项目 |
| 最新版本 | v3.7.0 | @vue/cli@5.0.8 | vue-cli@2.9.6 |
| npm依赖 | 项目创建后手动安装 | 项目创建过程自动安装 | |
| 文档链接 | 快速上手 Vue.js (vuejs.org) | 创建一个项目 Vue CLI (vuejs.org) | Introduction · GitBook (vuejs-templates.github.io) |
注：@vue/cli 与 vue-cli 之间是冲突的，二者只能同时存在一个。
Vue CLI 现已处于维护模式！现在官方推荐使用 create-vue 来创建基于 Vite 的新项目
一、命令
1. 安装
-
create-vue
npm init vue@latest # 这一指令将会安装并执行 create-vue # 等价于 npx create-vue@latest # 等价于 npm install create-vue@latest -g create-vue # 这个过程中，执行create-vue模块的bin，执行它的创建逻辑，如果对过程细节感兴趣，可以查看create-vue源码 npm uninstall create-vue -g -
@vue/cli
npm install -g @vue/cli -
vue-cli
npm install vue-cli -g
注意：@vue/cli 和 vue-cli 是互斥的，两者只能安装其中一个。
2. 新建项目
-
create-vue
npm init vue@latest # 安装和新建项目，共用一条命令 npm init vue@2 # 创建Vue2项目 -
@vue/cli
vue create project-name # 方式一：使用命令行进行项目配置 vue ui # 方式二：使用ui界面进行项目配置 -
vue-cli
vue init webpack project-name
3. 启动项目
-
create-vue
npm run dev -
@vue/cli
npm run serve -
vue-cli
npm run dev
注意：以上只是初始的默认命令，这个命令是可以修改的
二、项目配置
1. create-vue
输入npm init vue@latest之后，会出现如下命令行界面，用于配置项目
你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示。如果不确定是否要开启某个功能，你可以直接按下回车键选择 No
2. @vue/cli
输入vue create project-name命令之后，会出现：
@vue/cli自带一些默认的 preset，如果想自定义，选择第三项
配置项包括如下 6 项，最后一项提示是否将该设置保存为 自定义的preset
创建过程中，自动安装了npm依赖项（需要等待一段时间）
3. vue-cli
目前使用 vue-cli 似乎已经无法创建项目
三、项目结构
1. create-vue
├── index.html
├── package.json // 项目基本信息,包依赖信息等
├── public
| └── favicon.ico
├── README.md
├── src
| ├── App.vue // 页面入口文件
| ├── assets // 静态文件目录
| ├── components
| └── main.js // 程序入口文件，加载各种公共组件
├── vite.config.js // Vite配置文件
└── .vscode
└── extensions.json // vscode的团队共享配置
补充：
关于.vscode/extensions.json文件更多的细节，请查看： 团队一键安装项目推荐的vscode插件(使用extensions.json)
2. @vue/cli
├── babel.config.js // babel的控制文件，用于babel进行转化语法，一般不需要我们写内容
├── jsconfig.json // 指定了根文件以及 JavaScript 语言服务 提供的功能选项
├── node_modules
├── package-lock.json
├── package.json
├── public
| ├── index.html // 入口页面
| └── favicon.ico // 标签页图标
├── README.md
├── src // 源码目录
| ├── App.vue // 页面入口文件
| ├── assets
| ├── components
| └── main.js // 程序入口文件，加载各种公共组件
├── vue.config.js // 是一个可选的配置文件，包含了大部分的vue项目配置
└── .eslintrc.js // ESLint配置文件
补充：
- 目录中存在
jsconfig.json文件时，表明该目录是 JavaScript 项目的根目录。jsconfig.json文件指定了根文件以及 JavaScript 语言服务 提供的功能选项。更多详情请看：jsconfig.json 中文文档 - 掘金 (juejin.cn)
3. vue-cli
我自己没有成功使用 vue-cli 创建到项目，以下内容是引用自：彻底搞懂vue-cli各版本和vue2和vue3之间的关系！ - 掘金 (juejin.cn)
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目配置文件，build目录下有不少文件引用了它
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- components
| |-- router
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- .babelrc // babel编译参数，ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore
|-- .postcsssrc // postcss配置文件
|-- README.md
|-- index.html // 入口页面
|-- package.json // 项目基本信息,包依赖信息等
针对build目录下几个文件再具体解读，参考文章：vue-cli基本使用（详细代码）
| 文件 | 作用 |
|---|---|
| webpack.base.conf.js | 1 配置webpack编译入口 2 配置webpack输出路径和命名规则 3 配置模块resolve规则 4 配置不同类型模块的处理规则 |
| webpack.dev.conf.js | 1 将hot-reload相关的代码添加到entry chunks 2 合并基础的webpack配置 3 使用styleLoaders 4 配置Source Maps 5 配置webpack插件 |
| utils.js | 1 配置静态资源路径 2 生成cssLoaders用于加载.vue文件中的样式 3 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件 |
| vue-loader.conf.js | 配置了css加载器以及编译css之后自动添加前缀 |
| build.js | 1 loading动画 2 删除创建目标文件夹 3 webpack编译 4 输出信息 |
| webpack.prod.conf.js | 合并基础的webpack配置 2 使用styleLoaders 3 配置webpack的输出 4 配置webpack插件 5 gzip模式下的webpack插件配置 6 webpack-bundle分析 |
| check-versions.js | 检查npm，node.js版本 |
四、模式 & 环境变量
1. create-vue
Vite 构建的项目默认只有development和production两种模式。可以自定义更多模式。
内置的环境变量：
import.meta.env.MODE（String，当前所处的模式）import.meta.env.BASE_URL（String，部署应用时的基本 URL。他由base配置项决定）import.meta.env.PROD/DEV/SSR（Boolean，当前是否运行在生产环境 / 开发环境 / server）
配置文件：.env.development和.env.production（放在项目根目录下）
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略
如何引用环境变量：
- 请注意：在配置文件中，只有以
VITE_前缀开头的环境变量才能在代码中使用！ - 在项目JS代码中，通过
import.meta.env.xxx使用当前模式下的环境变量 - 在HTML模板中，可以通过
%xxx%来使用环境变量。示例如下：
# .env.development
VITE_APP_TITLE=presentation-demo
// JS代码中
console.log(import.meta.env.VITE_APP_TITLE)
<!-- html模板中 -->
<h1>
Welcome to %VITE__APP_TITLE%
</h1>
更多信息：环境变量和模式 | Vite 官方中文文档 (vitejs.dev)
2. @vue/cli
Vue CLI 创建的项目默认有三种NODE_ENV（模式）：development、test、production
配置文件：放在项目根目录下，用来指定环境变量
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略，保存一些不能公开的环境变量，例如密钥等
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
注意：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中，这是为了防止意外泄露隐私信息！
.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务！
如何使用环境变量：
# .env.production
VUE_APP_TITLE=Vue CLI demo
// 项目JS代码中
console.log(process.env.VUE_APP_TITLE)
内置的环境变量：（不必自定义，始终可以使用）
NODE_ENV：String类型，会是"development"、"production"或"test"中的一个BASE_URL- 会和vue.config.js中的publicPath选项相符，即你的应用会部署到的基础路径
更多信息：模式和环境变量 | Vue CLI (vuejs.org)
3. vue-cli
配置文件：/config/dev.env.js和/config/prod.env.js
如何使用环境变量：
// config/prod.env.js
module.exports = {
NODE_ENV: '"production"',
DEBUG_MODE: false,
API_TITLE: '"Vue CLI demo"' // 注意：如果值是String类型，需要用'""'双重引号包裹
}
// 项目JS代码中
console.log(process.env.API_TITLE)
更多信息：Environment Variables · GitBook (vuejs-templates.github.io)
vue-cli的环境变量配置感觉倾向于原始的webpack配置，这里采用key:value键值对的方式定义环境变量与前两者不同！
参考链接
彻底搞懂vue-cli各版本和vue2和vue3之间的关系！ - 掘金 (juejin.cn)
jsconfig.json 中文文档 - 掘金 (juejin.cn)
团队一键安装项目推荐的vscode插件(使用extensions.json)
