01 什么是vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

1. 通过 @vue/cli 实现的交互式的项目脚手架。
2. 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
3. 一个运行时依赖 (@vue/cli-service)，这个依赖：
   （1）可升级；
   （2）基于 webpack 构建，并带有合理的默认配置；
   （3）可以通过项目内的配置文件进行配置；
   （4）可以通过插件进行扩展。
4. 一个丰富的官方插件集合，集成了前端生态中最好的工具。
5. 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

02 快速创建项目

2.1 命令行创建

（1）如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：

npm install --global @vue/cli

（2）在命令行中输入以下命令创建 Vue 项目：

vue create 项目名

等待一会后显示如下（使用上下键更换选择，回车键确认选择）

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) # Vue 3（默认勾选 babel、eslint），回车后直接进入装包
  Default ([Vue 2] babel, eslint) # Vue 2（默认勾选 babel、eslint），回车后直接进入装包
> Manually select features        # 自定义勾选特性配置，选择完毕之后，才会进入装包

建议选择 → Manually（手动选择特性，支持更多自定义选项）

（3）检查你的项目需要的功能（注：按空格键选择，a 键全部选择，i 键反转选择。）

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel   # 语法编译，向后兼容（es6 转 es5）
 ( ) TypeScript   # 使用 TypeScript（不勾选则默认使用 JavaScript）
 ( ) Progressive Web App (PWA) Support   # 渐进式网页应用
 (*) Router   # 使用路由管理
 (*) Vuex   # 使用数据容器，存储共享数据
 (*) CSS Pre-processors   # CSS 预处理器，后面会提示你选择 less、sass、stylus 等
 (*) Linter / Formatter   # 语法检查，代码格式校验
 ( ) Unit Testing   # 单元测试  以开发角度
 ( ) E2E Testing   # 集成测试  以用户角度

可以按照项目的需要选择，上述选择项是我常用的。

（4）选择想要启动项目的Vue.js版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
  2.x

（5）使用 history 为路由器?（需要正确的服务器设置，以便在生产中进行索引回退）(Y/n)

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  

Router 有两种模式，hash 模式和 history 模式：（区别如下）

1. hash 模式的 url 带 “#”，history 模式的 url 不带 “#” 。若要考虑 url 规范就使用 history 模式，因为它没有 “#”，是个正常的 url 适合推广宣传。
2. 功能也有区别，例如开发 app 时分享页面，把这个页面分享到第三方的 app 里，有的 app 里面 url 是不允许带 “#” 的，所以要将 “#” 去除就要使用 history 模式。
3. history 模式在访问二级页面的时候，做刷新操作会出现 404 错误，需要和后端人配合去配置一下 apache 或 nginx 的 url 重定向，重定向到你的首页路由上。
4. history 模式改变 url 的方式会让浏览器向服务器发送请求，而 hash 值变化不会让浏览器向服务器发出请求，并且 hash 改变会触发 hashchange 事件，浏览器的进后退也能对其进行控制。
5. hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在 url 里放参数，还可以将数据存放在一个特定的对象中。

这里依自己的情况进行选择，我一般选择 “n”，即默认 hash 模式。

（6）选择一个CSS预处理器(默认支持PostCSS, Autoprefixer和CSS模块)

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass)
> Less
  Stylus                                                                                                                        

此处看自己或项目的需求，我一般选择 less。

（7）选择校验工具

? Pick a linter / formatter config:
  ESLint with error prevention only   # 仅错误预防
  ESLint + Airbnb config   # Airbnb 配置
> ESLint + Standard config   # 标准配置
  ESLint + Prettier   # 附带 Prettier（用于风格统一，代码格式化工具）

（8）选择在什么时机下触发代码格式校验

? Pick additional lint features:
 (*) Lint on save   # 每当保存文件的时候校验
>(*) Lint and fix on commit   # 每当执行 git commit 提交的时候校验

建议选择 → 两个都选上，更加严谨。

（9）你喜欢把Babel, ESLint 等配置放在哪里?

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files   # 分别保存到单独的配置文件
  In package.json   # 保存到 package.json 文件中

建议选择 → In dedicated config files，即保存到单独的配置文件，更方便我们做自定义配置。

（10）是否将这次配置保存为未来项目的预设？

? Save this as a preset for future projects? (y/N)

若需要将刚才选择的配置保存起来，以便下次直接使用，则可以选择 “y”。
此处根据自己需要输入 y 或者 n，我一般选择 “n”，即不需要。

（11）选择在安装依赖项时使用的包管理器

? Pick the package manager to use when installing dependencies: (Use arrow keys)
  Use Yarn
> Use NPM

依个人或项目需要来选择，我一般常用 NPM

（12）回车后，向导配置结束，开始装包。安装包的时间可能较长，需要耐心等待…

Vue CLI v5.0.8
✨  Creating project in E:\A-code\Z-other\项目名.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

[#####.............] / idealTree:read-pkg-up: timing idealTree:node_modules/read-pkg-up Completed in 0ms

······等一会后

added 862 packages in 19s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 164 packages in 6s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project 项目名.
👉  Get started with the following commands:

 $ cd 项目名
 $ npm run serve

（13）安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入

# 进入你的项目目录
cd 项目名

# 启动开发服务
npm run serve

2.2 图形化界面创建

通过 vue ui 命令以图形化界面创建和管理项目

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
打开图形化界面需要等待一会，直到命令行出现下面的信息：

E:\A-code\Z-other>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

然后浏览器会弹出下面的页面

点击在此创建项目，而后跟随图形界面的提示和指示进行选择和配置，其实基本步骤选择和命令行差不多，后面有机会再进行细节描述。

欢迎大家交流探讨！