iview + webpack 的按需引入写个小Demo

7 篇文章 1 订阅

iview + webpack 的按需引入

先看官网的配置:
https://www.iviewui.com/docs/guide/start#AXYY

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}
然后这样按需引入组件,就可以减小体积了:

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);
特别提醒 #
按需引用仍然需要导入样式,即在 main.js 或根组件执行 import 'iview/dist/styles/iview.css';

会发现首先出现的是.webpack 解析就出错了:
这里写图片描述
解决办法:
webpack配置:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins加入
new VueLoaderPlugin(),

这样就解决这个问题了

但接着还会出现另一个问题::Cannot read property xx of undefined”
这里写图片描述
也可能是size等没定义,根据自己引入组件来决定

这个是因为$IVIEW 没定义所以在入口文件加入

Vue.prototype.$IVIEW = {};

就解决这个问题了
详细代码
github地址:https://github.com/zshsats/demand

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值