# manage-vue

**Repository Path**: webjarry/manage-vue

## Basic Information

- **Project Name**: manage-vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-19
- **Last Updated**: 2025-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Manage Vue

基于 Vue 3 + TypeScript + Vite 的管理系统模板，集成了现代前端开发所需的主要工具和最佳实践。

## 技术栈

- **核心框架：** Vue 3
- **开发语言：** TypeScript
- **构建工具：** Vite
- **状态管理：** Pinia + 持久化存储
- **样式处理：** SCSS
- **代码规范：** ESLint + Prettier
- **包管理器：** npm

## 快速开始

### 环境要求

- Node.js >= 14.0.0
- npm >= 6.0.0

### 安装依赖

```bash
npm install
```

### 开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 代码检查和格式化

```bash
# 运行 ESLint 检查
npm run lint

# 运行 Prettier 格式化
npm run format
```

## 项目结构

```
manage-vue/
├── docs/                # 项目文档
├── src/                 # 源代码
│   ├── styles/         # 全局样式
│   │   ├── abstracts/  # SCSS 变量和混入
│   │   ├── base/       # 基础样式
│   │   └── main.scss   # 主样式文件
│   ├── components/     # 公共组件
│   ├── stores/         # Pinia 状态管理
│   ├── before.ts       # 应用初始化配置
│   └── main.ts         # 应用入口
├── .eslintrc.js        # ESLint 配置
├── .prettierrc         # Prettier 配置
└── vite.config.ts      # Vite 配置
```

## 特性

### 1. 应用初始化流程

项目使用 `before.ts` 进行应用初始化，确保在渲染之前完成必要的异步操作：

```typescript
// before.ts
export const setupApp = async () => {
    try {
        // 在这里添加初始化操作
        // 例如：获取用户信息、配置信息等
    } catch (error) {
        console.error('Application initialization failed:', error);
    }
    return app;
};
```

### 2. 状态管理

使用 Pinia 进行状态管理，支持持久化存储：

```typescript
// stores/example.ts
import { defineStore } from 'pinia';

export const useExampleStore = defineStore('example', {
    state: () => ({
        // 状态定义
    }),
    actions: {
        // 操作方法
    },
    persist: true // 启用持久化
});
```

### 3. 样式系统

项目使用 SCSS 进行样式管理，提供了一套完整的样式工具：

- 响应式断点管理
- Flex 布局助手
- 文本处理工具
- 主题变量系统

## 代码规范

项目配置了 ESLint 和 Prettier 来保证代码质量和一致性：

- TypeScript 语法检查
- Vue 3 最佳实践
- 自动格式化
- 提交前代码检查

## 开发指南

详细的开发指南请参考 `docs` 目录下的文档：

- [开发规范](./docs/development.md)
- [组件开发指南](./docs/components.md)
- [状态管理指南](./docs/state-management.md)

## 贡献指南

1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交你的改动 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启一个 Pull Request

## 许可证

[MIT License](LICENSE)