wocwin admin

wocwin-admin-Projekt

Es handelt sich um eine Reihe von Backend-Verwaltungsvorlagen, die auf den Open Source-Lösungen Vue3.2, TypeScript, Vite4, Pinia und Element-Plus basieren.

Dieses Projekt integriert das Mikro-Frontend Qiankun (das heißt, es kann als Unteranwendung verwendet werden).

Online-Vorschau

• Link: https://wocwin.github.io/wocwin-admin/

Konto: wocwin; Benutzerpasswort: 123456

Code-Repository

• GitHub: https://github.com/wocwin/wocwin-admin
• Gitee: https://gitee.com/wocwin/wocwin-admin

Projektfunktion

• Entwickelt mit Vue3.2 + TypeScript, Einzeldatei-Komponenten setup语法糖
• Verwenden Sie Vite als Projektentwicklungs- und Paketierungstool (konfiguriert mit Gzip-Paketierung, TSX-Syntax und domänenübergreifendem Proxy).
• Das gesamte Projekt integriert TypeScript und i18n-Internationalisierung
• Verwenden Sie Pinia, um Vuex zu ersetzen, leicht, einfach und benutzerfreundlich (integriertes Persistenz-Plug-In)
• Verwenden Sie TypeScript, um das gesamte Axios-Sekundärpaket zu kapseln (globale Fehlerabfangung).
• Es wird die auf Element-plus basierende sekundäre Kapselungskomponente t-ui-plus verwendet, die häufig verwendete Tabellen, bedingte Abfragen, Formularformulare, Dropdown-Auswahlkomponenten usw. enthält.
• Verwenden Sie Vue-Router, um Routenberechtigungen abzufangen und Routen verzögert zu laden
• Verwenden Sie KeepAlive zum Zwischenspeichern von Seiten und unterstützen Sie das Zwischenspeichern verschachtelter Seiten auf mehreren Ebenen
• Verwenden Sie Prettier, um Code einheitlich zu formatieren und Eslint-Codeüberprüfungsspezifikationen zu integrieren
• Das Projekt unterstützt eine Vielzahl herkömmlicher Layoutmodi; außerdem unterstützt es den Themenwechsel, den Dunkelmodus und den Graumodus.
• Das Projekt unterstützt Menüschaltflächenberechtigungen (wocwin: kann alles sehen, Benutzer: kann den großen Bildschirm, das Amap-Menü und einige Systemverwaltungsschaltflächen nicht sehen).

Dynamische Renderings

• Link: https://blog.csdn.net/cwin8951/article/details/130269505

Installieren und verwenden

Hinweis: Für die lokale Umgebung müssen Node.js 16.x+ und pnpm 7.x+ installiert sein.

 # Gitee
git clone https://gitee.com/wocwin/wocwin-admin.git
# GitHub
git clone https://github.com/wocwin/wocwin-admin.git

# 安装pnpm

npm install pnpm -g


# 安装依赖
pnpm install --registry=https://registry.npmjs.org/
> pnpm config get registry 查看当前指向源

# 如果安装依赖失败，可以尝试使用淘宝镜像
> pnpm config set registry https://registry.npmmirror.com/ 切换淘宝镜像源
> pnpm install

# 启动服务
pnpm serve

# build
pnpm dev

# prettier 格式化代码
pnpm lint:prettier

Verzeichnis der Projektstruktur

 Wocwin-Admin
├─ build                  # Vite 配置项
├─ public                 # 静态资源文件（该文件夹不会被打包）
├─ src
│  ├─ api                 # API 接口管理
│  ├─ assets              # 静态资源文件
│  ├─ components          # 全局组件
│  ├─ config              # 全局配置项
│  ├─ hooks               # 常用 Hooks 封装
│  ├─ languages           # 语言国际化 i18n
│  ├─ layout              # 框架布局模块
│  ├─ router              # 路由管理
│  ├─ store               # pinia store
│  ├─ styles              # 全局样式文件
│  ├─ typings             # 全局 ts 声明
│  ├─ utils               # 常用工具库
│  ├─ views               # 项目所有页面
│  ├─ App.vue             # 项目主组件
│  ├─ main.ts             # 项目入口文件
│  ├─ auto-import.d.ts    # 自动导入vue、vue-router、pinia相关API（无需import引入）
│  └─ vite-env.d.ts       # 指定 ts 识别 vue
├─ .env.dev               # 开发环境配置
├─ .env.prod              # 生产环境配置
├─ .env.sit               # 测试环境配置
├─ .eslintignore          # 忽略 Eslint 校验
├─ .eslintrc.cjs          # Eslint 校验配置文件
├─ .gitignore             # 忽略 git 提交
├─ .prettierignore        # 忽略 Prettier 格式化
├─ .prettierrc.cjs        # Prettier 格式化配置
├─ .stylelintignore       # 忽略 stylelint 格式化
├─ .stylelintrc.cjs       # stylelint 样式格式化配置
├─ index.html             # 入口 html
├─ stats.html             # Rollup Visualizer html
├─ deploy.sh              # 发布GitHub Pages指令
├─ LICENSE                # 开源协议文件
├─ pnpm-lock.yaml         # 依赖包包版本锁
├─ package.json           # 依赖包管理
├─ postcss.config.cjs     # postcss 配置
├─ README.md              # README 介绍
├─ tsconfig.json          # typescript 全局配置
└─ vite.config.ts         # vite 全局配置文件

Projekt-Backend-Schnittstelle

Die Projekt-Backend-Schnittstelle nutzt vollständig Mock-Daten, dank der folgenden Mock-Plattform-Unterstützung:

• FastMock: https://www.fastmock.site (Dienst eingestellt)
• EasyMock: https://mock.mengxuegu.com

Git-Commit-Spezifikationen

• ci : Änderungen an CI-Konfigurationsdateien und Skripten;
• chore : Änderungen am Build-System oder an Hilfstools;
• fix : Code-BUG-Reparatur;
• feat : neue Funktion;
• perf : Leistungsoptimierung und -verbesserung;
• refactor : Nur Codeänderungen, weder Fehler beheben noch neue Funktionen einführen;
• style : Anpassung des Codeformats, bei dem es sich um Leerzeichen, Semikolons, Einrückungen usw. handeln kann;
• docs : Dokumentänderungen;
• test : Fehlende Testfälle ergänzen oder vorhandene Testfälle korrigieren;
• revert : Rollback-Vorgang;

WeChat-Kommunikation (bitte wocwin-admin beachten)

WeChat QR-Code