rui-docs/standards/前端开发规则.md

前端开发规则

适用于 {root} 仓库下所有前端工程

技术栈

场景	框架	UI 库	CSS
管理后台 PC	Vue 3 + TypeScript + Vite	Element Plus	UnoCSS
移动端/小程序	uniapp (Vue 3) + TypeScript	uView Plus	UnoCSS
H5 官网	Vue 3 + TypeScript + Vite	—	UnoCSS

统一规范

必选

• Vue 3 Composition API（<script setup lang="ts">）
• TypeScript 严格模式
• UnoCSS 原子化 CSS（替代 Tailwind / 手写 CSS）
• pnpm 包管理器
• ESLint + @antfu/eslint-config
• Vite 构建工具

推荐

• Pinia 状态管理
• Vue Router 路由
• Axios HTTP 请求（统一拦截器 + Token 刷新）
• unplugin-auto-import 自动导入 Vue/API
• unplugin-vue-components 自动导入组件
• Vitest 单元测试

禁止

• Vue 2 / Options API
• JavaScript（必须 TS）
• CSS 文件（使用 UnoCSS 原子类）
• npm/yarn（必须 pnpm）
• 多行 CSS 样式块（用 UnoCSS 属性化或原子类替代）

项目结构

admin-ui/（或 web-ui/）
├── package.json
├── vite.config.ts
├── uno.config.ts
├── tsconfig.json
├── index.html
├── src/
│   ├── App.vue
│   ├── main.ts
│   ├── router/
│   ├── stores/           # Pinia
│   ├── api/              # Axios 封装 + 接口
│   ├── views/            # 页面组件
│   ├── components/       # 公共组件
│   ├── composables/      # 组合函数
│   ├── utils/            # 工具函数
│   └── styles/           # 仅放 UnoCSS 快捷方式或极少全局样式
└── public/

API 调用规范

// api/user.ts
import { request } from '@/utils/request'

export interface UserInfo {
  id: number
  username: string
  nickname: string
}

export const userApi = {
  page: (params: any) => request.get<PageResult<UserInfo>>('/user/info/page', { params }),
  create: (data: UserInfo) => request.post('/user/info/create', data),
  update: (data: UserInfo) => request.put('/user/info/update', data),
  remove: (id: number) => request.delete(`/user/info/${id}`),
}

UnoCSS 使用

<template>
  <!-- 原子类 -->
  <div class="flex items-center gap-4 p-4 bg-white rounded shadow">
    <span class="text-lg font-bold text-primary">标题</span>
    <el-button type="primary" class="ml-auto">
      操作
    </el-button>
  </div>
</template>

<style lang="scss" scoped>
// 仅极少情况下使用，优先用 UnoCSS 原子类或 shortcuts
</style>

命名规范

类型	规则	示例
文件名	PascalCase	UserList.vue, useTable.ts
目录名	kebab-case	user-info/, order-detail/
变量/函数	camelCase	userList, fetchData
组件	PascalCase	<UserCard />
Pinia store	useXxxStore	useUserStore
路径	小写短横线	/user/info, /order/detail