vue项目引用 iView 组件——全局安装与按需加载

 

 

框架的热度,出现了很多基于Vue的UI组件库,此次项目用到了 iView 这个组件库。使用方法官网很详细。css

官网:https://www.iviewui.com/html

这篇文章主要是记录一下npm 全局安装以及按需引用的用法。vue

1、全局引用webpack

①、先安装iview          npm install iview -save
       Tips:你可能注意npm install 的时候,有时候会加--save,有时又是--save-dev,那他们该什么状况下区分使用呢。发现一篇比较不错的文章https://www.limitcode.com/detail/59a15b1a69e95702e0780249.htmlweb

②、在 webpack 入口页面 main.js 中以下配置npm

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);
 ③、在组件里面直接调用   如:<Button>Default</Button>babel

2、按需引用(前提是按照全局引用的步骤①②安装了须要的组件)框架

借助插件 babel-plugin-import能够实现按需加载组件,减小文件体积。iview

①、先安装 babel-plugin-import          npm install babel-plugin-import --save-devui

②、在文件 .babelrc 中添加配置

"plugins": [
"transform-vue-jsx", "transform-runtime",
["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]
]

 

本觉得万事大吉,能够开始用了,可是报错了!!!!!

 

别慌~~~~~~查阅一些资料以后了解到,添加按需加载的插件以后就不能够用下面的方式引入iview。main.js只需配置css

import Vue from 'vue'
// import iView from 'iview'
import 'iview/dist/styles/iview.css'

// Vue.use(iView);

 

③、按需引用能够在全局注册组件也能够在调用的页面注册

aaa~组件中调用方法

<template>
    <Button type="success">Success</Button>
</template>
<script>
import { Button } from 'iview'    //用到什么组件引入什么组件
export default {
    components:{
        Button
    }
}
</script>

 

bbb~全局注册须要用的组件

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);

 

下面就来验证一下结果, 打包后的vender.js确实变化比较大。

 

相关文章
相关标签/搜索