vuecli30-移动端px转rem以及vuecli30搭建等

29次阅读

共计 771 个字符,预计需要花费 2 分钟才能阅读完成。

网上说的较多的是 postcss-pxtorem 和 postcss-px2rem
这里我采用了 postcss-pxtorem,我是用的 yarn 安装, 速度还是比较快的,以前用 npm 有时候要等很久。
1、安装依赖包

yarn add lib-flexible
yarn add postcss-pxtorem

2、引入 lib-flexible

import "lib-flexible/flexible.js"

3、配置 postcss-pxtorem

vue-cli3 项目 postcss-pxtorem 的配置放在 vue.config.js 中(新构建的项目可能会找不到,需要手动在项目根目录创建 vue.config.js)module.exports = {
 css: {
     loaderOptions: {
          postcss: {
            plugins: [
                 // 把 px 单位换算成 rem 单位
              require("postcss-pxtorem")({rootValue: 75, // 换算的基数 ( 设计图 750 的根字体为 32)
                    selectorBlackList: [".van"],// 要忽略的选择器并保留为 px。propList: ["*"], // 可以从 px 更改为 rem 的属性。minPixelValue: 2 // 设置要替换的最小像素值。})
            ]
          }
     }
}

}
4、创建 vue.config.js

 在项目根目录下新建 vue.config.js 文件与 package.json 同级
请参考 https://blog.csdn.net/u014440483/article/details/87267160(我是看这篇文章的)

5、vue-cli3.0 环境搭建 (找了一篇文章,和我之前看着搭建的差不多,只是我用的是 yarn,最后的 npm run serve 改为 yarn serve 就好了)
https://blog.csdn.net/qq_4185…

正文完
 0