vue中使用iview UI

iview ui是一个强大的ui库基于vue，有很多实用的基础组件比elementui的组件更丰富，这里介绍如何在vue项目中使用iview开发项目。iview自己有一套后台管理模版iview-admin，可以直接拿到源代码在项目上修改添加功能，自己试过，但是引入vue-router布置如何配置。这里我们讲解的是vue-cli生成的项目引入iview。

步骤：

1 安装iviewui

npm install iview --save

具体的步骤可以iview官方文档

2 在入口文件main.js中引入iviewui

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';Vue.use(VueRouter);
Vue.use(iView);// The routing configuration
const RouterConfig = {routes: Routers
};
const router = new VueRouter(RouterConfig);new Vue({el: '#app',router: router,render: h => h(App)
});

然后就可以在项目中使用组件了，iview的样式基于less，如果要修改主题，就需要使用less，详细见在vue中使用less

vue中使用iview UI相关推荐

vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
vue中使用iview一个数据分成两列渲染（render,竖列，左右不同数据）
我在项目中有一个需求是下面这样的样式开始的思路是使用iview中的table的columns,给表头数据数据使用render渲染不同的数据(如下) {title: '旧版本',key: 'name' ...
vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总地表最强的电脑运行了一下,当 ...
vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...
Vue中修改Mint UI的Toast默认样式问题 - 字体大小调整
1- 给Toast添加className Toast({message: '请输入正确的手机号码',duration: 800,className: 'noticeError' }); 2- 添加样式 ...
VUE 中使用 iview Form组件 enter键防止页面刷新
<Form :label-width="100" inline label-position='left' @keydown.native.enter.prevent =&q ...
html mint ui,vue中Mint UI是什么？
在vue中,Mint UI是饿了么团队开源的一款基于Vue.js的移动端组件库.Mint UI包含丰富的CSS和JS组件,能够满足日常的移动端开发需要:通过它,可以快速构建出风格统一的页面,提升开发效 ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
iView UI库解决基于vue.js解决table中this的指向问题
this指向全局变量data的数据 html <i-table ref="tables" editable searchable search-place="top ...

vue中使用iview UI

步骤：

vue中使用iview UI相关推荐

最新文章

热门文章