主要变更: 1. 重构API目录结构,采用模块化设计,适配5.x后端接口规范 2. 优化布局组件,提升用户界面体验 3. 增强国际化支持,完善多语言配置 4. 新增权限控制功能,支持前端路由权限管理 5. 优化认证流程,支持JWT认证机制 6. 新增中间件和插件,提升系统扩展性 7. 优化状态管理,采用更清晰的模块化设计 8. 新增搜索框、广告等组件,丰富页面功能 9. 更改包管理工具从npm到pnpm,提升依赖管理效率 10. 完善配置系统,支持多环境配置 适配5.x后端特性: - 采用新的API接口规范 - 支持JWT认证机制 - 适配后端权限控制体系 - 支持后端国际化接口 - 优化数据交互方式
2.6 KiB
2.6 KiB
Madong-Nuxt
Project Introduction
MadongAdmin's Nuxt-Web project, a modern admin system frontend built with Nuxt 4.x, TypeScript, Vite, Pinia, and Element Plus.
Tech Stack
- Frontend Framework: Nuxt 4
- UI Library: Element Plus
- Development Language: TypeScript
- State Management: Pinia
- Internationalization: Vue I18n
- Styling Solution: SCSS + UnoCSS
- Icon Library: Nuxt Icons
- Build Tool: Vite
Core Features
- Authentication System: Login/Register, CAPTCHA, Route Guard
- Member Center: Personal profile management
- Internationalization: Multi-language support (Chinese/English)
- Theme System: Light/Dark mode switching
- Routing System: Dynamic routes, Layout routes
Directory Structure
web/
├── app/ # Main application directory
│ ├── api/ # API interface definitions
│ ├── apps/ # Feature modules directory
│ ├── assets/ # Static assets
│ ├── components/ # Vue components
│ ├── composables/ # Composables
│ ├── lang/ # Internationalization language files
│ ├── layouts/ # Layout components
│ ├── pages/ # Page components
│ ├── plugins/ # Plugins
│ ├── stores/ # Pinia state management
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Utility functions
│ ├── app.vue # Root component
│ └── router.options.ts # Route configuration
├── public/ # Public static resources
├── .gitignore # Git ignore file
├── nuxt.config.ts # Nuxt configuration
├── package.json # Project dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── uno.config.ts # UnoCSS configuration
Installation
-
Clone the repository
git clone <repository-url> cd web -
Install dependencies
pnpm install -
Start development server
pnpm run dev -
Build for production
pnpm run build
Usage
- Development mode:
pnpm run dev- Start development server with hot reload - Build for production:
pnpm run build- Build production version - Preview production:
pnpm run preview- Preview production build - Code linting:
pnpm run lint- Run ESLint to check code quality
Contribution
- Fork the repository
- Create Feat_xxx branch
- Commit your code
- Create Pull Request