合格前端之打造一个属于自己的 UI 库

摘要: 轮子总得造上一造~

一、项目介绍

vui : 一个私人的vue ui 组件库（移动端为主）

文档官网：https://brickies.github.io/vui/

已有组件

swiper

scroller

search

message

modal

table

picker

select

dropdown

二、安装下载

三、快速开始

3.1 构建项目（配合vue-cli）

3.2 引入vui组件库

你可以引入整个 vui，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 vui。

3.2.1 完整引入

在main.js中写入

3.2.2 按需部分引入

在main.js中写入（假如我只需要Scroller和Select组件）

3.2.3 全局注册vui插件

注：完整引入了vui，则无需再注册插件

四、组件用法

4.1 swiper

可以自己调配自己想要的swiper，不一定得是轮播图

4.1.1 Attributes

4.1.2 Events

4.1.3 用法

4.2 scroller（下拉刷新上拉加载）

4.2.1 Attributes

4.2.2 用法

4.3 search

4.3.1 Attributes

4.3.2 Events

4.3.3 用法

只有搜索框

拥有默认的搜索结果列表

定制化结果列表，关键字高亮匹配

4.4 dialog

4.4.1 Attributes

message

modal

4.4.2 用法

msg

modal(插件)

modal(组件)

4.5 table

4.5.1 Attributes

4.5.2 用法

配合scroller进行展示（注：目前table较为简单，后期将进行完善，使得其可以应对不同场景）

4.6 picker

4.6.1 Attributes

4.6.2 用法

4.7 select

4.7.1 Attributes

4.7.2 Events

4.7.3 用法

4.8 dropdown

这个下拉菜单偏PC端的这里就不多做介绍了

以上组件便是目前vui所有的组件了，后期会不断的进行维护并进行新组件的开发。

vui github传送门：https://github.com/Brickies/vui

vui npm传送门：https://www.npmjs.com/package/x-vui