https://github.com/lqsong/admin-vue3-micro-qiankun
Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture
https://github.com/lqsong/admin-vue3-micro-qiankun
admin-antd-vue admin-element-vue ant-design antdv element-plus qiankun typescript vue3
Last synced: about 1 month ago
JSON representation
Micro front-end Admin based on Qiankun, vue3.x, admin-element-vue, admin-antd-vue project architecture
- Host: GitHub
- URL: https://github.com/lqsong/admin-vue3-micro-qiankun
- Owner: lqsong
- License: mit
- Created: 2022-02-18T08:37:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-30T03:57:55.000Z (about 2 years ago)
- Last Synced: 2025-04-05T00:51:15.628Z (2 months ago)
- Topics: admin-antd-vue, admin-element-vue, ant-design, antdv, element-plus, qiankun, typescript, vue3
- Language: Vue
- Homepage: http://admin-vue3-micro-qiankun.liqingsong.cc
- Size: 959 KB
- Stars: 39
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# admin-vue3-micro-qiankun
`admin-vue3-micro-qiankun`是一个微前端后台解决方案，它基于 [Qiankun.js](https://qiankun.umijs.org/) 结合 [admin-element-vue](http://admin-element-vue.liqingsong.cc/) 和 [admin-antd-vue](http://admin-antd-vue.liqingsong.cc)实现。
## Demo
| [main-demo](http://main-demo.admin-vue3-micro-qiankun.liqingsong.cc/) |
:-------------------------:
| [main-antd-demo](http://main-antd-demo.admin-vue3-micro-qiankun.liqingsong.cc/) |
|  |
## 使用文档
- [http://admin-vue3-micro-qiankun.liqingsong.cc](http://admin-vue3-micro-qiankun.liqingsong.cc)
- [Github](https://github.com/lqsong/admin-vue3-micro-qiankun)
- [Gitee](https://gitee.com/lqsong/admin-vue3-micro-qiankun)
- [http://admin-element-vue.liqingsong.cc/tsv2/](http://admin-element-vue.liqingsong.cc/tsv2/)
- [http://admin-antd-vue.liqingsong.cc](http://dmin-antd-vue.liqingsong.cc)
## 后台前端解决方案列表
- admin-element-vue（[GitHub](https://github.com/lqsong/admin-element-vue)、[Gitee](https://gitee.com/lqsong/admin-element-vue)）
- admin-antd-vue（[GitHub](https://github.com/lqsong/admin-antd-vue)、[Gitee](https://gitee.com/lqsong/admin-antd-vue)）
- admin-antd-react（[GitHub](https://github.com/lqsong/admin-antd-react)、[Gitee](https://gitee.com/lqsong/admin-antd-react)）
- electron-admin-element-vue（[GitHub](https://github.com/lqsong/electron-admin-element-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-element-vue)）
- electron-admin-antd-vue（[GitHub](https://github.com/lqsong/electron-admin-antd-vue)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-vue)）
- electron-admin-antd-react（[GitHub](https://github.com/lqsong/electron-admin-antd-react)、[Gitee](https://gitee.com/lqsong/electron-admin-antd-react)）
- admin-vue3-micro-qiankun（[GitHub](https://github.com/lqsong/admin-vue3-micro-qiankun)、[Gitee](https://gitee.com/lqsong/admin-vue3-micro-qiankun)）
## 前台前端SSR解决方案列表
- midway-vue3-ssr（[GitHub](https://github.com/lqsong/midway-vue3-ssr)、[Gitee](https://gitee.com/lqsong/midway-vue3-ssr)）
- midway-react-ssr（[GitHub](https://github.com/lqsong/midway-react-ssr)、[Gitee](https://gitee.com/lqsong/midway-react-ssr)）
## 功能
```
- 登录 / 注销 / 注册
- 权限验证
- 页面权限
- 按钮操作
- 权限配置
- 全局功能
- 国际化多语言
- 黑白主题
- 动态侧边栏（支持多级路由嵌套）
- 动态面包屑（支持自定义配置）
- tabNav
- Svg Sprite 图标
- Mock 数据
- 权限验证
- 综合实例
- 引导页
- main主框架（基于admin-element-vue调整）
- main-antd主框架（基于admin-antd-vue调整）
- System子项目（基于admin-element-vue调整）
- Article子项目（基于admin-element-vue调整）
- Links子项目 （基于admin-antd-vue调整）
```
## 项目设置
### 一、Install dependencies,
```
$ pnpm install
```
> 请使用 pnpm , **[pnpm的安装与使用](http://liqingsong.cc/article/detail/26)** 。
### 二、Compiles and hot-reloads for development
```
$ pnpm run serve
# or
$ pnpm run serve:main
$ pnpm run serve:article
```
### 三、构建与发布
1、构建：
```sh
pnpm run build
```
2、上传到服务器，以`nginx`配置为例：
```sh
# env文件中 MICRO_PUBLIC_PATH=/ 时：
server {
listen 8080;
server_name localhost;
location / {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /child/system {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /child/system/index.html;
}
# article 和 links 等其他子模块的history 配置同上
}
```
```sh
# env文件中 MICRO_PUBLIC_PATH=/admin/ 时：
server {
listen 8080;
server_name localhost;
location /admin/ {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /admin/index.html;
}
location /admin/child/system {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /admin/child/system/index.html;
}
# article 和 links 等其他子模块的history 配置同上 如下：
location /admin/child/article {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /admin/child/article/index.html;
}
location /admin/child/links {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /admin/child/links/index.html;
}
}
```
```sh
# env文件中 MICRO_PUBLIC_PATH=/xxxxxx/ 时：
server {
listen 8080;
server_name localhost;
location /xxxxxx/ {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /xxxxxx/index.html;
}
location /xxxxxx/child/system {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /xxxxxx/child/system/index.html;
}
# article 和 links 等其他子模块的history 配置同上 如下：
location /xxxxxx/child/article {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /xxxxxx/child/article/index.html;
}
location /xxxxxx/child/links {
# root html;
# index index.html index.htm;
try_files $uri $uri/ /xxxxxx/child/links/index.html;
}
}
```
## 运行环境建议
- Nodejs 14
- pnpm 6
## 捐赠
如果你觉得这个项目帮助到了你，请帮助点击 Star，你也可以请作者喝咖啡表示鼓励.
**ALIPAY** | **WECHAT**
:-------------------------:|:-------------------------:
 | 