0%

view-design 应用

Posted on In

按需加载

Iview 升级版 view-design 有个小坑，按需加载不能和全部引入同时使用，否则就会报错。

1
2
3
4
5
6
7
// .babelrc
"plugins": [
    ["import", {
        "libraryName": "view-design",
        "libraryDirectory": "src/components"
    }]
]
1
2
3
4

// main.js
import ViewUI from 'view-design'
Vue.use(ViewUI)

这样是会报错的, 在 .babelrc 中配置了 babel-plugin-import 的话，就不能用 Vue.use(ViewUI) 这种形式应用view-design

1
2
3
4
5
6
7
8
VM2192 main.074a871cf0b56b5ee113.js:43171 Uncaught ReferenceError: ViewUI is not defined
    at Module../src/main.js (VM2192 main.074a871cf0b56b5ee113.js:43171)
    at __webpack_require__ (VM2192 main.074a871cf0b56b5ee113.js:770)
    at fn (VM2192 main.074a871cf0b56b5ee113.js:130)
    at Object.0 (VM2192 main.074a871cf0b56b5ee113.js:43290)
    at __webpack_require__ (VM2192 main.074a871cf0b56b5ee113.js:770)
    at VM2192 main.074a871cf0b56b5ee113.js:908
    at VM2192 main.074a871cf0b56b5ee113.js:911

如果要按需载入的话，需要单独提出view-design中的组件

1
2
3
4
5
6
7
8
9
// main.js
import { Button, Icon, Row, Col, Card } from 'view-design'
import 'view-design/dist/styles/iview.css'

Vue.component('Button', Button);
Vue.component('Icon', Icon);
Vue.component('Row', Row);
Vue.component('Col', Col);
Vue.component('Card', Card);