Vue的iView框架使用Cdn链接或npm的引入的使用方式

iView 是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。

 

1、iView的特性

 

1) 高质量、功能丰富

 

2) 友好的API ，自由灵活地使用空间

 

3) 细致、漂亮的 UI

 

4) 事无巨细的文档

 

5) 可自定义主题

 

 

 

2、iView的安装：

 

1) 使用npm：

 

npm install --save iview

 

2) CDN引入：

<link rel="stylesheet" href="css/iview.css">
<script src="js/iview.min.js"></script>

 

 

3、引入 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/ }
    ]
}

 

3、组件使用规范

 

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

 

正确的使用方法：

<Page :current="1" :total="10"></Page>

错误的使用方法：

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