Vue_Cli4.x使用px2rem + vant搭建移动端项目

2020-09-02 16:47:55 浏览数 (1)

第一步 安装px转rem的插件

代码语言：javascript复制
npm i lib-flexible postcss-px2rem --s

在根目录添加postcss.config.js文件

代码语言：javascript复制
module.exports = {
 plugins: {
   autoprefixer: {},
   "postcss-px2rem": {
     remUnit: 75, // 设计图为750 * height
     remPrecision: 2 // rem的小数点后位数
   }
 }
};

在main.js添加

代码语言：javascript复制
import 'lib-flexible/flexible'

px2rem插件安装完成

第二步 安装vant

代码语言：javascript复制
npm i vant -S //安装vant
npm i babel-plugin-import -D //按需引入

修改 babel.config. js文件

代码语言：javascript复制
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  // 新增的部分
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true
      },
      "vant"
    ]
  ]
};

在main.js添加

代码语言：javascript复制
import { Button } from "vant";
Vue.use(Button);

注意! 这里有个坑，px2rem会把第三方库也跟着转成了rem 卸载之前的postcss-px2rem

代码语言：javascript复制
npm uninstall postcss-px2rem --save-dev

安装postcss-px2rem-exclude

代码语言：javascript复制
npm install postcss-px2rem-exclude --save

将之前新建的postcss.config.js重新替换掉

代码语言：javascript复制
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      remPrecision: 2,
      exclude: /node_modules|folder_name/i
    }
  }
};

END

网站 http 单片机 postcss css

0 人点赞