按需加载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项目中》

猜你喜欢

转载自blog.csdn.net/zst_422/article/details/83511559
今日推荐