README.md

admin-vue3-micro-qiankun

admin-vue3-micro-qiankun是一个微前端后台解决方案，它基于 Qiankun.js 结合 admin-element-vue 和 admin-antd-vue实现。

Demo

main-demo
main-antd-demo

使用文档

• http://admin-vue3-micro-qiankun.liqingsong.cc
• Github
• Gitee
• http://admin-element-vue.liqingsong.cc/tsv2/
• http://admin-antd-vue.liqingsong.cc

后台前端解决方案列表

• admin-element-vue（GitHub、Gitee）
• admin-antd-vue（GitHub、Gitee）
• admin-antd-react（GitHub、Gitee）
• electron-admin-element-vue（GitHub、Gitee）
• electron-admin-antd-vue（GitHub、Gitee）
• electron-admin-antd-react（GitHub、Gitee）
• admin-vue3-micro-qiankun（GitHub、Gitee）

前台前端SSR解决方案列表

• midway-vue3-ssr（GitHub、Gitee）
• midway-react-ssr（GitHub、Gitee）

功能

- 登录 / 注销 / 注册

- 权限验证
  - 页面权限
  - 按钮操作
  - 权限配置

- 全局功能
  - 国际化多语言
  - 黑白主题
  - 动态侧边栏（支持多级路由嵌套）
  - 动态面包屑（支持自定义配置）
  - 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的安装与使用 。

二、Compiles and hot-reloads for development

$ pnpm run serve

# or

$ pnpm run serve:main
$ pnpm run serve:article

三、构建与发布

1、构建：

pnpm run build

2、上传到服务器，以nginx配置为例：

# 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 配置同上
}

# 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;
  }



}

# 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