1. 介绍
- Vue脚手架是用来创建vue项目的工具包，主要是通过webpack搭建的开发环境
- 使用ES6规范：不用担心浏览器是否兼容的问题，因为webpack里面的loader会自动将es6规范转换为es5，大部分浏览器都是可以识别的
- 可以打包和压缩JS为一个文件
- 项目文件是在环境中编译，而不是在浏览器
- 可以实现页面的实时刷新
2. 准备工作
2.1 检查以下是否安装
# 确定是否已经安装 node, npm, vue-cli脚手架
# 1. 查看是否安装node
node -v
# 2. 查看是否安装npm：
npm -v
# 3. 查看是否安装vue-cli：
vue -V # 注意：显示的是脚手架的版本号
# 4. vue 最新稳定版安装
npm install vue
# 如果想要查看当前项目的vue版本，
# 可以找package.json文件， 找"dependencies"即可查看vue版本
2.2 下载vue-cli脚手架
vue-cli 只需全局安装一次即可
npm install --global vue-cli
# 或
npm install -g vue-cli
# 或
npm i -g @vue/cli
# 判断是否已经安装vue-cli：
vue --version # 或 vue -V
3. vue-cli 2.XX脚手架搭建项目
3.1 初始化项目
# 创建一个基于webpack模板的新项目
vue init webpack VueDemoName
# 或 创建一个简洁的模板
vue init webpack-simple VueDemoName
# 如果项目要使用sass编译css，需要额外安装以下项目依赖
cnpm install --save node-sass sass-loader@7
3.2 进入项目目录
cd VueDemoName(项目目录名称)
3.3 安装项目依赖
npm install
3.4 开发环境项目运行
npm run dev
3.5 生产环境打包发布
npm run build
npm install -g serve
serve dist
项目运行地址：http://localhost:5000
4. vue-cli 4.XX脚手架搭建项目
4.1 创建项目
vue create vuecli4(项目名称)
4.2 配置项设置
选择手动配置项目（方向键即可选择），也可以选择之前保存的模板直接配置项目
4.3 选择配置项：空格键选择或不选
一般选项如下，也可以自定义选项
( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行( ) Progressive Web App (PWA) Support// 渐进式Web应用程序( ) Router // vue-router（vue路由）( ) Vuex // vuex（vue的状态管理模式）( ) CSS Pre-processors // CSS 预处理器（如：less、sass）( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）( ) Unit Testing // 单元测试（unit tests）( ) E2E Testing // e2e（end to end） 测试复制代码
4.4 选择一个vue版本，这里我们默认是 2.x
4.5 是否使用 history router，默认n（默认使用hash模式）
- Vue-Router 利用了浏览器自身的 hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）
- 建议选n,因为这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
- 如果是选yes的话需要服务器那边再进行设置
4.6 选择css 预处理器：node-sass
- 默认是Sass/Scss(with dart-sass) ，但是我的项目选项是node-sass
- node-sass是自动编译实时的，dart-sass需要保存后才会生效
- sass 官方目前主力推dart-sass
4.7 选择Eslint代码验证规则，ESLint + Standard config
4.8 选择什么时候进行代码规则检测，默认选项
Lint on save // 保存就检测Lint and fix on commit // fix和commit时候检查复制代码
