跟着写一个vue项目(1)初始化并且进行Rem适配

这是一个vue3的移动端项目

我们首先要创建

通过vue-cli初始化项目，并且选上vue-router,less

接下来，我们需要关闭eslint校验。

在vue.config.js 中添加  --- lintOnSave:false  关闭校验

并且安装好vue-router

....

通过两个插件进行rem适配

npm install amfe-flexible --save

npm install postcss-pxtorem --save

作用：将像素单位生成rem单位

同时需要在vue.config.js中进行配置

		module.exports = {
		    //...其他配置
		    css: {
		        loaderOptions: {
		            postcss: {
		                plugins: [
		                    require('postcss-pxtorem')({
		                        rootValue: 37.5,
		                        propList: ['*']
		                    })
		                ]
		            },
                    sass: {
                        // 配置scss文件全局变量,没有分号会报错
                        data: `@import "@ui/common.scss";` // 旧版sass-loader写法(8.0以下)
                        // prependData: `@import "@ui/common.scss";` // 新版scss-loader(8.0及以上)
                    }
		        }
		    },
		}

如果以上代码出错的话，并且爆出

Syntax Error: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }

的错误，我们需要添加一个组件，将代码变为

loaderOptions: {
        postcss: {
          postcssOptions:{
            plugins: [
              //
              require('postcss-pxtorem')({//这里是配置项，详见官方文档
                rootValue: 100, // 换算的基数
                selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                propList: ['*'],
              }),
            ]
          }
        }
    }

即可将  px  变为  rem

在assets中写一个css文件，去掉body的边框，并且引入到main.js中

body{
    padding: 0;
    margin: 0;
}
import  './assets/reset.css'

在main.js引入amfe-flexible实现自适应

import 'amfe-flexible'  ---》此时，div会随着屏幕的拉扯而改变大小

 require('postcss-pxtorem')({  rootValue: 16, propList: ['*']

rootValue ---是自己写的XXpx  XXX/rootValue  =  手机屏幕上的rem