Vue移动端插件Vant使用

一、概述

1、官方网站：https://youzan.github.io/vant/#/zh-CN/home

2、特性

• 60+ 高质量组件
• 90% 单元测试覆盖率
• 完善的中英文文档和示例
• 支持按需引入
• 支持主题定制
• 支持国际化
• 支持 TS
• 支持 SSR

3、浏览器支持

现代浏览器以及 Android 4.0+, iOS 8.0+。

二、使用

1、下载

# 通过 npm 安装
npm i vant -S
npm i babel-plugin-import -D
# 通过 yarn 安装
yarn add vant
yarn add babel-plugin-import

2、局部引用配置

babel.config.js文件（包括原有配置）

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

 

postcss.config.js文件

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

3、局部引用

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

三、定制样式

待定...