vue中引用了vant插件怎么使用rem自适应——postcss/flexible

首先下载vue ：https://github.com/adventurewithme/vue_demo

这个是最初始的空白vue。

安装vant：

# 通过 npm 安装 : npm i vant -S

# 通过 yarn 安装 : yarn add vant

如果需要按需引入，输入命令：

npm i babel-plugin-import -D           

安装完毕之后，在.babelrc文件中修改plugins添加["import",{"libraryName":"vant","style":true}]，修改后文件的plugins如下：

"plugins": ["transform-vue-jsx", "transform-runtime",["import",{"libraryName":"vant","style":true}]],           

Rem 适配

• lib-flexible 用于设置 rem 基准值: npm install lib-flexible --save
• main.js中配置：

import 'lib-flexible';
//或者
import 'lib-flexible/flexible';           

•  确保index.html中的meta  name="viewport";
• 运行命令：

 npm install px2rem-loader --save-dev           

•  打开build/utils.js文件，在exports.cssLoaders方法下添加如下代码：

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUint: 75
    }
  }           

• 然后在utils.js文件的generateLoaders方法里，修改如下代码：

  // 注释掉这一行
      //  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
      // 修改为
      const loaders = [cssLoader, px2remLoader]
      //添加这3行
      if (options.usePostCSS) {
        loaders.push(postcssLoader)
      }           

然后在页面中直接写px就可以，编译的时候会被自动转换为rem。