vue-cli3+vant ui组件的配置和移动端适配

首先，我们先下载vant的插件

cnpm i vant -S

配置vant 自动按需引入组件插件（babel.config.js）【不需要引入样式】

下载插件

cnpm i babel-plugin-import -D

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

使用vant框架

<template>
    <van-nav-bar
        title="xxxxx银行"
        left-text
        right-text
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
</template>

<script>
import { NavBar } from 'vant';//引入插件
export default {
	methods: {
		onClickLeft() {
			Toast('返回');
		},
		onClickRight() {
			Toast('按钮');
		}
	},
	components: {//一定在注册组件的时候有name属性，不然会报错
		[NavBar.name]: NavBar
	}
};
</script>
<style>
</style>

移动端Rem适配

下载插件

cnpm i --save postcss-pxtorem //把px装换成rem
cnpm i --save lib-flexible //设置rem基准值

在postcss .config.js配置

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

注意i

import 'lib-flexible'//必须引在main.ts中，否则自适配不生效