乐趣区

关于javascript:前端培训中级阶段39-脚手架-vuecli

jiezi

前端最根底的就是 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 文章
退出移动版