vue 配置移动单位转换插件

vue 配置移动单位转换插件

• 首先安装(`自己创建一个vue项目,这儿就直接跳过了`)
• 在项目入口文件main.js 中引入`amfe-flexible`
• 在根目录的index.html 的头部加入手机端适配的meta代码(`有的话就不用加了`)
• 在vue.config.js 中的 css.loaderOptions.postcss 配置 `postcss-loader`
• 在vue文件中使用:
• 效果展示
• 参考链接:

首先安装(自己创建一个vue项目,这儿就直接跳过了)

npm i  amfe-flexible -S
npm i postcss-pxtorem -S

在项目入口文件main.js 中引入amfe-flexible

import 'amfe-flexible';

在根目录的index.html 的头部加入手机端适配的meta代码(有的话就不用加了)

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

在vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader

//引入:
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
	css:{
		// 是否使用css分离插件 ExtractTextPlugin
		extract: true,
		// 开启 CSS source maps?
		sourceMap: false,
		// 启用 CSS modules for all css / pre-processor files.
		requireModuleExtension: true,
		// css预设器配置项
		loaderOptions: {
			postcss: {
				plugins: [
					autoprefixer({
						overrideBrowserslist: [
							"Android 4.1",
							"iOS 7.1",
							"Chrome > 31",
							"ff > 31",
							"ie >= 8"
						]
					}),
					pxtorem({
						rootValue: 37.5,// 配置视窗口尺寸
						propList: ['*']
					})
				]
			}
		}
	}
}

在vue文件中使用:

//app.vue
<template>
	<div id="app"></div>
</template>
<style>
	#app{
		width: 750px;
		height: 200px;
		background-color: red;
	}
</style>

效果展示

如图:红色区域已经转换成功

参考链接:

amfe-flexible
postcss-pxtorem

标签：插件,vue,amfe,css,flexible,移动,postcss,pxtorem
来源： https://blog.csdn.net/weixin_41977619/article/details/106498780