babel-plugin-component如何配置按需引入

babel-plugin-component

npm install babel-plugin-component -D

安装之后在项目根目录下创建.babelrc最新版本的脚手架可能改为babel.config.js

//babel.config.js
module.exports = {
    
    
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['component', {
    
    
      libraryName: 'element-ui',   //插件的名字
      style: true,
      styleLibraryName: 'theme-chalk'   //css样式存放目录
    }, 'element-ui']
  ]
}

插件会帮我们自动解析注册组件和对应的样式
这样我们可以直接在项目中这样引入组件,新建一个文件夹element，下创建index.js

import Vue from 'vue'
import {
    
    
  Button
} from 'element-ui'

Vue.use(Button)