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

明知山

发布于 2020-09-02 16:47:55

1.2K0

发布于 2020-09-02 16:47:55

第一步安装px转rem的插件

npm i lib-flexible postcss-px2rem --s

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

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

在main.js添加

import 'lib-flexible/flexible'

px2rem插件安装完成

第二步安装vant

npm i vant -S //安装vant
npm i babel-plugin-import -D //按需引入

修改 babel.config. js文件

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

在main.js添加

import { Button } from "vant";
Vue.use(Button);

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

npm uninstall postcss-px2rem --save-dev

安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

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

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      remPrecision: 2,
      exclude: /node_modules|folder_name/i
    }
  }
};

END

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-04-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

网站