vue4.0使用记录

1. vue ui创建

极其人性化，傻瓜式操作，过程中选择手动配置即可避免安装上一些不想要的包。

2. css预处理器

只需在新建项目中设置好即可，后续自行添加会相对麻烦些。

3. vue.config.js配置，首屏加载优化相关

• webpack externals可以在build时不打包某些包，相对于的，需要替换用CDN方式导入那些包；

• Gzip配合服务器端配置，可以压缩文件；

• 不打包打印及调试代码

const path = require('path')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
  configureWebpack:{
    externals: {
      'vue': 'Vue',
      'axios': 'axios',
      'echarts': 'echarts',
      'vue-router': 'VueRouter'
    },
    plugins: [
    	new CompressionWebpackPlugin({
    		filename: '[path].gz[query]',
    		algorithm: 'gzip',
    		test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
    		threshold: 10240,
    		minRatio: 0.8
    	}),
    	new UglifyJsPlugin({
    		uglifyOptions: {
    			compress: {
//  				warnings: false, // 若打包错误，则注释这行
    				drop_debugger: true,
    				drop_console: true,
    				pure_funcs: ["console.log"]
    			}
    		},
    		sourceMap: false,
    		parallel: true
    	})
    ]
  },
	productionSourceMap: false
}

4. cdn引入插件，vue.config.js中的相关配置

main.js中的import无需删除