vue 全局变量_一张图教你快速玩转vue-cli3

前言

本文系统的梳理了vue-cli3搭建项目的常见用法，目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点：

• 如何安装项目插件
• 添加浏览器支持
• 如何配置scss/stylus共享全局变量
• 如何整合elementUI等第三方框架并实现按需引入
• 配置单/多页面
• 如何配置自定义环境变量
• 如何在vue.config.js定制自己的webpack
• vue项目部署

说明

本文末尾会给出一个以上提到的所有功能的一个配置文件，可供大家学习参考。

思维导图

接下来，我们根据思维导图，一步步来解释和实现我们的目标。1.安装项目插件

vue add @vue/cli-plugin-eslint# 或vue add xjFile复制代码

vue add 的设计意图是为了安装和调用 Vue CLI 插件。对于普通的 npm 包而言，我们仍然可以(根据所选的 npm 包)使用包管理器。最后可以在vue.config.js做webpack自定义配置

2.添加浏览器支持

1. browserslist

我们可以通过package.json 文件里的 browserslist字段或一个单独的 .browserslistrc 文件来指定项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀

例如：

// .browserslistrc> 1%last 2 versions复制代码

想要获取更多browserslist，可移步browserslist

1. Polyfill

默认情况下，cli会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。但是如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。我们可以通过如下三种方式解决此类问题：

• 将依赖添加到 vue.config.js 中的 transpileDependencies 选项

// vue.config.jsmodule.exports = { // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来 transpileDependencies: ['glob']}复制代码

• 可以使用 @vue/babel-preset-app 的 polyfills 选项预包含所需要的 polyfill

// babel.config.jsmodule.exports = { presets: [ ['@vue/app', { polyfills: [ 'es6.promise', 'es6.symbol' ] }] ]}复制代码

• 使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill',这种方式的问题就是会增加包的大小

3.配置scss/stylus共享全局变量

对与scss，可以使用如下方式开启：

// vue.config.jsmodule.exports = { css: { loaderOptions: { sass: { // 这里假设你有 `src/variables.scss` 文件 data: `@import "~@/variables.scss";` } } }}复制代码

对于stylus，本人亲测使用如上方式无效，可以通过如下方式实现：

vue add style-resources-loader// vue.config.jsconst path = require('path')module.exports = { pluginOptions: { 'style-resources-loader': { 'patterns': [ path.resolve(__dirname, 'src/styles/abstracts/*.styl'), ] } }}复制代码

4.整合elementUI等第三方框架并实现按需引入

1. 安装babel-plugin-component

npm install babel-plugin-component -D复制代码

1. 配置babel.config.js

module.exports = { presets: [ '@vue/app', ], plugins: [ [ "component