1. Vue 脚手架的基本用法
在没有Vue脚手架的时候，我们需要手动搭建webpack项目、手动去配置vue，现在有了Vue脚手架，我们就可以通过命令行的形式快速生成vue项目的基础架构。其官网地址为：https://cli.vuejs.org/zh/
① 安装 Vue 脚手架
安装 3.x 版本的 Vue 脚手架。
sudo npm install -g @vue/cli
// 推荐使用3.x 版本的 Vue 脚手架，因为3.x的版本既可以创建3.x的项目又可以创建2.x的项目
// 如果不指定版本号，则默认安装的是最新的
输入 vue -V 如果出现版本号，就说明安装成功。
//如果想安装指定版本的脚手架，需要先卸载对应的版本，重新安装，卸载命令行：
npm uninstall vue-cli -g
脚手架安装成功之后，就可以通过脚手架创建vue项目了。
② 基于交互式命令行的方式，创建新版vue项目（掌握）
- 打开终端，cd到要创建项目的目录，执行命令
vue create my-project - 询问我们是默认还是手动手动选择特性以创建项目，按上下键，选择Manually select features，手动选择特性以创建项目
Vue CLI v4.5.11
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features
- 接下来进入特性选择面板，按空格可以选择特性，我们选中
BabelRouterLinter/Formatter，然后回车
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
❯◉ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
- 接下来询问我们安装的版本是2.x还是3.x，选择3.x
? Choose a version of Vue.js that you want to start the project with
2.x
❯ 3.x (Preview)
- 接下来询问我们是否使用历史模式的路由，选择否（输入n，回车），我们推荐使用hash模式的路由
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) n
- 接下来询问我们选择ESLint的语法版本，我们选择Standard config
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
❯ ESLint + Standard config
ESLint + Prettier
- 接下来询问我们什么时候进行ESLint语法规则校验，选择Lint on save
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit
- 接下来询问 Babel、ESLint 等等这些工具的配置文件怎么创建，一种是创建单独的配置文件，一种是统一把这些配置文件放到 package.json 中，推荐放到单独的文件中，这样好维护
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
- 接下来询问是否将当前创建的项目保存为一个模板留着以后直接使用，可以选择y也可以选择n
? Save this as a preset for future projects? (y/N) n
- 接下来就是项目的创建过程，创建完成之后提示如下：
🎉 Successfully created project vue_project_01.
👉 Get started with the following commands:
$ cd vue_project_01
$ npm run serve
- 创建完成之后，我们cd到项目目录，然后执行
npm run serve就可以把项目跑起来了
DONE Compiled successfully in 1854ms 16:15:24
App running at:
- Local: http://localhost:8080/
- Network: http://172.20.10.4:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
- 浏览器打开
http://localhost:8080/即可看到创建出来的项目了，如下：
③ 基于图形化界面的方式，创建新版vue项目（掌握+推荐）
- 打开终端，cd到要创建项目的目录，执行命令
vue ui，在自动打开的创建项目网页中配置项目信息（电脑要保持联网，否则报错）。 - 接下来进入Vue项目管理器面板中，点击创建，选择项目创建路径，点击在此创建新项目。
- 接下来进入创建新项目面板中，首先进行详情设置，填写项目名称、git提交信息。
- 接下来进入预设设置，如果以前创建过模板可以使用以前的模板，这里我们选择手动配置项目。
- 接下来进入功能设置，在这里选择安装哪些插件，我们选择
BabelRouterLinter/Formatter，一定要打开使用配置文件（打开这个，插件的配置文件会单独保存到一个文件中，而不是都保存到package.json中），Vuex我们暂时先不装，等以后用到的时候再开启。
-
接下来进入配置设置
- 问我们是创建2.x还是3.x的项目，我们选择3.x
- 问我们是否使用历史模式的路由，选择否，我们使用hash模式的路由
- 让我们选择Linter/Formatter的配置文件，我们一定要选择标准模式的配置文件
- 让我们选择什么时候进行ESLint语法规则校验，选择 Lint on save
- 询问是否将当前创建的项目当成一个模板，这个随便了
- 项目创建成功之后默认会进入仪表盘界面，在左侧可以查看当前项目的仪表盘、插件、依赖、配置。点击项目名，再点击Vue项目管理器，可以查看使用可视化面板创建了多少个项目，如下：
- 任务中的
serve是开发期间的打包和运行，build是把项目发布成一个成品的项目用于线上运行，点击serve里面的运行即可编译项目，编译成功之后，点击启动app，即可启动项目，项目效果如下：
2. Vue 脚手架生成的项目结构分析
node_modules: //依赖包目录
public： //静态资源文件，比如index.html、图标、初始化的css、静态json文件
src： //源码目录
src/assets: //资源目录，比如图片
src/components: //组件目录
src/views: //视图组件目录
src/router: //路由
src/store: //Vuex
src/App.vue: //根组件
src/main.js: //入口js
babel.config.js: //babel配置文件
.eslintrc.js: //eslint语法相关的配置文件
.gitignore: //git忽略文件
package.json //包管理配置文件
postcss.config.js: //postcss配置文件，比如配置浏览器的一些前缀，解决浏览器兼容性问题
3. Vue 脚手架的自定义配置
通过上面脚手架创建的Vue项目，使用 npm run serve 命令之后，打印如下：
DONE Compiled successfully in 1491ms 19:39:52
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.102:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
使用 npm run serve 命令并不会自动打开浏览器，下面我们修改端口号，并且让执行命令之后自动打开浏览器。
① 通过 package.json 配置项目（不推荐使用）
// 必须是符合规范的json语法（必须要使用双引号）
"vue": {
"devServer": {
"port": "8888",
"open" : true
}
},
注意：不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息，为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。
② 通过单独的配置文件配置项目（推荐）
- 在项目的根目录创建 vue.config.js 文件
- 在该文件中进行相关配置，从而覆盖默认配置
// vue.config.js
module.exports = {
devServer: {
port: 8887,
open: true
}
}
总结：至此，使用脚手架创建项目的流程就完成了，如果想要把项目拷贝给别人，需要先把项目的 node_modules 文件夹删除，对方拿到项目之后，首先要cd到项目目录，然后执行npm install安装所有依赖项，然后再执行npm run serve就可以把项目跑起来了。如果想要再给项目添加新的依赖，可以cd到项目目录，然后执行vue ui打开GUI，在可视化面板中就可以给项目添加新的依赖了。
