vant组件库引入及移动端适配

vue2版本

npm 安装- - -npm i vant@latest-v2 -S

- 按需引入组件

• babel.config.js 中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

• main.js 注册

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

rem适配

一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

1、安装

# yarn add amfe-flexible
npm i amfe-flexible
# i 是install的简写

2、然后在 main.js 中加载执行该模块

import 'amfe-flexible'

二、使用 postcss-pxtorem 将 px 转为 rem

1、安装

# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
# 版本要是@5.1.1
npm install postcss-pxtorem@5.1.1 -D

2、然后在项目根目录中创建 .postcssrc.js 文件 （这个配置文件详解看下一小节）

module.exports = {
  plugins: {
  //  'autoprefixer': {
  //    browsers: ['Android >= 4.0', 'iOS >= 8']
   // },
    'postcss-pxtorem': {
       rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75
            },
      propList: ['*']
    }
  }
}
​

3、配置完毕，重新启动服务