yarn add lib-flexible postcss-px2rem -S
然后删除public/index.html
里的
<meta name="viewport" content="width=device-width,initial-scale=1.0">
然后在mian.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "lib-flexible"; // 新增
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
新建或在原有vue.config.js
基础上添加配置
const px2rem = require("postcss-px2rem"); // 新增
module.exports = {
css: {
// 新增 - start
loaderOptions: {
postcss: {
plugins: [
px2rem({
// 设计稿宽度 / 10
// eg: 750 => 75, 375 => 37.5
remUnit: 75
})
]
}
}
// 结束 - end
}
}
完结撒花 接着就根据UI小姐姐的设计稿开发啦(用px)