Element UI 按需引入

之前遇到过这个问题，参考了一些别人的博客之后，解决了。记录一下解决过程

环境@vue/cli 4.2.3

vue create 之后生成的文件目录中，又一个 babel.config.js 这个东西，这个就是我们配置的地方之一。

另一个就package.json 我们也要往里面填东西才能按需引入。

先下载一些工具

npm install babel-plugin-component -D
//由于babel编译插件版本问题，需要安装最新的babel编译插件 “@babel/preset-env” ,执行以下安装命令：
npm install @babel/preset-env -D // 

最开始的 babel.config.js是这个样子的

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

然后我们把它改成这样

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env', {
        modules: false
      }
    ]
  ],
  plugins: [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
}

之后就可以在main.js里面添加组件了

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import {   Carousel,CarouselItem, } from 'element-ui';


Vue.config.productionTip = false

Vue.use(Carousel)
Vue.use(CarouselItem)

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