使用vue-cli创建vant移动端项目

D:\temp>npm install -g @vue/cli

D:\temp>vue create vantapp

D:\temp>cd vantapp

D:\temp>npm i vant -S

D:\temp>npm i babel-plugin-import -D

D:\temp>npm install postcss-pxtorem --save-dev

D:\temp>npm i -S amfe-flexible

D:\temp>npm i postcss-pxtorem@5.1.1

D:\temp>npm run serve

修改babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

新增postcss.config.js文件（和package.json同级）

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

在src\main.js中新增

import 'amfe-flexible/index.js'
import { Form } from 'vant';
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Form);

在src\App.vue中新增

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

最后观察页面，按钮样式是否已经由px转成rem。