[JavaScript知识库]vue3使用babel-plugin-import按需引入element-plus

vue3使用babel-plugin-import按需引入element-plus

项目目前使用的版本

"element-plus": "^2.1.4",
"vue": "^3.0.0",

1. 安装babel的插件：

npm install babel-plugin-import -D

2. 配置babel.config.js

   module.exports = {
     plugins: [
       [
         'import',
         {
           libraryName: 'element-plus',
           customStyleName: (name) => {
             return `element-plus/theme-chalk/${name}.css`
           },
           // 导入的名字去除el-
           customName: (name) => {
             return `element-plus/lib/components/${name.slice(3)}`
           }
         }
       ]
     ],
     presets: ['@vue/cli-plugin-babel/preset']
   }
   

3. main.js

   // 导入基础样式
   import 'element-plus/theme-chalk/base.css'
   import {
     ElButton,
     ElTable,
     ElAlert,
     ElAside,
     ElAutocomplete,
     ElAvatar,
     ElBacktop,
     ElBadge,
   } from 'element-plus'
   
   const app = createApp(App)
   
   const components = [
     ElButton,
     ElTable,
     ElAlert,
     ElAside,
     ElAutocomplete,
     ElAvatar,
     ElBacktop,
     ElBadge
   ]
   
   for (const cpn of components) {
     app.component(cpn.name, cpn)
   }