在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:

npminstall--saveiview

2) CDN引入:

<linkrel="stylesheet"href="css/iview.css"><scriptsrc="js/iview.min.js"></script>

引入 iView

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

importVuefrom'vue';importVueRouterfrom'vue-router';importAppfrom'components/app.vue';//路由挂载importRoutersfrom'./router.js';//路由列表importiViewfrom'iview';//导入组件库import'iview/dist/styles/iview.css';//导入样式Vue.use(VueRouter);Vue.use(iView);//路由配置constRouterConfig={routes:Routers};constrouter=newVueRouter(RouterConfig);newVue({el:'#app',router:router,render:h=>h(App)});

2) 按需引用

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

importInputfrom'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>

错误的使用方法:

<Pagecurrent="1"total="10"></Page>