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:是一种resource hint,用来指定页面加载后很快用到资源。 默认情况下Vue CLI为所有初始化渲染需要的文件自动生成 preload 提示,这些提示会被 @vue/preload-webpack-plugin 注入,并且可以通过chainWebpack的 config.plugin('prefetch') 进行修改和删除
  • Prefetch:是一种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 默认会设置一个指向 /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,使用中按需获取组件实例,避免包过大

你可能感兴趣的