Vue学习笔记---vue-cli

Vue-cli

1.配置文件

vue.config.js

2.快速原型开发：对单个vue文件进行快速原型开发

• vue serve：需要安装全局依赖，机器一致性无法保证，对应目录执行：vue serve file
• vue build：将目标文件构建成一个生产环境的包用来部署，对应目录执行：vue build file

3.创建项目

• vue create project
• 选取preset：默认/手动，.vuerc保存设置
• vue ui：图形化创建和管理项目

4.插件：

• 每个CLI插件都会包含一个(用来创建文件)生成器和一个(用来调整webpack核心配置和注入命令的)运行时插件
• 现有项目安装插件：vue add plugin
• 项目本地的插件：package.json中配置vuePlugins.service/vuePlugins.ui选项为对应插件

5.Preset：.vuerc中配置

• 包含创建新项目所需预定义选项和插件的JSON对象
• 为集成工具添加配置：当"useConfigFiles":true，configs的值会被合并到vue.config.js中
• 版本管理：可配置插件的version选项，忽略时自动最新
• 允许插件的命令提示：可配置插件的prompts选项为true
• 远程Preset：创建项目时通过 --preset 使用远程preset
• 加载文件系统中Preset：–preset的值是相对或绝对文件路径则本地加载

6.CLI服务：

• vue-cli-service serve：启动一个开发服务器
• vur-cli-service build：产生可用于生产环境的包
• vur-cli-service inspect：审查一个Vue CLI项目的webpack config

7.浏览器兼容性：

• browserslist字段：指定项目目标浏览器，用来确定JS特性以及CSS浏览器前缀
• Polyfill：
  • 默认的Vue CLI项目会使用@vue/babel-preset-app，它通过@babel/preset-env 和 browserslist 配置来决定项目需要的 polyfill
  • 默认情况下，它会把useBuiltIns:'usage'传递给@babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill，确保polyfill数量的最小化
  • 如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill
  • 如果该依赖交付了 ES5 代码并显式地列出了需要的 polyfill: 你可以使用 @vue/babel-preset-app 的 polyfills 选项预包含所需要的 polyfill
  • 如果该依赖交付 ES5 代码，但使用了 ES6+ 特性且没有显式地列出需要的 polyfill (例如 Vuetify)：请使用 useBuiltIns: 'entry' 然后在入口文件添加 import 'core-js/stable'; import 'regenerator-runtime/runtime';。这会根据 browserslist 目标导入所有 polyfill
  • 当使用 Vue CLI 来构建一个库或是 Web Component 时，推荐给 @vue/babel-preset-app 传入 useBuiltIns: false 选项。
• 现代模式：vue-cli-service build --modern生成两个应用的版本， 现代版的包不需要为了支持旧的浏览器而生成冗长的转译代码

8.HTML

• Index文件：index.html在构建过程中，资源链接会被自动注入。另外Vue CLI会自动注入resource hint(preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时)） 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。
• 插值：可以使用lodash template插入内容
  • <%= VALUE %> 用来做不转义插值；
  • <%- VALUE %> 用来做 HTML 转义插值；
  • <% expression %> 用来描述 JavaScript 流程控制
• Preload：<link rel="preload">是一种resource hint，用来指定页面加载后很快用到资源。 默认情况下Vue CLI为所有初始化渲染需要的文件自动生成 preload 提示，这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过chainWebpack的 config.plugin('prefetch') 进行修改和删除
• Prefetch：<link rel="prefectch">是一种resource hint，用来告诉浏览器在页面加载完成后， 利用空闲时间提前获取用户未来可能会访问的内容。默认情况下Vue CLI会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin('prefetch') 进行修改和删除
• 构建多页面应用：Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用

9.处理静态资源

• 处理方式：
  • 在JavaScript被导入或在template/CSS中通过相对路径被引用。这类引用会被webpack处理。
  • 放置在public目录下或通过绝对路径被引用。这类资源将直接被拷贝而不会经过webpack处理。
• 从相对路径导入：资源url都会被解析为一个模块依赖，chainWebpack 调整内联文件的大小限制
• URL转换规则：
  • 绝对路径：保留
  • .开头：作为相对模块请求
  • ~开头：作为模块解析请求，可以引用Node模块资源
  • @开头：Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。(仅作用于模版中)
• public文件夹：提供应急手段，若应用没有部署在域名的根部，那么需要为URL配置publicPath前缀

10.CSS相关

• 引用静态资源：通过css-loader解析url引用将作为模块请求进行处理
• 自动化导入：通过style-resources-loader导入css资源
• 引用PostCSS和CSS modules
• 向预处理Loader传递选项：vue.config.js 中的 css.loaderOptions 选项

11.webpack相关

• 简单配置：vue.config.js中的configureWebpack选项：plugins: [new MyAwesomeWebpackPlugin()] 会被webpack-merge合并入最终的 webpack 配置。有些webpack选项是基于vue.config.js 中的值设置的，不能直接修改。
• 链式操作：Vue CLI内部的webpack配置是通过webpack-chain维护的。这个库提供了一个webpack原始配置的上层抽象，使其可以定义具名的loader规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改
• 审查webpack配置：vue-cli-service暴露了inspect命令用于审查解析好的webpack配置，调用 vue inspect将解析出来的webpack配置大隐刀stdout

12.模式

• development
• test
• production

13.环境变量：

• 只有NODE_ENV，BASE_URL 和以 VUE_APP_开头的变量将通过webpack.DefinePlugin 静态地嵌入到客户端侧的代码中

14.构建目标

• target选项指定不同的构建目标
• 应用模式：默认模式
  • index.html 会带有注入的资源和 resource hint
  • 第三方库会被分到一个独立包以便更好的缓存
  • 小于 4kb 的静态资源会被内联在 JavaScript 中
  • public 中的静态资源会被复制到输出目录中
• 库模式lib：
  • 项目的 publicPath 是根据主文件的加载路径动态设置
  • Vue是外置的，在命令中添加–inline-vue标志避免错误
  • 构建库输出文件：提供给打包器的CommonJS、给浏览器或UMD、压缩后的UMD、提取出的CSS
• Web Components模式：
  • Vue是外置的，既使导入包依旧假设有可用全局变量Vue
  • 构建一个组件，在脚本引入后作为元素使用
  • 注册多个组件的包，包内名称：名称前缀-文件名
  • 异步组件：--target wc-async，使用中按需获取组件实例，避免包过大