vue移动端组件库Vant

大家熟知适用于Vue的组件库很多
在做移动端的Vue项目中适用Mint-UI,Mui,Vant这三个，但在我做项目中这三个组件都用过，前两个坑很多（Mint-UI,Mui），在引入相关组件之后，会出现路由无法配置，图标无法更改等一系列问题，

强烈推荐使用Vant！！！！！

Vant官网有详细安装说明
https://youzan.github.io/vant/#/zh-CN/quickstart

自己总结的安装步骤：

• 1.npm i vant --save

• 2.npm i babel-plugin-import -D

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
自动按需引入组件 (推荐)

• 3.在.babelrc 中添加配置npm i babel-plugin-import -D

> // 在.babelrc 中添加配置 // 注意：webpack 1 无需设置 libraryDirectory {  
> "plugins": [
>     ["import", {
>       "libraryName": "vant",
>       "libraryDirectory": "es",
>       "style": true
>     }]   ] }
> 
> // 对于使用 babel7 的用户，可以在 babel.config.js 中配置 module.exports = {  
> plugins: [
>     ['import', {
>       libraryName: 'vant',
>       libraryDirectory: 'es',
>       style: true
>     }, 'vant']   ] };

// 接着你可以在代码中直接引入 Vant 组件

• 4.import { Button } from ‘vant’;

很简单四步就完成组件使用啦，方便简洁，无坑！

需要注意的一点：

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为
• rem lib-flexible 用于设置 rem 基准值