前端培训-中级阶段（39）- 脚手架 vue-cli
码农天地 -
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。
前面我们学习 vue 基本的使用，现在我们要开始更好的使用 vue 。
一般来说我们使用 vue 无非下面几种方式
webpack 的方式也是我们今天要讲的，不过 webpack 配置太繁琐了。我们直接上 vue-cli。
webpack 构建的好处（工程化）babel 处理 js 的兼容性问题。（ES6 转换为 ES5）eslint 检查规范postcss 处理 css 的兼容问题。（自动前缀、scss 等等）压缩资源打包、缓存问题等等mock 数据、跨域代理等等可以看到，通过 webpack 等工具我们可以让前端项目更加健壮，而且也解决了许多痛点。
vue-cli@4.3.1vue-cli 是 vue 的脚手架，可以快速配置一个开发环境，基于 Vue.js 进行快速开发的完整系统。
前端就一个问题，更新贼快，基本不兼容，本文基于 vue-cli@4.3.1 版本。
vue-cli 有什么特点功能丰富对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。图形化界面
通过配套的图形化界面创建、开发和管理你的项目。易于扩展
它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。
它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。
它也为每个工具提供了调整配置的灵活性，无需 eject。
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+，其实我感觉 10.x 是极好，12.x 最好先不要上)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本
# 使用 npm 全局安装
npm install -g @vue/cli
# OR 使用 yarn 全局安装
yarn global add @vue/cli
# 查看 vue-cli 版本
vue -V# 使用命令提示行创建一个项目
vue create lilnong-top-cli
# OR 使用可视化界面创建一个项目
vue uiPlease pick a preset:
default (Babel, eslint)使用默认配置，包含babel,eslint
manually select features
手动选择，自由组合（Babel、TS、PWA、Router、Vuex、css pre-processors、linter/formatter、Unit Testing、E2E Testing）
()=> 等。TS 是指代码基于 TS 来编写，当然还是会编译成 JS 来在浏览器中执行的。
是否使用class风格的组件语法：Use class-style component syntax?是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?PWA 是指资源缓存，可以像本地应用一样使用。Router 是路由系统。是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。Vuex 是数据管理系统。是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。css pre-processors 就是 postcss、sass 之类的预处理工具。
选择CSS 预处理类型：Pick a CSS pre-processorlinter/formatter 代码语法检测/代码美化
选择Linter / Formatter规范类型：Pick a linter / formatter config选择lint方式，保存时检查/提交时检查：Pick additional lint featuresUnit Testing、E2E TestingPick the package manager to use when installing dependencise
use Yarn使用 Yarn 作为包管理工具use NPM
使用 NPM 作为包管理工具快速原型开发：执行单个文件
使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：
npm install -g @vue/cli-service-globalvue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。
vue serve MyComponent.vue- lilnong-top-cli: project项目文件
-- .gitignore
-- babel.config.js: babel 配置文件
-- node_modules: 包
-- package-lock.json
-- package.json：webpack 配置文件，vue-cli 也是使用 webpack 的，所以主要看这个文件。
-- public: 资源
-- README.md
-- src: 代码~/ 是指当前用户目录，比如我，登陆用户名是 linong，linux 中就是 /home/linong，window 中是 C:\Users\linong。
~/.vuerc 保存的是手动选择特性。在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。
Vue CLI 使用了一套基于插件的架构。
如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。
插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。
在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。
基于插件的架构使得 Vue CLI 灵活且可扩展。如果你对开发一个插件感兴趣，请翻阅插件开发指南。
可以通过 vue ui 命令使用 GUI 安装和管理插件，可以使用命令行的方式 vue add eslint。
建议使用 vue ui ，图形化的界面还是比较容易使用
vue-cli 命令该部分不重要，可以直接掠过
vue serveUsage: serve [options] [entry]
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
Options:
-o, --open 打开浏览器
-c, --copy 将本地 URL 复制到剪切板
-h, --help 输出用法信息Usage: build [options] [entry]
在生产环境模式下零配置构建一个 .js 或 .vue 文件
Options:
-t, --target <target> 构建目标 (app | lib | wc | wc-async, 默认值：app)
-n, --name <name> 库的名字或 Web Components 组件的名字 (默认值：入口文件名)
-d, --dest <dir> 输出目录 (默认值：dist)
-h, --help 输出用法信息创建一个由 `vue-cli-service` 提供支持的新项目
用法：create [options] <app-name>
选项：
-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 输出使用帮助信息这个命令就是我们 npm run serve 执行的 "serve": "vue-cli-service serve",
用法：vue-cli-service serve [options] [entry]
选项：
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值：development)
--host 指定 host (默认值：0.0.0.0)
--port 指定 port (默认值：8080)
--https 使用 https (默认值：false)这个是 npm run build 时执行代码
用法：vue-cli-service build [options] [entry|pattern]
选项：
--mode 指定环境模式 (默认值：production)
--dest 指定输出目录 (默认值：dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app | lib | wc | wc-async (默认值：app)
--name 库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化我们知道兼容性分为 JS 兼容性、CSS 兼容性、html 兼容性
vue-cli 使用 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。了解如何指定浏览器范围。
html 兼容性，比较小众，而且 vue 也有一定的兼容性要求，所以就不放开说了。
ie 使用 html5 标签需要创建一下才能正常使用。可以使用 _html5shiv_， 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素然后就是一些特性的问题了，比如 input 的所有 type。JS 兼容性，这里分为几种:语法兼容性、特性兼容、函数方法兼容性
语法兼容性，就是箭头函数、展开运算符、class 之类的，基本上靠 babel 能解决个差不多特性兼容，就是 babel 无法模拟的，属于更加底层的能力。Object.defineProperty() 、 Proxy函数方法兼容性，就是一些比较新的对象或者方法了，这个可以通过 babel-polyfill 解决个差不多。比如说 Promise、String.prototype.padStart 之类的。CSS 兼容性，主要就是老版本不支持，一般是依赖浏览器自己的实现，通过 Autoprefixer 来加前缀解决。但是属于那种太低级的浏览器就无法兼容。常见兼容性比如 flex、grid、粘性定位。nvmnvm-windows 使用如果之前使用了 node 可以先删除掉
打开 https://github.com/coreybutler/nvm-windows/releases下载 nvm-setup.zip 包。（我地址是 1.1.7 版本的）双击打开安装。记住安装路径，之后配置环境变量（我电脑非常憨，非得配置到用户下才识别）。打开 cmd （shell 工具也可以，看你自己习惯），cd 到安装路径运行 nvm找一个合适版本的 node。我使用的是 https://nodejs.org/dist/v10.20.1/使用 nvm 安装对应版本的 nodejs
# 安装 10.20.1 版本
nvm install 10.20.1
# 切换版本为 10.20.1
nvm use 10.20.1
# 查看 node 版本
node -v
# 切换资源源
nvm npm_mirror https://npm.taobao.org/mirrors/npm/Tags 标签
加个好友，技术交流
