📋 项目简介

✨ 重构亮点

🚀 技术栈

核心框架

UI 组件库

构建工具（多选一）

开发语言

代码质量

工程化工具

✨ 功能特性

🏗️ 架构特性

🎨 界面功能

🛡️ 权限系统

🚀 开发体验

🛠️ 快速开始

环境要求

安装依赖

# 推荐使用 pnpm（项目采用 monorepo 架构）pnpm install# 或使用 npmnpm install

开发调试

# 启动开发服务器（默认使用 Vite）pnpm dev# 或者pnpm start

构建工具选择

1. 使用 Webpack（默认）

# 开发pnpm dev# 构建pnpm build# 预览pnpm preview

2. 使用 Vite

# 通过 WinJS 配置切换到 Vite# 在 .winrc.ts 中配置 vite: {}# 开发pnpm dev# 构建pnpm build

3. 使用 Rsbuild

# 通过 WinJS 配置切换到 Rsbuild# 在 .winrc.ts 中注释 vite: {} 和 mfsu 相关，然后配置 rsbuild: {}# 开发pnpm dev# 构建pnpm build

项目初始化

# 项目初始化（安装后自动执行）pnpm setup# 手动执行初始化pnpm run setup

📁 项目结构

winjs-soybean-admin/├── packages/                   # Monorepo 子包│   ├── alova/                 # Alova 请求库封装│   ├── axios/                 # Axios 请求库封装│   ├── color/                 # 颜色工具库│   ├── hooks/                 # 通用 Hooks│   ├── materials/             # 物料组件库│   ├── scripts/               # 脚本工具集│   ├── uno-preset/            # UnoCSS 预设│   └── utils/                 # 工具函数库├── src/                       # 主应用源码│   ├── assets/               # 静态资源│   │   ├── imgs/            # 图片资源│   │   └── js/              # JS 资源│   ├── components/           # 通用组件│   │   ├── advanced/        # 高级组件│   │   ├── common/          # 公共组件│   │   └── custom/          # 自定义组件│   ├── constants/           # 常量定义│   ├── hooks/               # 业务 Hooks│   │   ├── business/        # 业务逻辑 Hooks│   │   └── common/          # 通用 Hooks│   ├── icons/               # SVG 图标│   ├── layouts/             # 布局组件│   │   ├── base-layout/     # 基础布局│   │   ├── blank-layout/    # 空白布局│   │   └── modules/         # 布局模块│   ├── locales/             # 国际化│   │   └── langs/           # 语言包│   ├── plugins/             # 插件配置│   ├── router/              # 路由配置│   │   ├── elegant/         # 优雅路由│   │   ├── guard/           # 路由守卫│   │   └── routes/          # 路由定义│   ├── service/             # 服务层│   │   ├── api/             # API 接口│   │   └── request/         # 请求封装│   ├── store/               # 状态管理│   │   ├── modules/         # Store 模块│   │   └── plugins/         # Store 插件│   ├── styles/              # 样式文件│   │   ├── css/             # CSS 文件│   │   └── scss/            # SCSS 文件│   ├── theme/               # 主题配置│   ├── typings/             # 类型定义│   ├── utils/               # 工具函数│   ├── views/               # 页面组件│   │   ├── _builtin/        # 内置页面│   │   └── home/            # 主页│   ├── app.js               # 应用入口配置│   └── Main.vue             # 根组件├── .winrc.ts                  # WinJS 配置文件├── package.json               # 项目依赖配置├── pnpm-workspace.yaml        # PNPM 工作区配置├── tsconfig.json              # TypeScript 配置├── uno.config.ts              # UnoCSS 配置├── .eslintrc.js               # ESLint 配置├── .prettierrc.js             # Prettier 配置├── .stylelintrc.js            # Stylelint 配置├── f2elint.config.js          # F2ELint 配置├── commitlint.config.js       # Commitlint 配置└── README.md                  # 项目说明文档

🔧 开发指南

代码规范

