首页 > web前端 > Vue.js > 正文

vue中iView是什么?

青灯夜游
发布: 2020-11-17 16:35:44
原创
5937 人浏览过

在vue中,iView是一套基于Vue.js的开源UI组件库,主要服务于PC界面的中后台产品。iView提供丰富的组件和功能,可满足绝大部分网站场景;提供开箱即用的Admin系统和高阶组件库,极大程度节省开发成本。

vue中iView是什么?

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式,基于 npm + webpack + babel 开发,支持 ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间,由TalkingData开发维护,有很多知名互联网企业都在使用。

官网地址:https://www.iviewui.com/

iView的特性

  • 丰富的组件和功能,满足绝大部分网站场景

  • 提供开箱即用的 Admin 系统 和 高阶组件库,极大程度节省开发成本

  • 提供专业、优质的一对一技术支持

  • 友好的 API ,自由灵活地使用空间

  • 细致、漂亮的 UI

  • 事无巨细的文档

  • 可自定义主题

iView的安装:

1) 使用npm:

npm install --save iview
登录后复制

2) CDN引入:

<link rel="stylesheet" href="css/iview.css">
<script src="js/iview.min.js"></script>
登录后复制

引入 iView

1) 一般在 webpack 入口页面 main.js 中如下配置:

import Vue from &#39;vue&#39;;
import VueRouter from &#39;vue-router&#39;;
import App from &#39;components/app.vue&#39;; // 路由挂载
import Routers from &#39;./router.js&#39;; // 路由列表
import iView from &#39;iview&#39;; // 导入组件库
import &#39;iview/dist/styles/iview.css&#39;; // 导入样式
Vue.use(VueRouter);
Vue.use(iView);
// 路由配置
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({
    el: &#39;#app&#39;,
    router: router,
    render: h => h(App)
});
登录后复制

2) 按需引用

在webpack中按需使用组件,可以减少文件体积:

import Input from &#39;iview/src/components/input&#39;;
登录后复制

注意:

① 按需引用仍需要导入样式,即在 main.js 或根组件执行 import 'iview/dist/styles/iview.css';

② 按需引用是直接引用的组件库源代码,需要借助 babel 进行编译,以 webpack 为例:

module: {
    	rules: [
        	{ test: /iview.src.*?js$/, loader: &#39;babel&#39; },
        	{ test: /\.js$/, loader: &#39;babel&#39;, exclude: /node_modules/ }
    	]
}
登录后复制

组件使用规范

使用:prop传递数据格式为数字、布尔值或函数时,必须带:(即,使用v-bind),它的值会被当做JavaScript表达式计算,否则会被当做字符串。

正确的使用方法:

<Page :current="1" :total="10"></Page>
登录后复制

错误的使用方法:

<Page current="1" total="10"></Page>
登录后复制

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程视频课程!!

以上是vue中iView是什么?的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
vue
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板