1. 程式人生 > >按需載入iviei元件時,引入vue專案報iview is not defined解決辦法(使用vue-vli + iview)

按需載入iviei元件時,引入vue專案報iview is not defined解決辦法(使用vue-vli + iview)

解決方法
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>

最終效果

在這裡插入圖片描述
參考文件:《iview 按需引入vue專案中》