element-ui的按需引入

最新推荐文章于 2025-04-15 09:48:09 发布

前端小白_小小敏

最新推荐文章于 2025-04-15 09:48:09 发布

阅读量835

点赞数 3

文章标签： ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_46037501/article/details/124862147

版权

本文介绍了如何在项目中按需引入element-ui组件，以减少项目体积。首先需要安装babel-plugin-component，修改.babelrc（或babel.config.js）配置，然后在main.js中引入所需的具体组件如Button和Select。当main.js文件较大时，可以将按需加载的组件抽取到单独的element_ui.js文件中进行管理。

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

element-ui按需加载的使用

按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
element-ui官网 https://element.eleme.cn/#/zh-CN/component/quickstart

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

注意 .babelrc即为项目中的babel.config.js是安装babel-plugin-component 生成的文件

代码如下：

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

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

代码如下：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

最后如果main的文件太多可把按需加载的组件抽离出来一个.js文件往下看

在scr下创建一个element_ui.js文件在main.js文件引入这个文件即可使用

element_ui.js文件

import Vue from "vue";
import { Button, Form, FormItem, Input } from "element-ui";
Vue.use(Button);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Input);

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './util/elemsnt_ui';

Vue.config.productionTip = false

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