{"id":15732142,"url":"https://github.com/hiisea/elux-react-antd-admin","last_synced_at":"2025-04-15T21:34:39.104Z","repository":{"id":38316149,"uuid":"506514467","full_name":"hiisea/elux-react-antd-admin","owner":"hiisea","description":"基于Elux+React+Antd的通用后台管理系统","archived":false,"fork":false,"pushed_at":"2022-11-05T06:00:27.000Z","size":5100,"stargazers_count":92,"open_issues_count":0,"forks_count":21,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T01:34:32.938Z","etag":null,"topics":["admin","antd","elux","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hiisea.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-23T05:56:25.000Z","updated_at":"2024-06-25T09:37:27.000Z","dependencies_parsed_at":"2023-01-22T09:00:59.516Z","dependency_job_id":null,"html_url":"https://github.com/hiisea/elux-react-antd-admin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiisea%2Felux-react-antd-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiisea%2Felux-react-antd-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiisea%2Felux-react-antd-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiisea%2Felux-react-antd-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiisea","download_url":"https://codeload.github.com/hiisea/elux-react-antd-admin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249157896,"owners_count":21222024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin","antd","elux","react","typescript"],"created_at":"2024-10-04T00:08:27.677Z","updated_at":"2025-04-15T21:34:39.084Z","avatar_url":"https://github.com/hiisea.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"public/client/imgs/logo-icon-rotate.svg\" alt=\"elux\" width=\"200\"\u003e\n    \u003ch2\u003e\u003ca href=\"https://eluxjs.com\"\u003eeluxjs.com\u003c/a\u003e\u003c/h2\u003e\n    \u003ch3\u003e基于“微模块”和“模型驱动”的跨平台、跨框架『同构方案』\u003c/h3\u003e\n    \u003csmall\u003e支持React/Vue/Web(浏览器)/Micro(微前端)/SSR(服务器渲染)/MP(小程序)/APP(手机应用)\u003c/small\u003e\n\u003c/div\u003e\n\n## 项目介绍\n\n本项目主要基于`Elux+Antd`构建，包含`React`版本和`Vue`版本，旨在提供给大家一个**简单基础**、**开箱即用**的后台管理系统通用模版，主要包含运行环境、脚手架、代码风格、基本Layout、状态管理、路由管理、增删改查逻辑、列表、表单等。\n\n\u003e 为保持工程简单清爽，方便二次开发，只提供基本版式和通用组件，不集成各种眼花缭乱的组件，需要的时候自己加进去就行了，Antd本身也自带很多组件。\n\n## 在线预览\n\n\u003chttp://admin-react-antd.eluxjs.com/\u003e\n\n## Git仓库\n\n- React版本\n  - github: \u003chttps://github.com/hiisea/elux-react-antd-admin\u003e\n  - gitee: \u003chttps://gitee.com/hiisea/elux-react-antd-admin-fork\u003e\n- Vue版本\n  - github: \u003chttps://github.com/hiisea/elux-vue-antd-admin\u003e\n  - gitee: \u003chttps://gitee.com/hiisea/elux-vue-antd-admin-fork\u003e\n\n## 安装方法\n\n- 使用Git命令clone相应的库：`git clone xxx`\n- 也可以使用Elux提供的命令：`npm create elux@latest 或 yarn create elux`\n\n## ⚠️注意事项\n\n安装请注意！安装请注意！安装请注意！重要的事情说三遍，因为使用了`workspace`，所以请保证你的安装环境：\n\n- Node版本 \u003e= 14.0.0\n- 推荐使用 `yarn` 安装依赖\n- 如果使用 `npm` 安装依赖，npm版本 \u003e= 7.0\n- 本项目代码风格检查以 LF 作为换行符，如果你在windows中使用`git clone`，最好关闭`autocrlf`\n  \u003e git config --global core.autocrlf false\n\n## 你看得见的UI\n\n- 🚀 提供通用的Admin系统Layout（包括注册、登录、忘记密码等）。\n- 🚀 动态获取Menu菜单、轮询最新消息等。\n- 🚀 支持第一次后退溢出，自动回到首页，再次后退则弹出提示：`您确定要离开本站？`防止用户误操作。 ![elux收藏夹](public/client/imgs/leave.jpg)\n- 提供\u0026lt;DocumentHead\u0026gt;组件，方便在SinglePage中维护document title、keyword、description等，该组件也可用于SSR，例如：\n\n  ```ts\n  \u003cDocumentHead title={(id?'修改':'新增')+'用户'} /\u003e\n  ```\n\n- 🚀 提供配置式查询表单, 还带TS类型验证哦，再也不担心写错字段名：\n\n  ```ts\n  const formItems: SearchFromItems\u003cListSearchFormData\u003e = [\n    {name: 'name', label: '用户名', formItem: \u003cInput placeholder=\"请输入关键字\" /\u003e},\n    {name: 'nickname', label: '呢称', formItem: \u003cInput placeholder=\"请输入呢称\" /\u003e},\n    {name: 'status', label: '状态', formItem: \u003cSelect placeholder=\"请选择用户状态\" /\u003e},\n    {name: 'role', label: '角色', formItem: \u003cSelect placeholder=\"请选择用户状态\" /\u003e},\n    {name: 'email', label: 'Email', formItem: \u003cInput placeholder=\"请输入Email\" /\u003e},\n  ];\n  ```\n\n- 🚀 提供展开与隐藏高级搜索：[展开高级](http://admin-react-antd.eluxjs.com/admin/member/list/maintain?email=u.mese%40jww.gh) / [隐藏高级](http://admin-react-antd.eluxjs.com/admin/member/list/maintain)\n- 🚀 提供跨页选取、重新搜索后选取、review已选取：[跨页选取](http://admin-react-antd.eluxjs.com/admin/member/list/maintain)\n- 🚀 提供配置式批量操作等功能，如：[批量操作](http://admin-react-antd.eluxjs.com/admin/member/list/maintain)\n\n  ```ts\n  const batchActions = {\n      actions: [\n        {key: 'delete', label: '批量删除', confirm: true},\n        {key: 'resolved', label: '批量通过', confirm: true},\n        {key: 'rejected', label: '批量拒绝', confirm: true},\n      ],\n      handler: (item: {key: string}, ids: (string | number)[]) =\u003e {\n        if (item.key === 'delete') {\n          deleteItems(ids as string[]);\n        } else if (item.key === 'resolved') {\n          alterItems(ids as string[], {status: Status.审核通过});\n        } else if (item.key === 'rejected') {\n          alterItems(ids as string[], {status: Status.审核拒绝});\n        }\n      },\n    };\n  ```\n\n- 🚀 提供资源选择器，并封装成select，可单选、多选、选满自动提交，如：[创建文章时，查询并选择责任编辑](http://admin-react-antd.eluxjs.com/admin/article/item/edit?__c=_dialog)\n\n  ```jsx\n  \u003cFormItem {...fromDecorators.editors}\u003e\n    \u003cMSelect\u003cMemberListSearch\u003e\n      placeholder=\"请选择责任编辑\"\n      selectorPathname=\"/admin/member/list/selector\"\n      fixedSearch={{role: Role.责任编辑, status: Status.启用}}\n      limit={[1, 2]}\n      returnArray\n      showSearch\n    \u003e\u003c/MSelect\u003e\n  \u003c/FormItem\u003e\n  ```\n\n- 🚀 提供收藏夹书签功能，用其代替Page选项卡，操作更灵活。点击左上角[【+收藏】](http://admin-react-antd.eluxjs.com/admin/member/list/maintain)试试... ![elux收藏夹](public/client/imgs/favs.jpg)\n- 🚀 提供页内刷新功能。点击右上角[【刷新按钮】](http://admin-react-antd.eluxjs.com/admin/member/list/maintain)试试...\n- 🚀 虚拟Window\n  - 路由跳转时可以在新的虚拟窗口中打开，类似于target='_blank'，但是虚拟Window哦，如：[新窗口打开](http://admin-react-antd.eluxjs.com/admin/article/list/index?author=48\u0026__c=_dialog) / [本窗口打开](http://admin-react-antd.eluxjs.com/admin/article/list/index?author=48)\n  - 窗口中可以再开新窗口，最多可达10级\n  - 弹窗再弹弹窗体验不好？多层弹窗时自动隐藏下层弹窗，关闭上层弹窗自动恢复下层弹窗，保证每一时刻始终之会出现一层弹窗\n  - 实现真正意义上的Window（非简单的Dialog），每个窗口不仅拥有独立的Dom、状态管理Store、还自动维护独立的`历史记录栈`\n  - 提供窗口工具条：后退、刷新、关闭，如：[文章列表](http://admin-react-antd.eluxjs.com/admin/article/list/index?author=48\u0026__c=_dialog) =\u003e 点击标题 =\u003e 点击作者 =\u003e 点击文章数。然后你可以依次回退每一步操作，也可一次性全部关闭。\n  - 提供窗口最大化、最小化按钮，如：[文章详情，窗口左上角按钮](http://admin-react-antd.eluxjs.com/admin/article/item/detail/50?__c=_dialog)；并支持默认最大化，如：[创建文章](http://admin-react-antd.eluxjs.com/admin/article/item/edit?__c=_dialog) ![elux虚拟窗口](public/client/imgs/window.jpg)\n  - 窗口可以通过Url发送，如将`http://admin-react-antd.eluxjs.com/admin/member/item/edit/50?__c=_dialog`发送给好友后，其可以通过Url还原窗口。\n  - 实现`keep-alive`。keep-alive优点是用户体验好，缺点是太占资源（需要缓存所有Dom元素还有相关内存变量），现在使用虚拟Windw，你想keep-alive就在新窗口中打开，不想keep-alive就在原窗口中打开，关闭窗口就自动销毁keep-alive\n  \n- 🚀 基于抽象的增删改查逻辑：\n  - 业务逻辑通过类的继承复用，如果是标准的增删改查基本上`不用写代码`，否则可以自己覆盖父类中的某些方法：\n\n  ```ts\n  export class Model extends BaseResource\u003cMemberResource\u003e {\n    protected api = api;\n    protected defaultListSearch = defaultListSearch;\n  }\n  ```\n\n  - UI逻辑通过`Hooks`复用。\n  - 将视图抽象成为2大类：*列表*(List)和*单条*(Item)，抽取其共性。\n  - 在此基础上引入视图`渲染器(Render)`概念，类别名+渲染器=具体某个业务视图，如：\n    - type=list,render=maintain(列表+维护)，如：[/admin/member/list/maintain](http://admin-react-antd.eluxjs.com/admin/member/list/maintain)\n    - type=list,render=index(列表+展示)，如：[/admin/article/list/index](http://admin-react-antd.eluxjs.com/admin/article/list/index?author=49\u0026__c=_dialog)\n    - type=list,render=selector(列表+选择)，如：[/admin/member/list/selector](http://admin-react-antd.eluxjs.com/admin/member/list/selector?role=editor\u0026status=enable\u0026__c=_dialog)\n    - type=item,render=detail(单条+展示)，如：[/admin/member/item/detail/49](http://admin-react-antd.eluxjs.com/admin/member/item/detail/49?__c=_dialog)\n    - type=item,render=edit(单条+编辑)，如：[/admin/member/item/edit/49](http://admin-react-antd.eluxjs.com/admin/member/item/edit/49?__c=_dialog)\n\n## 你看不见的幕后\n\n- 🚀 使用微模块架构，将业务功能封装成独立微模块，想要哪个功能就安装哪个模块，是一种粒度更细的微前端\n\n  ```txt\n   你以前的SRC长这样？？？\n    │\n    ├─ src\n    │  ├─ api                 # API接口管理\n    │  ├─ assets              # 静态资源文件\n    │  ├─ components          # 全局组件\n    │  ├─ config              # 全局配置项\n    │  ├─ directives          # 全局指令文件\n    │  ├─ enums               # 项目枚举\n    │  ├─ hooks               # 常用 Hooks\n    │  ├─ language            # 语言国际化\n    │  ├─ layout              # 框架布局\n    │  ├─ routers             # 路由管理\n    │  ├─ store               # store\n    │  ├─ styles              # 全局样式\n    │  ├─ typings             # 全局 ts 声明\n    │  ├─ utils               # 工具库\n    │  ├─ views               # 项目所有页面\n    │  ├─ App.vue             # 入口页面\n    │  └─ main.ts             # 入口文件\n  ```\n\n   快来拯救你的SRC🔥，\n\n  ```txt\n  使用微模块后SRC长这样！！！\n    │\n    ├─ src\n    │  ├─ moddules            # 各业务微模块\n    │  │    ├─ user\n    │  │    ├─ article        \n    │  │    ├─ comment   \n    │  ├─ Project.vue         # 各微模块聚合配置\n    │  └─ index.ts            # 入口文件\n  ```\n\n  - 微模块支持同步/异步加载\n  - 微模块支持本地目录、支持发布成NPM包，支持独立部署（微前端）\n  - 微模块支持整体TS类型验证与提示\n  \n- 🚀 内置最强状态管理框架(^-^)：\n  - 同时支持`React/Vue`的状态管理框架。\n  - 最大程度简化action和store的写法：\n\n  ```ts\n  export class Model extends BaseMode {\n\n    @reducer //类似Vuex的mutations\n    public putCurUser(curUser: CurUser) {\n      this.state.curUser = curUser; // vue中可直接修改\n      //this.state = {...this.state, curUser} react中\n    }\n\n    @effect() //类似Vuex的action\n    public async login(args: LoginParams) {\n      const curUser = await api.login(args);\n      this.dispatch(this.actions.putCurUser(curUser));\n      this.getRouter().relaunch({url: AdminHomeUrl}, 'window');\n    }\n  }\n  ```\n\n  - 与路由结合，支持Store多实例。\n  - 路由跳转时自动清理Store，再也不用担心State无限累积。\n  - 为action引入线程机制，支持在处理action的过程中，在派生出新的action线程。\n  - action执行中支持异步操作：\n\n  ```ts\n  @effect()\n  public async updateItem(id: string, data: UpdateItem) {\n    await this.api.updateItem!({id, data}); //调用后台API\n    await this.getRouter().back(1, 'window'); //路由后退一步(到列表页)\n    message.success('编辑成功！'); //提示\n    this.getRouter().back(0); //back(0)表示刷新当前页(列表页)\n  }\n  ```\n\n  - 支持`awiat dispatch(action)`执行，如在UI中等待login这个action的执行结果：\n\n  ```ts\n  const onSubmit = (values: HFormData) =\u003e {\n    const result = dispatch(stageActions.login(values));\n    //stageActions.login()中包含异步请求，返回Promise\n\n    result.catch(({message}) =\u003e {\n      //如果出错(密码错误)，在form中展示出错信息\n      form.setFields([{name: 'password', errors: [message]}]);\n    });\n  };\n  ```\n\n  - 为action引入事件机制，dispatch一个action支持多处监听，共同协作完成一个长流程业务。例如：ModelA 和 ModelB 都想监听`用户切换`这个Action：\n\n  ```ts\n  // ModelA:\n  export class ModelA extends BaseResource {\n    @effect()\n    public async ['stage.putCurUser'](user: User) {\n      if (user.hasLogin) {\n          this.dispath(this.actions.xxx());\n      } else {\n          this.dispath(this.actions.xxx());\n      }\n    }\n  }\n\n  // ModelB:\n  export class ModelB extends BaseResource{\n    @effect()\n    public async ['stage.putCurUser'](user: User) {\n      if (user.hasLogin) {\n          this.dispath(this.actions.xxx());\n      } else {\n          this.dispath(this.actions.xxx());\n      }\n    }\n  }\n  ```\n\n  - 路由跳转前会自动派发`stage._testRouteChange`的action，你可以监听它，阻止路由跳转：\n\n  ```ts\n  @effect(null)\n  protected async ['this._testRouteChange']({url, pathname}) {\n      if (!this.state.curUser.hasLogin \u0026\u0026 this.checkNeedsLogin(pathname)) {\n          throw new CustomError(CommonErrorCode.unauthorized, '请登录！');\n      }\n  }\n  ```\n\n  - 支持catch action执行过程中的错误，并决定继续或终止当前action执行：\n\n  ```ts\n  @effect(null)\n  protected async ['this._error'](error: CustomError) {\n      if (error.code === CommonErrorCode.unauthorized) {\n          this.getRouter().push({url: '/login'}, 'window');\n      }else{\n          alert(error.message);\n      }\n      throw error;\n  }\n  ```\n\n  - 最方便的注入loading状态，想要跟踪异步action的执行情况？只需要在声明方法中传人key名就行了，如：\n\n    ```ts\n    @effect('this.listLoading') //将该异步action的执行状态注入this.state.listLoading中\n    public async fetchList(listSearchData?: TDefineResource['ListSearch']) {\n      const listSearch = listSearchData || this.state.listSearch || this.defaultListSearch;\n      const {list, listSummary} = await this.api.getList!(listSearch);\n      this.dispatch(this.privateActions.putList(listSearch, list, listSummary));\n    }\n    ```\n\n  - 武装到牙齿的Typescript智能提示和自动补全（并且类型自动生成，无需手写）：![elux-ts](public/client/imgs/type.jpg)\n  \n- 🚀 提供基于双栈单链的虚拟路由。\n  - 拥有2维历史记录栈，相当于在SinglePage中虚拟了一个完整的浏览器，页面可以在原窗口中打开，也可以新开一个虚拟窗口打开。\n\n  ```ts\n  router.push({url: '/login'}, 'page') //在原窗口中打开\n  router.push({url: '/login'}, 'window') //在新窗口中打开\n  ```\n\n  - 基于虚拟路由，不再直接关联原生路由，中间可以转换映射。\n  - 跨平台，可用于浏览器、服务器SSR、小程序、原生应用。\n  - 跨框架，可用于React、Vue。\n  - 不依赖其它路由框架，如react-router、vue-router。\n  - 可完整保存历史快照，包括Store和Dom元素。\n  - 可访问和查找历史记录，不再只是一个history.length：\n\n  ```ts\n  const length = router.getHistoryLength(); //获取历史栈中的记录数\n  const list = router.getHistory(); //获取所有历史记录\n  const record = router.findRecordByStep(10); //获取10步之前的历史记录\n  const record2 = router.findRecordByKey('8_1'); //获取编号为8_1的历史记录\n  ```\n\n    例如登录窗口中点击“取消登录”你需要回退到前一个页面，但此时如果前一个页面就是需要登录的页面，那么登录窗口又会被重新弹出。所以点击“取消登录”应当回退到最近的不需要登录的页面：\n\n  ```ts\n  @effect()\n  public async cancelLogin(): Promise\u003cvoid\u003e {\n    //在历史栈中找到第一条不需要登录的记录\n    //如果简单的back(1)，前一个页面需要登录时会引起循环\n    this.getRouter().back((record) =\u003e {\n      return !this.checkNeedsLogin(record.location.pathname);\n    }, 'window');\n  }\n  ```\n\n  - 支持路由拦截和路由守卫：\n\n  ```ts\n  @effect(null)\n  protected async ['this._testRouteChange']({url, pathname}) {\n      if (!this.state.curUser.hasLogin \u0026\u0026 this.checkNeedsLogin(pathname)) {\n          throw new CustomError(CommonErrorCode.unauthorized, '请登录！');\n      }\n  }\n  ```\n\n  - 支持后退溢出时重定向，比如防止用户后退过多，不小心退出了本站：\n\n  ```ts\n  @effect(null)\n  protected async ['this._error'](error: CustomError): Promise\u003cvoid\u003e {\n    if (error.code === ErrorCodes.ROUTE_BACK_OVERFLOW) {//后退溢出时会抛出\n      const redirect: string = HomeUrl;\n      //如果已经时主页，则提示用户是否退出本站？\n      if (this.getRouter().location.url === redirect \u0026\u0026 window.confirm('确定要退出本站吗？')){\n        //注意: back('')可以退出本站\n        setTimeout(() =\u003e this.getRouter().back('', 'window'), 0);\n      } else {\n        //如果不是在主页，则先回到主页\n        setTimeout(() =\u003e this.getRouter().relaunch({url: redirect}, 'window'), 0);\n      }\n    };\n  }\n  ```\n\n  - 可跟踪和等待路由跳转完成。例如修改用户后，需要返回列表页面并刷新：\n\n  ```ts\n  @effect()\n  public async updateItem(id: string, data: UpdateItem) {\n    await this.api.updateItem!({id, data});\n    await this.getRouter().back(1, 'window'); //可await路由后退\n    message.success('编辑成功！');\n    this.getRouter().back(0); //back(0)可刷新页面\n  }\n  ```\n\n  - 提供更多路由跳转方法\n\n  ```ts\n  router.push(location, target); //新增\n  router.replace(location, target); //替换\n  router.relaunch(location, target); //重置\n  router.back(stepOrCallback, target) //后退或刷新\n  ```\n\n- 🚀 提供与项目同构的本地MockServer，MockServer也使用Typescript，但无需再写类型文件，直接从`src/`下面与项目共享，支持修改自动重启。\n- 🚀 开箱即用的脚手架。提供封装好的`Cli命令行`脚手架，不用自己折腾：![elux脚手架](public/client/imgs/cli.jpg)\n- 🚀 基本的`eslint/stylelint/babel`都已经帮你打包好了，不用安装各种插件和写一大堆依赖：\n\n  ```json\n  \"devDependencies\": {\n    \"@elux/babel-preset\": \"^1.0.2\",\n    \"@elux/eslint-plugin\": \"^1.2.2\",\n    \"@elux/stylelint-config\": \"^1.1.1\"\n  }\n  ```\n\n- 🚀 未完待续...\n\n## 不使用NPM管理微模块\n\n项目中的`微模块`默认是使用NPM包来管理的，每个微模块下都有一个`package.json`文件，例如：`src/modules/admin/package.json`，开发时使用了`workspace`和`monorepo`来管理：\n\n```json\n  \"workspaces\": [\n    \"./mock\",\n    \"./public\",\n    \"./src/modules/*\"\n  ],\n```\n\n跨`微模块`引用时，用的是npm包名，例如：\n\n```ts\nimport {ListSearch} from '@elux-admin-antd/member/entity';\n```\n\n`微模块`最大的好处还是在于**高内聚，低耦合**，至于是否要用npm来管理，不是必须的。如果你不想绕这么一个圈，也可以分分钟改成普通的单体结构：\n\n```ts\nimport {ListSearch} from '@/modules/member/entity';\n```\n\n只需要在`src/tsconfig.json`中加入paths别名就可以了：\n\n```json\n\"paths\": {\n  \"@/*\": [\"./*\"]\n}\n```\n\n## Vue版特别说明\n\nVue版/React版保持同步，由于[Elux](https://eluxjs.com)践行“**模型驱动**”的架构理念，View被刻意写得很薄，很多逻辑写在了Model中（因为Model与UI框架无关、Vue和React都可以复用）。\n\n所以需要重构的只是View，由于Vue3中可以使用`steup+tsx`，并且`antd-vue`与`antd-react`风格和api基本保持一致，所以能2个版本的差异就更小了。Vue版全程使用tsx编写，你也可以自己改成template方式，脚手架已经内置了对.vue文件的支持。也欢迎有空的小伙伴贡献源码，将其重构为`template`版。\n\n## 更多相关文章\n\n- [从\"微前端\"到“微模块”](https://juejin.cn/post/7106791733509226533)\n- [不想当Window的Dialog不是一个好Modal，弹窗翻身记...](https://juejin.cn/post/7124177821953425422)\n- [手撸Router，还要啥Router框架？让react-router/vue-router躺一边凉快去](https://juejin.cn/post/7124959667326812196)\n- [一种比css_scoped和css_module更优雅的避免css命名冲突小妙招](https://juejin.cn/post/7129316859182710814)\n\n## 感谢关注，欢迎参与\n\n [eluxjs.com](https://eluxjs.com) | [掘金专栏](https://juejin.cn/column/7106899933537501221) | QQ/微信交流群\n\n![QQ群](https://eluxjs.com/images/qq.jpg)\n![微信群](https://eluxjs.com/images/wechat.jpg)\n\n开源项目，欢迎参与贡献源码(^V^)！觉得好用别忘了[Github](https://github.com/hiisea/elux-react-antd-admin)给个Star哦(-_-)...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiisea%2Felux-react-antd-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiisea%2Felux-react-antd-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiisea%2Felux-react-antd-admin/lists"}