100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 三种常用的UI库的安装使用:iview element与vant

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

时间:2022-02-19 03:38:26

相关推荐

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

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

iview

View UI,即原先的iView,是一套基于 Vue.js 的开源 UI 组件库,主要服务于PC 界面的中后台产品。官网是/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进入:

/#/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);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。