vue-cli3.xxx — element组件—全部引入及按需引入（解决按需引入导致的错误）

在vue-cli3.xxx中引入Element组件：

1、首先安装 element-ui

npm install element-ui -S   ( -S 等于 --save )

2、引入element-ui ，及配置

import Vue from 'vue'
//引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

在vue-cli3.xxx中如何按需引入组件：

目的：减少项目体积（ 注意：样式还需要单独引入！！！ ）

1、首先安装 element-ui

npm install element-ui -S  

2、安装 babel-plugin-component 

npm install babel-plugin-component -D （ -D 等于 --save-dev ）

3、创建   .babelrc  文件 ，配置以下参数：

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

 今天是2020年10.30，如果你还按照官方文档中的按钮引入配置.babelrc,运行项目时会报错：

解决方法如下：

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

4、在 main.js 中，引入某组件即可：

//main.js

import Vue from 'vue';
import 'element-ui/lib/theme-chalk/index.css';

// 比如：引入button、from表单组件
import {Button,Form, ··· ···} from 'element-ui'
Vue.use(Button) 
Vue.use(Form)

new Vue({
    el:"#app",
    render:h=>(App)
})