在开发项目时,我们可能会用到直接封装好的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);