vue中element-ui的按需引入（vuex）

由于element-ui的组件太多，vue的插件又不好寻找，所以采取按需引入，但按需引入时坑很多。。。

下面介绍成功的方式和遇到的坑，下面会以引入弹框插件（MessageBox）为例

1、按照官方文档下载安装 babel-plugin-component与element-ui

npm install babel-plugin-component element-ui  -D --save

2、配置 .babelrc 文件，该文件位于项目外层（该配置是大坑）

官方文档的方法是将该文件配置为（注意可能会报错，需下载babel-preset-es2015）

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

如果仍报错（原文档的“presents"不动）即如下配置（亲测可行！）

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    [
      "component",
      {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3、终于到了按需引入（官方文档没用了。。。）直接书写正确模式，错误的会有备注

（1）、全局进入，在各个组件中使用，在main.js中配置

import { MessageBox } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //可以不再引入，因为.babelr文件已配置

  Vue.component(MessageBox);//不能使用Vue.use(MessageBox),因为初始化会自动弹出
  Vue.prototype.$msgbox = MessageBox;//方法都要定义，否则会报错
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
//使用时只需要在组件的方法中使用this.$alert()的方式调用即可。

（2）、使用vuex时，再store.js中配置

import { MessageBox } from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'

  let $msgbox = MessageBox;//方法都需要定义后使用
  let $alert = MessageBox.alert;
  let $confirm = MessageBox.confirm;
  let $prompt = MessageBox.prompt;
//直接$alert()的方式使用即可（注意不是this.$alert()）,组件中使用仍需要再main.js配置

需要其他组件，可以根据需要调用和定义按照文档中的名字引入即可

终于完了，撒花。。。

vue中element-ui的按需引入（vuex）

猜你喜欢