vue项目中element-ui全局引入&按需引入&按需引入报错解决

elementUI中文网址：
https://element.eleme.cn/#/zh-CN/component/layout

全局引入

1.安装element-ui

cnpm install element-ui --save 

2.main.js引入elementUI

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.App.vue删掉原始内容，添加如下内容：


4.浏览器查看效果
出现一个Button按钮，点击按钮，会有弹出框。成功。

按需引入

1.安装babel组件

cnpm install babel-plugin-component -D

2.新建文件并粘贴如下内容进去

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

2.mian.js修改引入

之前全局引入的部分内容注释掉

// import ElementUI from 'element-ui'
// Vue.use(ElementUI)

import {Button, Dialog, Row, Col} from 'element-ui'
Vue.component(Button.name, Button)
Vue.component(Dialog.name, Dialog)

3.如果报错 Exit status 1
解决：创建. babelrc文件命名 点和名字中间有个空格

4.如果还报错，修改. babelrc文件
注意：如果大括号报错，换成中括号。

5.效果：可以正常使用之前定义的内容。