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