-[Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
## Type Support for `.vue` Imports in TS
### 类型检查
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
```bash
pnpm type-check
```
## Customize configuration
### 代码检查并自动修复
See [Vite Configuration Reference](https://vite.dev/config/).
```bash
pnpm lint
```
## Project Setup
### 代码格式化
```sh
```bash
pnpm install
pnpm format
```
```
### Compile and Hot-Reload for Development
### 本地预览构建结果
```sh
```bash
pnpm dev
pnpm preview
```
```
### Type-Check, Compile and Minify for Production
### 默认构建
```sh
```bash
pnpm build
pnpm build
```
```
### Lint with [ESLint](https://eslint.org/)
### 按环境构建
```sh
```bash
pnpm lint
pnpm build:dev
pnpm build:test
pnpm build:prod
```
### 发布脚本
```bash
pnpm deploy:test
pnpm deploy:prod
pnpm deploy:prod:update-info
```
```
## 环境变量
项目使用 `.env.local` 管理本地环境变量。常见变量如下：
```bash
VITE_AI_API_URL=
MY_OPENAI_API_KEY=
MY_OPENAI_BASE_URL=
BACKEND_API_URL=
DEPLOY_PROD_HOST=
DEPLOY_PROD_PORT=
DEPLOY_PROD_USERNAME=
DEPLOY_PROD_PASSWORD=
DEPLOY_TEST_HOST=
DEPLOY_TEST_PORT=
DEPLOY_TEST_USERNAME=
DEPLOY_TEST_PASSWORD=
```
说明：
-`VITE_` 前缀变量会注入前端运行时。
-`BACKEND_API_URL` 用于业务接口请求地址。
-`MY_OPENAI_*` 用于本地 AI 代理 / OpenAI 兼容接口。
-`DEPLOY_*` 用于部署脚本连接服务器。
建议：
- 不要在 README 中记录真实密钥和密码。
- 团队协作时建议补一个 `.env.example` 作为示例模板。
## 目录结构
```text
.
├─ deploy/ # 测试 / 正式环境部署脚本
├─ public/ # 公共静态资源
├─ server/ # 本地服务或辅助服务代码
├─ src/
│ ├─ api/ # 接口定义与请求封装
│ ├─ assets/ # 图片、SVG、基础样式
│ ├─ components/ # 通用组件
│ ├─ constants/ # 常量、枚举、选项配置
│ ├─ hooks/ # 组合式 hooks
│ ├─ layoutCulture/ # 前台整体布局
│ ├─ plugins/ # Vite / 业务插件
│ ├─ router/ # 路由与守卫
│ ├─ stores/ # Pinia stores
│ ├─ style/ # 全局样式
│ ├─ utils/ # 工具函数、请求、存储、版本检测等
│ ├─ views/ # 页面级视图
│ ├─ App.vue
│ ├─ config.ts
│ └─ main.ts
├─ vite.config.ts # Vite 配置
├─ uno.config.ts # UnoCSS 配置
├─ tsconfig*.json # TypeScript 配置
└─ package.json
```
## 路由结构
### 前台主路由
-`/homePage/homeTab`
-`/homePage/yaTab`
-`/homePage/askTab`
-`/userPage/*`
-`/videoDetail/:id`
-`/articleDetail/:id`
-`/questionDetail/:id`
-`/publishVideo`
-`/publishCase`
-`/publishLongArticle/:type`
-`/pointsStore`
-`/auction`
### 后台路由
-`/backend/tags`
-`/backend/carousel`
-`/backend/caseManage`
-`/backend/goodsDistribution`
-`/backend/contentsMenu/*`
-`/backend/settingsMenu/*`
-`/backend/columnsMenu/*`
## 工程特性
- 基于 `Element Plus` 组件体系构建
- 使用 `UnoCSS` 进行原子化样式开发
- 使用 `AutoImport` 与 `Components` 自动导入 Vue / Element Plus 能力
