博客

Vue学习笔记—vue-cli

  • Post author:
  • Post category:vue




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

      ，使用中按需获取组件实例，避免包过大


版权声明：本文为qq_44242707原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。