前端培训-中级阶段（39）- 脚手架 vue-cli

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，如今前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提高技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。

前面咱们学习 vue 基本的使用，如今咱们要开始更好的使用 vue 。
通常来讲咱们使用 vue 无非下面几种方式

1. script 引入资源、代码（古老的方式）
2. requireJs 引入资源（早期模块化方式）
3. webpack、gulp 等构建打包的方式（单文件组件，目前用的最多方式）

webpack 的方式也是咱们今天要讲的，不过 webpack 配置太繁琐了。咱们直接上 vue-cli。

webpack 构建的好处（工程化）

1. babel 处理 js 的兼容性问题。（ES6 转换为 ES5）
2. eslint 检查规范
3. postcss 处理 css 的兼容问题。（自动前缀、scss 等等）
4. 压缩资源
5. 打包、缓存问题等等
6. mock 数据、跨域代理等等

能够看到，经过 webpack 等工具咱们可让前端项目更加健壮，并且也解决了许多痛点。

vue-cli@4.3.1

vue-cli 是 vue 的脚手架，能够快速配置一个开发环境，基于 Vue.js 进行快速开发的完整系统。

前端就一个问题，更新贼快，基本不兼容，本文基于 vue-cli@4.3.1 版本。

vue-cli 有什么特色

1. 功能丰富
   对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。
2. 图形化界面
   经过配套的图形化界面建立、开发和管理你的项目。
3. 易于扩展
   它的插件系统可让社区根据常见需求构建和共享可复用的解决方案。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。
它确保了各类构建工具可以基于智能的默认配置便可平稳衔接，这样你能够专一在撰写应用上，而没必要花好几天去纠结配置的问题。
它也为每一个工具提供了调整配置的灵活性，无需 eject。

vue-cli 起步

安装：

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 ui

1. Please pick a preset:

   1. default (Babel, eslint)
      使用默认配置，包含babel,eslint

   2. manually select features
      手动选择，自由组合（Babel、TS、PWA、Router、Vuex、css pre-processors、linter/formatter、Unit Testing、E2E Testing）

      1. babel 是用来将代码编译成能够被低版本浏览器执行的工具，好比箭头函数 ()=> 等。

      2. TS 是指代码基于 TS 来编写，固然仍是会编译成 JS 来在浏览器中执行的。

         1. 是否使用class风格的组件语法：Use class-style component syntax?
         2. 是否使用babel作转义：Use Babel alongside TypeScript for auto-detected polyfills?
      3. PWA 是指资源缓存，能够像本地应用同样使用。
      4. Router 是路由系统。是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
      5. Vuex 是数据管理系统。是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

      6. css pre-processors 就是 postcss、sass 之类的预处理工具。

         1. 选择CSS 预处理类型：Pick a CSS pre-processor

      7. linter/formatter 代码语法检测/代码美化

         1. 选择Linter / Formatter规范类型：Pick a linter / formatter config
         2. 选择lint方式，保存时检查/提交时检查：Pick additional lint features
      8. Unit Testing、E2E Testing

2. Pick the package manager to use when installing dependencise

   1. use Yarn
      使用 Yarn 做为包管理工具
   2. use NPM
      使用 NPM 做为包管理工具

快速原型开发：执行单个文件

使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这须要先额外安装一个全局的扩展：

npm install -g @vue/cli-service-global

vue serve 的缺点就是它须要安装全局依赖，这使得它在不一样机器上的一致性不能获得保证。所以这只适用于快速原型开发。

vue serve MyComponent.vue

vue-cli 结构

- lilnong-top-cli: project项目文件
-- .gitignore
-- babel.config.js: babel 配置文件
-- node_modules: 包
-- package-lock.json
-- package.json：webpack 配置文件，vue-cli 也是使用 webpack 的，因此主要看这个文件。
-- public: 资源
-- README.md    
-- src: 代码

~/.vuerc 文件

~/ 是指当前用户目录，好比我，登录用户名是 linong，linux 中就是 /home/linong，window 中是 C:\Users\linong。

~/.vuerc 保存的是手动选择特性。在操做提示的最后你能够选择将已选项保存为一个未来可复用的 preset。

vue CLI 插件系统结构

Vue CLI 使用了一套基于插件的架构。
若是你查阅一个新建立项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。
插件能够修改 webpack 的内部配置，也能够向 vue-cli-service 注入命令。
在项目建立的过程当中，绝大部分列出的特性都是经过插件来实现的。

基于插件的架构使得 Vue CLI 灵活且可扩展。若是你对开发一个插件感兴趣，请翻阅插件开发指南。

能够经过 vue ui 命令使用 GUI 安装和管理插件，可使用命令行的方式 vue add eslint。

建议使用 vue ui ，图形化的界面仍是比较容易使用

vue-cli 命令

该部分不重要，能够直接掠过

vue serve

Usage: serve [options] [entry]

在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器

Options:

  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

vue build

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 create

建立一个由 `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                      输出使用帮助信息

vue-cli-service serve

这个命令就是咱们 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)

vue-cli-service build

这个是 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       监听文件变化

vue-cli 配置

浏览器兼容性 browserslist Polyfill

咱们知道兼容性分为 JS 兼容性、CSS 兼容性、html 兼容性

vue-cli 使用 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来肯定须要转译的 JavaScript 特性和须要添加的 CSS 浏览器前缀。了解如何指定浏览器范围。

1. html 兼容性，比较小众，并且 vue 也有必定的兼容性要求，因此就不放开说了。

   1. ie 使用 html5 标签须要建立一下才能正常使用。可使用 _html5shiv_， 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素
   2. 而后就是一些特性的问题了，好比 input 的全部 type。

2. JS 兼容性，这里分为几种:语法兼容性、特性兼容、函数方法兼容性

   1. 语法兼容性，就是箭头函数、展开运算符、class 之类的，基本上靠 babel 能解决个差很少
   2. 特性兼容，就是 babel 没法模拟的，属于更加底层的能力。Object.defineProperty() 、 Proxy
   3. 函数方法兼容性，就是一些比较新的对象或者方法了，这个能够经过 babel-polyfill 解决个差很少。好比说 Promise、String.prototype.padStart 之类的。
3. CSS 兼容性，主要就是老版本不支持，通常是依赖浏览器本身的实现，经过 Autoprefixer 来加前缀解决。可是属于那种过低级的浏览器就没法兼容。常见兼容性好比 flex、grid、粘性定位。

nvm

nvm-windows 使用

若是以前使用了 node 能够先删除掉

1. 打开 https://github.com/coreybutler/nvm-windows/releases
2. 下载 nvm-setup.zip 包。（我地址是 1.1.7 版本的）
3. 双击打开安装。记住安装路径，以后配置环境变量（我电脑很是憨，非得配置到用户下才识别）。
4. 打开 cmd （shell 工具也能够，看你本身习惯），cd 到安装路径运行 nvm
5. 找一个合适版本的 node。我使用的是 https://nodejs.org/dist/v10.20.1/

6. 使用 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/

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划
2. vue-cli 官网
3. vue-cli 文章