vue3 - element-ui

最新推荐文章于 2025-04-23 16:00:18 发布

一本正经的柠檬

最新推荐文章于 2025-04-23 16:00:18 发布

阅读量626

点赞数

分类专栏： Vue3 文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/weixin_44292241/article/details/122663504

版权

本文介绍了如何在Vue3项目中实现Element-UI的按需引入，包括修改babel.config.js文件，以及在main.js和plugins文件夹中的配置步骤，使得项目仅加载使用到的组件，提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、element-ui 按需引入

npm i element-ui -S
npm install babel-plugin-component -D

1. 修改babel.config.js文件：

module.exports = {
// 源代码
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
// 添加代码项
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

2. 在main.js文件引入想要使用的组件：

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import { Message, MessageBox } from 'element-ui'

    Vue.config.productionTip = false
    Vue.prototype.$message = Message
    Vue.prototype.$MessageBox =