1. Frequently develop dependencies

1.1, the element – the UI

A complete introduction

Import Vue from 'Vue '; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); Use (ElementUI, {size: 'small', zIndex: 3000}); new Vue({ el: '#app', render: h => h(App) });Copy the code

According to the need to introduce

Install babel-plugin-component CNPM install babel-plugin-component -d babel.config.js {"presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "Theme -chalk"}]]} # Check the file SRC/utils/ElementUiCom [https://github.com/lifengand1992/elementuione/blob/master/src/utils/ElementUiCom.js] (url)Copy the code

Cannot find module ‘babel-PRESET – ES2015 ‘,

Js {"presets": [["@babel/preset-env", {"modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }Copy the code

1.2. Earlier browsers support ES6

/ / babel-polyfill CNPM install --save-dev babel-polyfill CNPM install --save-dev babel-polyfill CNPM install --save-dev babel-polyfill ["babel-polyfill", "./app/js"] }; Var. Config. js module. Exports = {// add transpileDependencies to exports: ['element-ui'], ChainWebpack (config) {config.entry('main').add('babel-polyfill') // main is entry js file}}Copy the code

1.3. Introduce Echarts

CNPM install echarts --save # import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts; // Import the ECharts core module, which provides the interface required for ECharts use. import * as echarts from 'echarts/core'; Chart import {BarChart} from 'echarts/charts'; // Introduce prompt box, title, cartesian coordinate component, Component import {TitleComponent, TooltipComponent, GridComponent} from 'echarts/ Components '; Import {CanvasRenderer} from 'echarts/renderers'; Echarts.use ([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]);Copy the code

1.4, axios

CNPM install axios -sCopy the code

2. Development dependencies

2.1 Image Compression

CNPM i-d image-webpack-loader config => { config.module .rule("images") .use("image-webpack-loader") .loader("image-webpack-loader") .options({ Mozjpeg: {progressive: true, quality: 65}, opTIPng: {enabled: false}, pngQuant: {quality: [0.65, 0.9], speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } }); }Copy the code

2.2 Convert small images to Base64 to reduce HTTP requests

// Change Loader option chainWebpack(config) {// Change images smaller than 10KB to base64, Reduce HTTP requests config.module.rule ('images').use('url-loader').loader('url-loader').tap(options => object.assign (options, { limit: 10240 })) }Copy the code

2.3 Packaging Analysis

CNPM install -d webpack-bundle-Analyzer require("webpack-bundle-analyzer").BundleAnalyzerPlugin; const isProduction = process.env.NODE_ENV === 'production'; ChainWebpack (config) {if (isProduction) {if (isProduction) { config.plugin("webpack-report").use(BundleAnalyzerPlugin, [ { analyzerMode: "static" } ]); }}Copy the code

2.4 Enabling Gzip Compression

NPM install compression-webpack-plugin -d gzip zip yarn add compression-webpack-plugin -d NPM install compression-webpack-plugin -d vue.config.js const CompressionWebpackPlugin = require('compression-webpack-plugin'); const isProduction = process.env.NODE_ENV === 'production'; module.exports = { configureWebpack: (config) => {if (isProduction) {config.plugins.push(// compress to gz new CompressionWebpackPlugin ({test: /\.(js|css|json|txt|html|ico|svg)(\? . *)? $/ I, // Threshold: 100 * 1024}))}},}Copy the code

2.5 Deleting the Console in the Production Environment

Add babel-plugin-transform-remove-console -d # configure babel.config.js const plugins = [] if (process.env.node_env === 'production') { Push (['transform-remove-console', {// exclude console.error and console.warn exclude: ['error', 'warn'] } ]) } module.exports = { plugins: [ ...plugins ] }Copy the code

3. Vue.config. js configuration

const path = require('path'); const isProduction = process.env.NODE_ENV === 'production'; const CompressionWebpackPlugin = require('compression-webpack-plugin'); const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; const resolve = (dir) => path.join(__dirname, dir); Module.exports = {// Base directory publicPath: './', // build output directory outputDir: "dist", // build static resource directory (e.g. Js, CSS,images) assetsDir: "Static ", // filename hash filenameHashing: true, // Whether to use eslint to check lintOnSave: // Add the transpilemodule dependencies to the exports directory: // Add the transpilemodule dependencies to the exports directory: ['element-ui'], // with babel-polyfill // Whether source map productionSourceMap: false, // CSS related configuration CSS: {// Extract styles to CSS file [production environment true,] extract: isProduction, requireModuleExtension: // Add custom loaderOptions for the loader of the preprocessor: {SCSS: <style lang=" SCSS "> use prependData without importing the following two files: '@import "@/assets/ CSS /_var. SCSS "; @import "@/assets/css/_mixin.scss"; }}}, // WebPack configureWebpack: (config) => {if (isProduction) {// Compress to gz config.plugins.push(new CompressionWebpackPlugin({test: /\.(js|css|json|txt|html|ico|svg)(\? . *)? $/ I, // Over 100kb compression threshold: 100 * 1024})}}, // // Modify Loader option chainWebpack(config) { config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{ analyzerMode: "static" }]); } config.resolve.symlinks(true); Add ('babel-polyfill') // main is the entry js file // alias config.resolve. Alias .set('vue$', 'vue/dist/vue.esm.js') .set('@', resolve('./src')) .set('@css', resolve('./src/assets/css')) .set('@images', resolve('./src/assets/images')) .set('@components', Resolve ('./ SRC /components')) config.module. rule("images").use("image-webpack-loader") .loader("image-webpack-loader") .options({ mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: False}, pngQuant: {quality: [0.65, 0.9], speed: 4}, GIFsicle: {interlaced: false}, webp: {quality: 75}}); // Convert images smaller than 10KB to base64, Reduce HTTP requests config.module.rule ('images').use('url-loader').loader('url-loader').tap(options => object.assign (options, {limit: 10240}))}, // It supports all options of webpack-dev-server devServer: {HTTPS: false, // HTTPS :{type:Boolean} open: Proxy: {"/ API ": {/ / target: "http://2.2.2.226:32586/dataservice/sjcl/api/lssthjzhjg/v1/", / / interface to access the target domain: "Http://192.168.3.161:30532/dataservice/sjcl/api/lssthjzhjg", / / interface to access domain ws: true, / / whether to enable web sockets changeOrigin: PathRewrite: {'^/ API ': {'^/ API ': {'^/ API ': {'^/ API ': "' / / here as'/API instead of the inside of the target address, I will call 'http://40.00.100.100:3002/user/add', for example, write directly '/ API/user/add' can}}}},}Copy the code

4. Configure babel.config.js

const plugins = []; const isProduction = process.env.NODE_ENV === 'production'; If (isProduction) {if (isProduction) {if (isProduction) { Push (['transform-remove-console', {// exclude console.error and console.warn exclude: ['error', 'warn']}])} module.exports = {plugins: [...plugins, //element- UI: {"component", {"libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ], presets: ['@vue/cli-plugin-babel/preset', // elemental-ui is introduced as needed ["@babel/preset-env", {"modules": false}]]}Copy the code