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

YanzYan

已于 2022-06-13 14:25:58 修改

阅读量3k

点赞数

分类专栏：干了这碗前端酒文章标签： vue3 element-plus babel

于 2022-03-21 14:28:11 首次发布

本文链接：https://blog.csdn.net/yanzyan/article/details/123634849

版权

干了这碗前端酒专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了在2022年6月13日更新的情况，作者发现使用babel-plugin-import按需引入Element-Plus存在一些问题。作者推荐遵循Element-Plus官方的快速启动指南进行按需导入。主要步骤包括安装插件，配置babel.config.js，并在main.js中导入所需组件。这种方法避免了不必要的资源加载，提高了应用性能。

摘要由CSDN通过智能技术生成

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

2022年6月13日更新

用babel-plugin-import按需引入element-plus会有问题，用官方推荐的方式真香了！以下是链接：https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5

如果链接打不开，请大家自行前往element-plus官方网站，寻找到指南->快速开始菜单。
在这里插入图片描述

2022年3月21日（下文有问题，请忽略，如果有解决方案，希望能评论交流下大神是怎么解决的）

项目目前使用的版本

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

安装babel的插件：

npm install babel-plugin-import -D

配置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']
}

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)
}