当前位置: 代码迷 >> 综合 >> 三种常用的UI库的安装使用:iview,element与vant
  详细解决方案

三种常用的UI库的安装使用:iview,element与vant

热度:83   发布时间:2023-11-20 21:51:59.0

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

  相关解决方案