# 代码检查（ESLint + Stylelint）pnpm lint# 代码格式化（Prettier）pnpm format# F2ELint 扫描pnpm f2elint-scan# F2ELint 修复pnpm f2elint-fix# Git 提交（规范化提交信息）pnpm commit# 中文提交信息pnpm commit:zh

WinJS 配置

import{defineConfig}from'@winner-fed/winjs';exportdefaultdefineConfig({// 包管理器npmClient:'pnpm',// 插件配置plugins:['@winner-fed/plugin-unocss','@winner-fed/plugin-unicons'],// 构建工具选择（可选：'webpack'(默认) | 'vite' | 'rsbuild'）// vite: {}, // 开启 vite// rsbuild: {}, // 开启 rsbuild// 浏览器兼容性targets:{chrome:51,firefox:54,safari:10,edge:15},// 压缩配置jsMinifier:'terser',cssMinifier:'cssnano',// Sass 配置sassLoader:{api:'modern-compiler',sassOptions:{silenceDeprecations:['legacy-js-api']},additionalData:`@use "@/styles/scss/global.scss" as *;`},// 代理配置proxy:{'/api':{target:'http://localhost:3001',changeOrigin:true}}});

环境变量

# 应用标题VITE_APP_TITLE=Soybean Admin# 应用描述VITE_APP_DESC=A beautiful vue admin template# 服务端接口地址VITE_SERVICE_BASE_URL=http://localhost:3001# 路由历史模式VITE_ROUTER_HISTORY_MODE=history# 是否开启请求代理VITE_HTTP_PROXY=true

网络请求

1. 使用 Axios（推荐）

import{request}from'@/service';// GET 请求constdata=awaitrequest.get<ApiResponse>('/api/users');// POST 请求constresult=awaitrequest.post('/api/users',{name:'John'});

2. 使用 Alova

import{alova}from'@sa/alova';// 创建请求方法constgetUserList=()=>alova.Get('/api/users');// 在组件中使用const{ data, loading}=useRequest(getUserList);

样式开发

1. UnoCSS（原子化 CSS）

<template>  <divclass="flex items-center justify-center h-screen bg-gray-100">    <h1class="text-3xl font-bold text-blue-600">Hello World</h1>  </div></template>

2. Sass/SCSS

// 使用全局变量.header {background-color:$primary-color;height:$header-height;// 使用 mixins@includeflex-center;}

3. CSS Modules

<template>  <div:class="$style.container">    <h1:class="$style.title">Title</h1>  </div></template><style module>.container {padding:20px;}.title {font-size:24px;color:#333;}</style>

📦 构建配置

多构建工具对比

浏览器兼容性

// .winrc.tstargets:{chrome:51,firefox:54,safari:10,edge:15}

构建优化策略

性能优化

// .winrc.ts 性能配置exportdefaultdefineConfig({// 启用模块联邦缓存mfsu:{shared:{vue:{singleton:true,eager:false}}},// 开发环境内联 CSS，生产环境提取styleLoader:process.env.NODE_ENV==='production' ?false :{},// Source Map 配置devtool:process.env.NODE_ENV==='development' ?'source-map' :false});

🔍 调试与测试

开发调试

代码质量保障

1. 提交前检查

// .lintstagedrc{"*.{js,jsx,ts,tsx,vue}": ["eslint --fix","prettier --write"],"*.{css,scss,less}": ["stylelint --fix","prettier --write"],"*.{json,md}": ["prettier --write"]}

2. Git Hooks

3. 编辑器集成

📚 相关文档

核心技术栈

UI 和样式

构建工具

开发工具

🤝 贡献指南

开发流程

提交规范

# 功能feat: 添加新功能# 修复fix: 修复 bug# 文档docs: 更新文档# 样式style: 代码格式化# 重构refactor: 代码重构# 测试test: 添加测试# 构建build: 构建相关更改

🆘 问题反馈

📄 许可证

⭐ 如果这个项目对您有帮助，请给它一个 Star！

Happy Coding! 🎉