当前位置：首页 > 前端教程

elementui全局

2026-03-06 06:08:18前端教程

全局引入 Element UI

在 Vue 项目中全局引入 Element UI 需要安装依赖并配置 Vue 实例。

安装 Element UI：

npm install element-ui -S

在 main.js 中全局引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

按需引入 Element UI

若需优化体积，可使用 babel-plugin-component 按需引入组件。

安装插件：

npm install babel-plugin-component -D

配置 babel.config.js：

module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

按需引入示例（如引入 Button 和 Select）：

elementui全局

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/select.css';

Vue.use(Button);
Vue.use(Select);

全局配置默认属性

通过 Vue.prototype 设置全局默认属性（如尺寸或语言）：

import Vue from 'vue';
import ElementUI from 'element-ui';
import lang from 'element-ui/lib/locale/lang/en';
import locale from 'element-ui/lib/locale';

locale.use(lang);

Vue.use(ElementUI, { 
  size: 'medium', 
  zIndex: 3000 
});

自定义主题

通过修改 SCSS 变量自定义主题。

安装主题生成工具：

npm install element-theme -g
npm install element-theme-chalk -D

初始化变量文件：

elementui全局

et -i

修改生成的 element-variables.scss 文件后编译：

et

在项目中引入编译后的主题文件：

import '../theme/index.css';

国际化支持

设置语言包以实现国际化：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { locale });

切换语言示例：

import Vue from 'vue';
import ElementUI from 'element-ui';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
import enLocale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { 
  locale: zhLocale // 默认中文
});

// 动态切换为英文
this.$ELEMENT.locale = enLocale;