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

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