# eladmin-pro

**Repository Path**: org-business/eladmin-pro

## Basic Information

- **Project Name**: eladmin-pro
- **Description**: 基于 element-plus 的前端中台项目。
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-27
- **Last Updated**: 2025-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# eladmin

## 介绍

基于 element-plus 的中后台前端解决方案。

仓库: https://gitee.com/easyadmin-suite/eladmin

GiteePages: https://easyadmin-suite.gitee.io/eladmin/

文档：https://easyadmin-suite.gitee.io/eladmin/docs/

为什么以前开发网站后台很快很轻量，现在开发起来很复杂很耗时？

以前都是基于 jquery 框架 和 jquery-table 等插件，直接用后端渲染数据。

现在都是基于 vue 框架 和 element-plus 等组件，理论上开发效率差不多，但是，为了追求组件化，需要付出额外的时间和精力来二次封装原生的组件，还要解决在此过程遇到的各种疑难杂症，所以开发速度就慢了下来。

所以，抛弃过度追求组件化的心理负担，就用原生框架，就能恢复到以前 jQquery 时代的开发速度了。PC端不怕打包文件大，因为只能element-plus组件只能PC端使用，PC端都是千兆带宽，不在乎这点文件尺寸。


## 特性

- 优良的编码规范：默认使用选项式书写风格，业务逻辑复杂且代码量大的页面才使用组合式书写风格。（个人感觉少量代码的情况下，选项式风格维护起来更清晰便捷）
- 合理的组件规划。本着易于维护的原则，不过度抽离组件。
- 代码可控，可维护。不会因为代码量大了就损失代码品质。


## 安装

```bash
## 创建
npm init vue@latest
cd eladmin
npm install element-plus @element-plus/icons-vue
npm install axios echarts mockjs lodash
npm install tinymce @tinymce/tinymce-vue
# npm install bytemd @bytemd/vue-next @bytemd/plugin-medium-zoom @bytemd/plugin-math @bytemd/plugin-highlight @bytemd/plugin-gfm @bytemd/plugin-frontmatter @bytemd/plugin-breaks
```

## 注意

### vite.config.js

```javascript
import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // 获取当前模式下的环境配置（process.env.NODE_ENV 满足不了需求）
  const env = loadEnv(mode, './');
  
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },

    // 增加 base 选项，用于 Gitee Pages 基础地址，注意末尾要加斜杠
    base: env.VITE_ROUTER_BASE ?? '/',
    build: {
      chunkSizeWarningLimit: 1500,
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          }
        }
      }
    }
  }
})

```

### 致敬

- [element-plus](https://cn.element-plus.org/zh-CN/)
- [Ant Design Pro](https://pro.antdv.com/)
- [Arco Design Pro](http://pro.arco.design/)
- [Vue Element Admin](https://panjiachen.gitee.io/vue-element-admin)
- [AdminLTE](https://adminlte.io/)

### 借鉴

http://element-plus.org/zh-CN/component/button.html
https://v5.bootcss.com/
https://adminlte.io/themes/v3/
https://v5.niuteam.cn/shop/diy/management.html
https://gitee.com/layui-vue/layui-vue-admin