vue-cli脚手架

1. Vue-cli脚手架

Vue-cli是Vue官方提供的，快速征程Vue工程化项目的工具。它开箱即用，而且功能丰富已于扩展，还支持创建Vue2和Vue3项目，是Vue项目开发必备的工具。本章重点讲解Vue-cli的环境搭建及项目的创建，利用Vue-cli来进行前端的开发。

2. 搭建Vue-cli脚手架

2.1 安装npm包管理器

npm是node.js安装的包管理工具，解决代码部署相关问题，常用场景如下：

1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

从node.js中文网下载一路安装即可，建议安装LTS版本

安装后在终端中输入node -v，显示出node.js的版本号就证明安装成功了

node -v

2.2 全局安装Vue-cli

npm install -g @vue/cli         //全局安装最新版vue-cli 
npm install -g @vue/cli@x.x.x  //全局安装指定版本vue-cli

安装完成后终端输入vue --version显示出vue-cli的版本号就证明安装成功了

2.3 使用vue-cli创建vue项目

vue create vue-demo

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

vue create --help  //查看vue create相关用法

用法：create [options] <app-name>
创建一个由 `vue-cli-service` 提供支持的新项目

选项：
-p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
-d, --default                   忽略提示符并使用默认预设选项
-i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
-r, --registry <url>            在安装依赖时使用指定的 npm registry
-g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git                    跳过 git 初始化
-f, --force                     覆写目标目录可能存在的配置
-c, --clone                     使用 git clone 获取远程预设选项
-x, --proxy                     使用指定的代理创建项目
-b, --bare                      创建项目时省略默认组件中的新手指导信息
-h, --help                      输出使用帮助信息

然后会自动下载依赖，完成时如下图

运行项目

 cd vue-demo
 npm run serve

按住Ctrl鼠标点击如上两个链接，会跳转到web地址

使用图形化界面
进入你的项目路径，输入vue ui会打开一个浏览器窗口，以图形化界面引导你完成项目的流程创建，个人比较推荐新手采取这种方式，尤其安装插件内容（下面会讲到），可通过搜索到相关插件即可完成安装配置

vue ui

选择你的项目，然后点击导入这个文件夹

拉取 2.x 模板 (旧版本)
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

2.4 插件

Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。

基于插件的架构使得 Vue CLI 灵活且可扩展。如果你对开发一个插件感兴趣，请翻阅插件开发指南。

在项目中安装插件
每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件。当你使用 vue create 来创建一个新项目的时候，有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令：

vue add eslint

这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，然后从 npm 安装它，调用它的生成器。

注意 ：
vue add 的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然需要选用包管理器。