《和小米一起学Vue.js》— Vue CLI脚手架

通常新建一个vue项目需要很多步骤,还还需要很多的配置,这时候可以通过Vue CLI脚手架来快速的新建初始化一个项目.Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时。

这里我们使用的是 vue CLI 5 版本    

脚手架组成部分

1. CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

2. CLI服务器

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server之上的。它包含了：

- 加载其它 CLI 插件的核心服务；

- 一个针对绝大部分应用优化过的内部的 webpack 配置；

- 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

如果你熟悉 create-react-app 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。

3.CLI插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。

CLI的安装

vue CLI 为了方便管理所有项目，建议全局安装

npm install -g @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

如果后期需要升级可以使用升级命令

npm update -g @vue/cli

使用命令行新建项目

使用CLI新建项目，先新建一个项目文件夹，然后在文件夹内使用命令行输入以下命令

vue create 项目名称

接着会进入项目信息选项

这里可以根据你的需要新建vue3（带检查），vue2（带检查）或手动配置

这里需要注意，默认项目自带eslint代码检查，会严格要求你写符合他要求的代码，包括但不限于空格方式，分号使用方式等等。如果不想用，可以自己手动选择
选择方式是按空格确定  

这里我们就取消Linter检查，方便使用自己的习惯写代码

接着我们选择要创建项目的版本

接下来就是要选择配置文件的保存方式，我们默认选择独立保存配置文件

接下来我们将刚才的配置方式，保存为一个自定义的配置，这样以后新建项目，就可以按当前项目自动选择。

然后自定义一个配置名

接着回车确认，就开始创建新项目了

切换到项目目录下之后，运行 npm run serve 就可以启动服务器，然后访问他提供的网址即可访问

使用图形界面新建项目

除了使用命令行来创建项目，你还可以使用图形界面来创建项目

vue ui

当你输入完这个命令之后，系统会自动打开一个Vue 项目管理器网页

这里可以对当前目录下的所有项目进行管理。

点击创建，就可以看到刚才创建的 hello 的项目

点击 在此创建新项目 就可以图形化新建一个项目

填好信息之后，选择下一步，就可以看到我们刚才保存的配置文件。

点击 创建项目 之后，会等待一会，就会提示创建成功

vue ui的强大之处，这里就能体现，它可以通过这个网页管理项目的插件，配置，状态，服务器运行，依赖管理等等