前端培训-中级阶段（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 文章