项目常用配置(慢慢更新)

配置项目使用rem布局

window.onload = function() {
	// 使用防抖
	let tid = null
	function refreshRem() {
		let designSize = 1920 // 设计图尺寸
		let windowWidth = document.documentElement.clientWidth // 获取窗口高度
		// console.log(windowWidth)
		windowWidth = windowWidth < 1250 ? 1250 : windowWidth // 防止窗口过小，样式不好看，这个1250可以根据自己的布局需求来跟换
		let rem = windowWidth * 100 / designSize  // *100是方便为了方便转换rem
		document.documentElement.style.fontSize = rem + 'px'
	}
	window.addEventListener('resize', function(){
		clearTimeout(tid)
		tid = setTimeout(refreshRem, 300)
	}, false)
	window.addEventListener('pageshow', function(e){
		if(e.persisted) {
			clearTimeout(tid)
			tid = serTimeout(refreshRem, 300)
		}
	}, false)
	refreshRem()
}

在项目中全局使用less的变量

// 首先下载 less 和 less-loader 包
npm i less less-loader -D
// 不想每个文件中都 @import 的去引入公共的less文件，需要下载样式处理器
// style-resources-loader 和 vue-cli-plugin-style-resources-loader
// 在下载时会让你选择哪种处理器 less sass scss..
// 下载完成后再vue.config.js中加入配置
const path = require("path"); // 这个是加文件路径的
module.exports = {
	pluginOptions: {
	    "style-resources-loader": {
	      preProcessor: "less",
	      patterns: [path.resolve(__dirname, "src/style/index.less")] // 引入全局样式变量，注意要加后缀，不然没用(我的不加就没用)
	    }
	},
	...// 别的配置
}

配置自动添加前缀

下载依赖

npm i postcss-loader autoprefixer -D

准备建一个 postcss.config.js文件 配置postcss的

module.exports = {
    plugins:[
        require('autoprefixer') // 自动添加css前缀
    ]
}

配置postcss-loader,自动添加css前缀

module:{ //我写一个module
    //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
    rules:[
        {
            // test 表示测试什么文件类型
            test:/\.css$/,
            // 使用 'style-loader','css-loader'
            use:ExtractTextPlugin.extract({
                fallback:'style-loader', // 回滚
                use:[
                    {loader:'css-loader'},
                    {loader:'postcss-loader'} // 利用postcss-loader自动添加css前缀
                ],
                publicPath:'../' //解决css背景图的路径问题
            })
        },
        {
            test:/\.less$/,
            use:ExtractTextPlugin.extract({ //分离less编译后的css文件
                fallback:'style-loader',
                use:['css-loader','less-loader']
            })
        },
        {
            test:/\.(sass|scss)$/,
            use:['style-loader','css-loader','sass-loader']
        }
    ]
},

消除冗余的css代码

下载依赖(添加一个额外的glob扫描路径）

npm i purifycss-webpack purify-css glob -D

在vue.config.js中引入这两个模块

const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');

//配置plugins
plugins:[
    new ExtractTextPlugin('css/index.css'), //都提到dist目录下的css目录中,文件名是index.css里面
    new PurifyCssWebpack({ //消除冗余代码
        // 首先保证找路径不是异步的,所以这里用同步的方法
        // path.join()也是path里面的方法,主要用来合并路径的
        // 'src/*.html' 表示扫描每个html的css
        paths:glob.sync(path.join(__dirname,'src/*.html')) 
    })
]

vue3.0注册插件

// 插件js
export deault {
	install: (app, options) => { // 由原来的Vue变成新的 app 和 options
		// Plugin code goes here
		app.config.globalProperties.$log = name => {
			console.log("==================");
			console.log(name);
			console.log(option);
		};
	}
}

---

ps：大佬们，有好的建议和配置和小老弟说说吧，刚入前端，求大佬带路！