UI库的安装、导入及简单使用

UI库简介

我们使用vue的时候，如果你对UI库足够熟悉并且能够熟练应用的话，你就能大大减少代码量和思考成本，用最短的时间获得更好的功能和效果。
那我们就直奔主题
我们常用的UI库主要有以下四种，分PC和移动端各两种：
PC端项目：
1、iview
2、element-ui
移动端项目：
1、vant
2、mint-ui
今天我以vant为例，讲一下怎么安装导入和使用UI库。

安装

前提，安装了nodeJs --> 已经创建了vue项目
在vue项目终端输入：
cnpm / npm i vant -S
一键安装

引入

方式一 自动按需引入组件 (推荐)
方式二 手动按需引入组件
方式三 导入所有组件
方式四 通过 CDN 引入

我们只讲推荐的自动按需引入
这个时候，我们要说到babel-plugin-import, 这是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式，
所以
在vue项目终端输入：
cnpm / npm i babel-plugin-import -D
安装完毕，接下来在.babelrc 中添加配置

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

对于使用 babel7 的用户，可以在 babel.config.js 中配置

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

在配置文件中，新增plugins选项，而不是全部替换
一定不要忘记配置babel哦！

简单应用（轮播图）

三连引入模块：

import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'
Vue.use(Swipe).use(SwipeItem) 

直接简单使用：

<van-swipe :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

配合懒加载使用：

<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>

export default {
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    }
  }
}

其余功能选项可以参考api中自行添加：

最后不要忘记自行调整style，这个不能一键完成。

结语

vant的安装导入和使用其实还是比较简单的，所有的UI库都是大同小异的，而且vue和react都通用，还有疑问，也可以多读几遍api文档，读书百遍其义自见。希望大家都能举一反三，融会贯通。