Vue-cli
首先要明确一件事情：Vue-CLI ≠ Vue，Vue-CLI就是一个Vue工具。
1、单文件组件
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由JS驱动的时候，下面这些缺点将变得非常明显：
- 所有的组件都放同一个html文件中
- 没有构建步骤,不能使用npm来管理项目
- 缺乏语法高亮和提示
- 没有针对单个组件的css样式支持
针对于上述的问题，vue框架发布了vue-cli项目生成工具，Vue-cli是一个基于 Vue.js 进行快速开发的完整系统， 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。
2、工具安装
Vue-cli3.x以上版本需要 Node.js 8.9 或更高版本(推荐 v10 以上)。
网址：http://npmjs.com
## 安装
npm install -g @vue/cli
## 安装成功后，检查
vue --version
vue -V
# Vue和VueCLI是两回事
## 卸载 其实这个不经常使用的
npm uninstall -g @vue/cli
如果需要安装其他版本，可以使用
npm install -g @vue/cli@版本号的方式进行指定版本。
如果最新版安装不成功，可以尝试以下3种方式去解决：
- 断网，使用热点共享流量去执行安装命令
- 安装其他版本
- 切换一下npm镜像源，切换成taobao
3、创建项目
# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令
# 如果当前你的终端工作路径带有中文或者空格，你可以使用`cd 路径`形式进行路径切换，切换到符合要求的路径中
vue create 项目名称(创建时会自己以对应的项目名称生成目录)
## 例
vue create myproject
# 上述命令中，可以允许变的就是`myproject`部分
以下步骤以Vue CLI v4.5.6为例，仅供参考，在实际使用时，请以自身需求为准进行配置
- 预设选择
第一个是默认的Vue 2 项目 集成了babel 和 eslint
第二个是默认的Vue 3 （预览版本） 集成了babel 和 eslint
第三个是自定义的类型
- 选择预设功能（根据自身项目需要选择）
- 选择Vue版本
- 选择
ESlint配置（如果启用）
- 选择额外的
eslint功能
- 是否独立配置
- 是否保存本次操作预设
- 项目创建成功
4、目录结构介绍
- src（最主要的目录、后期很多操作都在这个目录中完成）
- main.js：项目/程序入口文件 （该文件中JavaScript代码都会被执行）
- App.vue：根组件（万物之根）
- components：自定义的
功能组件 - assets：静态资源目录（图片、视频、音频等就是静态资源）
- views：（刚刚创建好的项目是没有的，后期会用到）存放
视图组件的
5、项目的运行及注意事项
###5.1、项目的启停
如上图所示，在创建项目完成后有提示我们后续的操作：
- 在命令行中进入项目目录
- 运行
npm run serve命令来启动项目
按照上述命令执行后，我们会见到如下的效果，即表示项目运行成功：
注意：默认端口号会从8080开始，如果再次启动其他项目后续会以8081、8082……进行监听。
如果需要停止正在运行的项目，可以选择以下两种方式任一：
- 关闭终端
- 在终端中按下组合键
Ctrl + C（Cancel），随后选择Y并键入回车（如下图）
5.2、关于ESlint
ESlint用于规范项目的编码，大型项目一般多人开发，为了避免一些个人编程恶习坑自己坑别人，项目中使用了ESlint会起到紧箍咒的作用，强制开发人员注意代码规范。例如，在不使用ESlint的情况下，JS允许我们声明一个不变量但不使用。如果使用了ESlint，在上述情况下会报错如下：
关于ESlint的报错，有一份错误参照，可以访问以下地址查看：https://cn.eslint.org/docs/rules/