wocwin admin

مشروع wocwin-admin

إنها مجموعة من قوالب إدارة الواجهة الخلفية المستندة إلى Vue3.2 وTypeScript وVite4 وPinia وElement-Plus مفتوحة المصدر.

يدمج هذا المشروع الواجهة الأمامية الصغيرة qiankun (أي يمكن استخدامها كتطبيق فرعي)

المعاينة عبر الإنترنت

• الرابط: https://wocwin.github.io/wocwin-admin/

الحساب: كلمة مرور المستخدم wocwin: 123456

مستودع الكود

• جيثب: https://github.com/wocwin/wocwin-admin
• جيتي: https://gitee.com/wocwin/wocwin-admin

وظيفة المشروع

• تم تطويره باستخدام Vue3.2 + TypeScript، setup语法糖مكون مكون واحد
• استخدم Vite كأداة لتطوير المشاريع وتعبئتها (تم تكوينها باستخدام تعبئة Gzip وبناء جملة TSX والوكيل عبر النطاقات)
• يدمج المشروع بأكمله TypeScript وتدويل i18n
• استخدم Pinia لاستبدال Vuex، وهو خفيف الوزن وبسيط وسهل الاستخدام (مكون إضافي متكامل للثبات)
• استخدم TypeScript لتغليف حزمة Axios الثانوية بأكملها (اعتراض الأخطاء العالمية)
• يتم استخدام مكون التغليف الثانوي t-ui-plus المستند إلى Element-plus، والذي يحتوي على الجداول شائعة الاستخدام والاستعلامات الشرطية ونماذج النماذج ومكونات الاختيار المنسدلة وما إلى ذلك.
• استخدم vue-router لاعتراض أذونات المسار ومسارات التحميل البطيئة
• استخدم KeepAlive لتخزين الصفحات مؤقتًا ودعم التخزين المؤقت للصفحات المتداخلة متعددة المستويات
• استخدم Prettier لتنسيق التعليمات البرمجية بشكل موحد ودمج مواصفات التحقق من رمز Eslint
• يدعم المشروع مجموعة متنوعة من أوضاع التخطيط التقليدية، كما يدعم تبديل السمات والوضع المظلم والوضع الرمادي.
• يدعم المشروع أذونات زر القائمة (wocwin: يمكنه رؤية الكل، المستخدم: لا يمكنه رؤية الشاشة الكبيرة وقائمة Amap وبعض أزرار تشغيل إدارة النظام).

الاداءات الديناميكية

• الرابط: https://blog.csdn.net/cwin8951/article/details/130269505

التثبيت والاستخدام

ملاحظة: تتطلب البيئة المحلية تثبيت Node.js 16.x+ وpnpm 7.x+.

 # 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

دليل هيكل المشروع

 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 全局配置文件

الواجهة الخلفية للمشروع

تستخدم الواجهة الخلفية للمشروع بيانات Mock بالكامل، وذلك بفضل دعم منصة Mock التالية:

• FastMock: https://www.fastmock.site (توقفت الخدمة)
• إيزي موك: https://mock.mengxuegu.com

مواصفات الالتزام بـ Git

• ci : تغييرات على ملفات تكوين ci والبرامج النصية؛
• chore : تغييرات في نظام البناء أو الأدوات المساعدة؛
• fix : إصلاح خطأ الكود؛
• feat : وظيفة جديدة؛
• perf : تحسين الأداء وتحسينه؛
• refactor : مجرد تغييرات في التعليمات البرمجية، لا إصلاح الأخطاء ولا تقديم ميزات جديدة؛
• style : تعديل تنسيق الكود، والذي قد يكون عبارة عن مسافات أو فواصل منقوطة أو مسافة بادئة وما إلى ذلك؛
• docs : تغييرات المستند؛
• test : تكملة حالات الاختبار المفقودة أو تصحيح حالات الاختبار الموجودة؛
• revert : عملية التراجع؛

اتصالات WeChat (يرجى ملاحظة wocwin-admin)

رمز الاستجابة السريعة WeChat