第八节：Vue Cli简介/安装、两种Create项目的方式、相关配置说明
一. Vue Cli简介/安装
1. 简介
Vue Cli用于快速生产Vue项目的基础结构，也称为：Vue脚手架。它提供两种创建项目的方式：交互式命令行 和 图形化界面。
官网地址：https://cli.vuejs.org/zh/
2. 安装
(1). 通过下面指令进行全局安装
npm install -g @vue/cli
(2). 通过指令【vue -V】，查看安装版本。
二. Create项目方式-交互式命令行
1. 新建一个文件夹VueProject，基于该文件夹打开命令行，输入指令【vue create mytest2】
PS: 这里的项目命名不支持驼峰，但可以种-分割。
2. 选择Manually select features(选择特性以创建项目)
3. 勾选项目中所需要的特性，【空格键】选中，这里选Babel、Router、Linter/Formatter等
4. 选择Vue的版本，这里采用2.x版本
5. 是否选用历史模式，这里输入n，不选用
6. ESLint选择：ESLint + Standard config
7.何时进行ESLint语法校验：Lint on save
8. babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
9. 是否将上述配置保存为模板，这里输入n，不保存
10. 等待安装即可。
11. 下载完成后，进入mytest2文件夹下，运行指令【npm run serve】，编译并启动程序。输入地址：http://localhost:8080/，进入下面页面。
指令补充
【npm run serve】Compiles and hot-reloads for development
【npm run build】Compiles and minifies for production
【npm run test】Run your tests
【npm run lint】Lints and fixes files
三. Create项目方式-图形化界面
1. 新建一个文件夹VueProject，基于该文件夹打开命令行，输入指令【vue ui】，可视化UI页面。
PS：如果之前在该路径通过UI界面创建过项目，进入的xxx，需要xxx切换到项目管理器页面。
2. 进入【创建】选项卡，创建1个新项目mytest3，并选择包管理器为npm，然后下一步
3. 进入预设页面，这里我们选择手动配置项目，如果你之前保存了预设，在这里可以选择之前保存过的。
4. 进入配置插件页面。通常这里我们要选的有： Choose Vue Version、Babel、Router、Linter/Formatter、使用配置文件等等。
5. 选择Vue版本、关闭history mode、选择标准模式、选择Lint on save，然后点击创建项目。
6. 会提示是否将上述配置保存为预设，供下次使用，我们这里保存预设为 ypfconfig1，并且创建项目。
PS：预设的存储位置
7. 等待创建项目，直到创建成功。
8. 创建成功后，我们会进入 【http://localhost:8000/dashboard 】，图像化配置页面。
如何启动项目？
进入任务页面→serve→运行，编译完成后，点击启动app，进行启动。项目启动成功。
四. 相关配置
1. 项目结构介绍
2. 配置启动端口
(1). 方案1
在package.json文件中，新增下面节点，然后运行【npm run serve】，启动项目即可。
"vue": { "devServer": { "port": "9990", "open": true } }
(2). 方案2
在当前根目录下新建文件vue.config.js，赋值下面代码
module.exports = { devServer: { port: 8888, open: true } }
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
