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

egg elementui

2026-01-15 19:57:01前端教程

以下是关于 Egg 和 Element UI 结合使用的相关信息整理：

安装 Element UI

在基于 Egg 的前端项目中（通常为 Vue 或 React），通过 npm 或 yarn 安装 Element UI：

npm install element-ui --save
# 或
yarn add element-ui

引入 Element UI

对于 Vue 项目，在 main.js 或入口文件中全局引入：

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

Vue.use(ElementUI);

按需引入（推荐）

通过 babel-plugin-component 实现按需加载以减少体积：

npm install babel-plugin-component -D

配置 babel.config.js：

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

按需引入组件示例：

import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

与 Egg 后端交互

在 Egg 中配置 API 接口供前端调用：

// app/controller/api.js
exports.list = async ctx => {
  const data = await ctx.service.xxx.fetchData();
  ctx.body = { success: true, data };
};

主题定制

通过修改主题变量文件或使用在线主题生成工具：

创建 element-variables.scss 文件
修改变量如 $--color-primary: #409EFF;
在项目中引入该文件替代默认 CSS

常见问题解决

跨域问题需在 Egg 中配置：

// config/plugin.js
exports.cors = {
  enable: true,
  package: 'egg-cors'
};
// config/config.default.js
exports.cors = {
  origin: '*',
  allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
};