vue-cli3学习第三节之引入各种插件

简单的环境配置好后，那么就开始引入所需要的插件了，个人常用的插件有：

非服务端渲染：

1. vant（前端ui框架）;
2. axios（请求插件）;
3. Cookies（cookie存储方法封装）;

一般项目有着3个几乎就够了，毕竟babel转码，vue-router已经自动装好了。

 

如果开发移动端项目的话，增加个调试工具插件vconsole:

vconsole-webpack-plugin（用于移动端模拟开发者工具的插件)

通过  npm install vconsole-webpack-plugin --save-dev  安装，然后在vue.config.js中配置：

// vue.config.js

const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 （另：https://github.com/liriliri/eruda）
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
 
module.exports = {
    // webpack配置
    //调整 webpack 配置https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
    configureWebpack: config => {  // 覆盖webpack默认配置的都在这里
        //生产and测试环境
        let pluginsPro = [
            //	Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)
            new BundleAnalyzerPlugin(),
        ];
        //开发环境
        let pluginsDev = [
            //移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin  https://github.com/Tencent/vConsole)
            new vConsolePlugin({
                filter: [], // 需要过滤的入口文件
                enable: true // 发布代码前记得改回 false,如果允许测试开发环境出现vconsole,可以选择不修改
            }),
        ];
        if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
            config.plugins = [...config.plugins, ...pluginsPro];
        } else {
            // 为开发环境修改配置...
            config.plugins = [...config.plugins, ...pluginsDev];
        }
    },
}

如果你要px转rem，推荐 vant建议的 postcss-pxtorem ，安装方法及相关参数看官方的github即可，最后在package.json中配置下：

{
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 16,
        "propList": [
          "*"
        ]
      }
    }
  },
}

 

服务端渲染：

1. compression-webpack-plugin（用于解决打包后的文件依旧很大的压缩插件，1M的能压缩成70kb，不过需要后端支持）；

通过 npm install compression-webpack-plugin --save-dev 安装，在vue.config.js中配置：

// vue.config.js
// 

const CompressionPlugin = require('compression-webpack-plugin'); //Gzip

module.exports = {
    // webpack配置
    configureWebpack: config => {  // 覆盖webpack默认配置的都在这里
        //生产and测试环境
        let pluginsPro = [
            new CompressionPlugin({ //文件开启Gzip，也可以通过服务端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ),
                threshold: 10240,
                minRatio: 0.8,
            })
        ];
        let pluginDev = [];   
        if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'
            config.plugins = [...config.plugins, ...pluginsPro];
        } else {
            // 为开发环境修改配置...
            config.plugins = [...config.plugins, ...pluginsDev];
        }
    },
}

 

 

 

 

---

vant安装：https://youzan.github.io/vant/#/zh-CN/quickstart  请看官网

axios安装：npm install axios

Cookies：直接js引入

暂时先写到这，要回家了，天色不太好，不想变成咸湿鱼。