三种常用的UI库的安装使用：iview，element与vant

在开发项目时，我们可能会用到直接封装好的UI库，用UI库的好处是可以快速的实现某些需求，更重要的是样式效果也很美观，像我们开发PC端项目用得较多的UI框架就是iview和element，而开发移动端用得较多的就是vant，今天我们来学习一下这三个ui库的安装使用吧。

iview

View UI，即原先的iView，是一套基于 Vue.js 的开源 UI 组件库,主要服务于PC 界面的中后台产品。官网是https://www.iviewui.com/docs/introduce

安装iview

npm install iview -S

main.js里引入

import iview from ‘iview’;
import ‘iview/dist/styles/iview.css’;
Vue.use(iview);

element-ui

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，这套ui库可以在vue项目，react项目或者angular项目中均可使用，但是在不同的框架下使用稍有差别。

vue项目中使用element-ui进入:
https://element.eleme.cn/#/zh-CN/component/installation

react项目中使用element-ui进入:
https://elemefe.github.io/element-react/#/zh-CN/quick-start

angular项目中使用element-ui进入:
https://element-angular.faas.ele.me/guide/install

上面三个网站对分别针对在Vue项目 React项目 Angular项目里使用element都有详细的介绍，方法大同小异，不同的是输入命令等略有差别。

在vue项目中安装element-ui

输入命令
npm i element-ui -S

然后在main.js里完整引入

import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);

当然也可以按需引入,按需引入请看官网

vant

Vant是移动端的vue组件库，做移动端项目要用UI框架就用vant，官网是https://youzan.github.io/vant/#/zh-CN/quickstart

vant的安装

终端输入命令
npm i vant -S

main.js里完全引入

import Vant from ‘vant’;
import ‘vant/lib/index.css’;
Vue.use(Vant);