按需載入iviei元件時,引入vue專案報iview is not defined解決辦法(使用vue-vli + iview)
阿新 • • 發佈:2018-11-21
解決方法
npm 下載(我使用了淘寶映象):
cnpm install iview --save
cnpm install babel-plugin-import --save-dev
.babelrc檔案
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime",["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] } } }
main.js檔案
import { Button, Table } from 'iview'
import 'iview/dist/styles/iview.css'
Vue.component('Button', Button)
Vue.component('Table', Table)
App.vue檔案
<Button type="primary">Primary</Button>
最終效果