vue-cli 3.0

cli 是 Command Line Interface，也就是命令行接口，所谓接口就是我们可以通过命令行方式进行些 vue 给我们提供的操作。t

这里解释一下 CLI 的用途，其实就是为了便于开发 vue 应用，为我们事先写好的脚步，来帮助我们快速搭建 vue 项目，避免一些繁琐乏味的配置。同样在搭建项目时为我们提供许多选项便于搭建出适合自己应用的 vue 项目。out-of-the-box 就是开包即用，拎包入住的感觉。

我们也可以选择一些项目中需要的库，各个库之间相互依赖的关系 CLI 也通过插件形式帮助我们进行管理。

而且通过配置 webpack 我们可以将项目 src 下 javascript 文件、css 样式文件和他们依赖都打包一个文件，并不是简单打包在一起，这里还会对代码进行一些优化。

可以自由地创建一个 vue 组件，组件包换 html 结构 css 样式和 javascript 文件，组件可以轻松地被复用在我们的项目中。同时安装插件，让我们可以 typescript 来写 javascript 也可以用 scss 或 less 来写 css，还可以用 pug 来写 html 只要您愿意

启动模块热替换（HMR）功能，当我们编辑代码同时，改变就会立即反应到我们页面，这样给我们开发带来了许多快乐

要使用 vue cli 我们先安装 npm。

在安装了 npm 后，我们在命令行输入 npm i -g @vue/cli 来全局安装 vue cli 库。

安装会稍微需要一点时间，稍等片刻。

然后我们就可以 vue 命令来创建一个项目了， vue create 项目名称来创建项目。

在创建过程中，vue cli 这里提供了许多选项，我们可以选择 Manually select features 来手动配置来创建我们项目。

Babel 是一种优化编译器，Router 是 vue 的路由进行扩展的库，Linter 是检查我们的代码的工具，这里就是我们创建项目作出的选择。

我们可以选择一个脚手架来搭建项目，这里有两种选择一个 npm 一个是 yarn，个人也偏好 npm。

做出所有的选择，我们就可以享受一下等待项目，等待 cli 根据我们的选择来搭建专属于我们的 vue 项目。

然后进入创建项目下，运行 npm run serve 来启动我们项目，当您看到下面画面恭喜您成功地用 cli 创建了 vue 项目

在 vue-cli 中，除了可以使用命令行来创建和配置 vue 项目，也为您新增了界面的形式来创建和配置 vue 项目。我们可以输入 vue ui 来打开界面来配置我们的项目。

界面布局上面有 3 标签页，分别为 projects（项目）create(创建）和 import（导入），在 create 标签下我们可以创建一个项目。在下面有导航，可以浏览放置项目的位置。

点击“create a new project here” 按钮来创建一个 vue 项目，然后进入下一个页面，默认是开启 features (特性）页面吧。这里我们可以根据需要来选择一些 vue 的扩展，说是 features 也可以叫模块，选择我们项目所需的模块。router 用来配置和管理我们单页应用的路由。vuex 管理应用的状态，类似 redux 或是 flux。这让我想起 react + redux + rxjs 来创建应用。Linter 和 Formatter 规范我们的代码，提高我们的 code 质量，这里有机会给大家讲一讲 Prettier。

选择后可以将所做的选择保存下来作为预设，以便下一次使用预设来创建项目。

然后在 Project configuration（项目配置）页面中，可以配置 vue project 项目和 ESLint，提供可视化来配置我们项目的输出路径等。

ESLint 可以帮助我们检查代码，提高代码的质量。可以配置 ESLint 的规则来检查代码。ESLint 会根据我们定义的规则，检查 javascript 文件并给出 js 的报告，我们也可以定义报告输出格式和样式。

（Project tasks）项目任务，这里可以配置或写一些任务脚步，例如 serve 任务是启动我们项目，在开发模式可以边开发边调试，build 任务就是将我们项目进行构建出一些列生产环境下的 bundle 文件，lint 任务检查我们工程文件，我们当然也可以直接在 package.json 中写一些脚步。

当我们运行 serve 任务来启动项目我们可以界面上看到许多和项目相关信息，一目了然。

我们 Add a plugin 页面可以搜索安装插件，以列表形式列出所有插件，列表中可以查看到插件相关信息。

这里我们下载 vue-cli-plugin-vuetify,vuetify 个人用过是一个在 vue 接触封装一些组件的框架，感兴趣以后给大家分享一下。

在 projects 标签下可以查看我们项目的一些具体文件。

在 import 标签我们可以轻松地导入文件。