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文档,读书百遍其义自见。希望大家都能举一反三,融会贯通。