# sky-web

**Repository Path**: maxwade/sky-web

## Basic Information

- **Project Name**: sky-web
- **Description**: # sky-web

基于 [RuoYi-Vue-Plus](https://gitee.com/dromara/RuoYi-Vue-Plus) 的前端脚手架，使用 JavaScript + Options API 风格。


- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-06
- **Last Updated**: 2026-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# sky-web

基于 [RuoYi-Vue-Plus](https://gitee.com/dromara/RuoYi-Vue-Plus) 的前端脚手架，使用 JavaScript + Options API 风格。

## 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.x | 渐进式 JavaScript 框架 |
| Vite | 8.x | 构建工具 |
| Element Plus | 2.x | UI 组件库 |
| Vue Router | 5.x | 路由管理 |
| Pinia | 3.x | 状态管理 |
| Axios | 1.x | HTTP 请求库 |
| Sass | - | CSS 预处理器 |

## 快速开始

### 环境要求

- Node.js 18+
- npm 9+

### 启动步骤

1. 安装依赖
   ```bash
   npm install
   ```

2. 启动开发服务器
   ```bash
   npm run dev
   ```

3. 访问 http://localhost

开发服务器默认代理 `/dev-api` 到 `http://localhost:8080`，与后端服务对接。

### 构建生产版本

```bash
npm run build
```

## 开发规范

- **语言**：JavaScript（不使用 TypeScript）
- **API 风格**：选项式 API（Options API）
- **UI 库**：Element Plus
- **参考项目**：[plus-ui](https://gitee.com/JavaLionLi/plus-ui.git)（RuoYi-Vue-Plus）

## 环境变量

| 变量 | 说明 | 开发环境 | 生产环境 |
|------|------|----------|----------|
| `VITE_APP_BASE_API` | API 前缀 | `/dev-api` | `/prod-api` |
| `VITE_APP_PORT` | 开发端口 | `80` | - |

## 项目结构

```
src/
├── main.js                # 入口文件
├── App.vue                # 根组件
├── permission.js           # 路由守卫（登录鉴权）
├── settings.js             # 全局配置（主题、布局等）
├── api/                    # API 接口
│   ├── login.js            # 登录、登出、用户信息
│   └── menu.js             # 路由菜单
├── assets/                 # 静态资源（图片、样式、图标）
├── components/             # 公共组件
├── directive/              # 自定义指令（v-hasPermi、v-copyText）
├── layout/                 # 布局框架
│   ├── index.vue           # 主布局
│   └── components/         # Sidebar、Navbar、TagsView、Settings 等
├── plugins/                # 插件（modal、tab、cache）
├── router/                 # 路由配置（仅静态路由，动态路由由后端下发）
├── store/                  # Pinia 状态管理
│   └── modules/            # app、user、permission、settings、tagsView、dict、notice
├── utils/                  # 工具函数
│   ├── auth.js             # Token 读写（localStorage）
│   ├── request.js          # Axios 封装（拦截器、防重复提交、错误处理）
│   ├── ruoyi.js            # 通用工具（parseTime、handleTree、tansParams 等）
│   ├── validate.js         # 校验工具
│   ├── permissionAuth.js   # 权限校验（v-hasPermi 指令）
│   └── dynamicTitle.js     # 动态标题
└── views/                  # 页面组件
    ├── index.vue           # 首页
    ├── login.vue           # 登录页
    ├── register.vue        # 注册页
    ├── error/              # 404、401
    ├── redirect/           # 重定向
    └── system/user/profile/  # 个人中心
```

## 关键机制

### 动态路由

路由由后端 API 动态下发，`src/store/modules/permission.js` 负责解析并注册。新增页面时，`src/views/` 下的文件路径必须与后端返回的 `component` 字符串匹配。

### 请求防重复提交

`src/utils/request.js` 内置 500ms 防抖：相同 URL + 相同 body 在 500ms 内重复 POST/PUT 会被拦截。设置 `headers: { repeatSubmit: false }` 可禁用。

### 全局属性

`src/plugins/index.js` 注册了 `$tab`、`$modal`、`$cache`、`$auth`、`useDict`、`download`、`parseTime` 等全局属性。在 `<script setup>` 中通过 `getCurrentInstance().appContext.config.globalProperties` 访问。

| 文件 | 作用 | 调用方式 |
|------|------|----------|
| `modal.js` | 弹窗工具 | `this.$modal.msgError('错误')` |
| `tab.js` | 标签页管理 | `this.$tab.closePage()` |
| `cache.js` | 浏览器缓存 | `this.$cache.session.set('key', val)` |

```js
this.$modal.msgSuccess('保存成功')
this.$modal.confirm('确定删除？')
this.$tab.closePage()
this.$cache.local.set('token', 'xxx')
```

### 自定义指令

- `v-hasPermi="['system:user:page']"` — 权限校验（`*:*:*` 为超管通配）
- `v-hasRoles="['admin']"` — 角色校验
- `v-copyText` — 点击复制文本

### Pinia 状态管理

| 模块 | 文件 | 存什么数据 |
|------|------|-----------|
| `user` | `user.js` | 登录状态、token、用户信息、角色列表 |
| `permission` | `permission.js` | 动态路由、侧边栏菜单 |
| `settings` | `settings.js` | 主题、布局、标签页开关 |
| `app` | `app.js` | 侧边栏折叠状态 |
| `tagsView` | `tagsView.js` | 已打开的标签页列表 |
| `dict` | `dict.js` | 字典数据缓存 |
| `notice` | `notice.js` | 通知消息 |

```js
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
userStore.login(form)
console.log(userStore.name)
```

数据流向：登录 → `user.js` 存 token → 路由守卫 `permission.js` 生成动态路由 → 布局组件渲染侧边栏

## 相关项目

- 后端项目：[sky](https://gitee.com/maxwade/sky)