50 lines
2.5 KiB
Markdown
50 lines
2.5 KiB
Markdown
# OpenCloud 前端
|
|
|
|
Vue 3 + TypeScript + Vite 前端，通过 Hono 后端和 Better Auth 提供认证、云图、图鉴、个人主页和管理后台数据。
|
|
|
|
## 本地开发
|
|
|
|
1. 在相邻的 `hono-api` 项目中启动后端服务（该仓库的本地启动方式见其 README）。
|
|
2. 复制 `.env.example` 为 `.env`，配置高德地图 Key；如果后端不在默认地址，修改 `VITE_API_URL`。
|
|
3. 安装依赖并启动前端：
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
默认后端地址为 `http://localhost:3000`。
|
|
开发服务器和本地 Preview 都固定使用 `http://localhost:5173`，与后端默认 CORS 配置保持一致。运行 Preview 前请先停止开发服务器。
|
|
|
|
## 检查与构建
|
|
|
|
```bash
|
|
npm run check
|
|
npm run build
|
|
```
|
|
|
|
`check` 依次执行 ESLint、Prettier 格式检查、项目样式检查、TypeScript 类型检查和通信层测试。也可以单独运行：
|
|
|
|
```bash
|
|
npm run lint # 检查 JS、TS 和 Vue 代码，警告也会导致失败
|
|
npm run lint:fix # 自动修复可修复的代码问题
|
|
npm run format:check # 检查格式，不修改文件
|
|
npm run format # 格式化源码、配置和文档
|
|
npm run check:styles # 检查项目视觉规范
|
|
npm run typecheck # Vue / TypeScript 类型检查
|
|
```
|
|
|
|
ESLint 使用 flat config，启用 JavaScript、TypeScript 和 Vue 推荐规则；Prettier 负责格式，使用 4 个空格缩进、单引号和无分号风格。通过 `eslint-config-prettier` 关闭冲突的格式规则，构建产物、依赖、环境文件和工具管理的目录不参与格式化。
|
|
|
|
VS Code 用户可安装工作区推荐的 Vue、ESLint、Prettier 扩展，保存时自动格式化并执行 ESLint 修复。
|
|
|
|
配置参考：[Vue ESLint 官方指南](https://eslint.vuejs.org/user-guide/)、[typescript-eslint 入门](https://typescript-eslint.io/getting-started/)、[Prettier 安装指南](https://prettier.io/docs/install)。
|
|
|
|
## 项目结构
|
|
|
|
业务代码按功能集中在 `src/features/`：页面、组件、store 和 composable 放入各自所属模块。跨业务的地图控件集中在 `src/shared/map/`，应用导航位于 `src/components/layout/`，API 客户端、全局样式和公共类型保留独立目录。
|
|
|
|
新增或移动文件时，参见[目录结构与依赖约定](docs/project-structure.md)。
|
|
|
|
前后端配套修改时，参见[通信架构与契约同步](docs/api-architecture.md)，先生成并同步契约，再运行 `npm run api:check`。该检查需要相邻的后端仓库；前端独立构建使用已提交的类型快照。
|