首先，我们先使用vue-cli创建一个初始化的vue项目。
vue create hello-world
当项目创建好以后，我们在根目录下新建一个vue.config.js，想必大家也都懂这个文件是干什么的。
既然是使用postcss-pxtorem对移动端项目进行适配，那肯定先要安装它，于是我们在电脑上敲下这行命令
npm install postcss-pxtorem -D
postcss-pxtorem有一个好伙伴amfe-flexible，也需要一并安装。
npm install amfe-flexible -D
当我们安装好这两个依赖以后呢，我们就要使用它们了，先在main.js中引入amfe-flexible
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入amfe-flexible
import 'amfe-flexible/index'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
然后我们在vue.config.js文件中对postcss-pxtorem进行配置。
const autoprefixer = require('autoprefixer') // 这个依赖不用安装
const pxtorem = require('postcss-pxtorem')
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtorem({
rootValue: 37.5, // 根字体大小，如果设计图是750的话 记得除2
unitPrecision: 5,
propList: ['*'], // 作用在哪些属性上 我这里用的是通配符
selectorBlackList: ['vant-'], // 将哪些html元素排除在外，我这里添加了一个vant的
replace: true,
mediaQuery: false,
minPixelValue: 0,
exclude: /node_modules/i
})
]
}
}
}
}
原文链接：https://blog.csdn.net/g1197410313/article/details/107727431
