在vue中,iview是一套基于vue.js的开源ui组件库,主要服务于pc界面的中后台产品。iview提供丰富的组件和功能,可满足绝大部分网站场景;提供开箱即用的admin系统和高阶组件库,极大程度节省开发成本。
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 '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);// 路由配置const routerconfig = { routes: routers};const router = new vuerouter(routerconfig);new vue({ el: '#app', router: router, render: h => h(app)});
2) 按需引用
在webpack中按需使用组件,可以减少文件体积:
import input from 'iview/src/components/input';
注意:
① 按需引用仍需要导入样式,即在 main.js 或根组件执行 import 'iview/dist/styles/iview.css';
② 按需引用是直接引用的组件库源代码,需要借助 babel 进行编译,以 webpack 为例:
module: { rules: [ { test: /iview.src.*?js$/, loader: 'babel' }, { test: /\.js$/, loader: 'babel', 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是什么?的详细内容。
