@qilitt-mickey/vue3-temp-skill 1.0.12 → 1.1.2

package/references/vue-core.md

@@ -1,209 +0,0 @@
----
-skill: vue-core
-description: Vue 3 项目核心规范，涵盖技术栈、目录结构、组件开发标准、路由系统、状态管理和国际化。开发任何新功能或组件前必须参考此技能。
-scope: project
-tags: [vue3, typescript, vite, component, router, pinia, i18n, conventions]
----
-
-# Vue 3 项目核心规范
-
-## 技术栈
-
-```typescript
-const techStack = {
-  vue: "3.5.x",
-  typescript: "6.x",
-  vite: "8.x",
-  elementPlus: "2.14.x",   // PC 端 UI
-  vant: "4.10.x",          // 移动端 UI
-  pinia: "3.x",
-  vueRouter: "5.x",
-  unocss: "66.x",
-  axios: "1.18.x",
-  vueI18n: "11.x",
-};
-```
-
-## 目录结构
-
-```
-src/
-├── api/          # API 接口（按业务模块分文件）
-├── components/   # 可复用组件（Re* 前缀）
-├── hooks/        # 组合式函数
-├── store/        # Pinia 状态管理（模块化）
-├── router/       # 路由配置（PC + 移动端）
-├── utils/        # 工具函数
-├── styles/       # 全局样式（SCSS + UnoCSS）
-├── views/        # 页面组件
-├── directives/   # 自定义指令
-├── layout/       # 布局系统
-└── locales/      # 国际化文件
-```
-
-## 组件开发规范
-
-### 命名规则
-
-- 全局自定义组件：`Re[ComponentName]`，如 `RePagination`、`ReDialog`。
-- 页面组件：放在 `views/[module]/index.vue`，`name` 使用大驼峰，如 `BaseTable`、`LoginPage`。
-- 组件 class 名：`re-[component-name]`，如 `.re-pagination`。
-
-### 标准模板
-
-```vue
-<script setup lang="ts">
-import type { ComponentNameProps, ComponentNameEmits } from "./type";
-
-defineOptions({
-  name: "ReComponentName",
-});
-
-const props = withDefaults(defineProps<ComponentNameProps>(), {
-  // 默认值
-});
-
-const emit = defineEmits<ComponentNameEmits>();
-
-// 组件逻辑
-</script>
-
-<template>
-  <div class="re-component-name">
-    <!-- 内容 -->
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.re-component-name {
-  /* 组件样式 */
-}
-</style>
-```
-
-### 必须遵守
-
-1. 始终使用 `<script setup lang="ts">` + Composition API，禁止 Options API。
-2. `script` 标签第一行引入类型：`import type { ... } from "./type"`。
-3. 使用 `defineOptions` 显式声明组件 `name`。
-4. `props` 与 `emits` 的类型定义必须抽取到同目录 `type.ts` 文件。
-5. 样式使用 `lang="scss" scoped`；UnoCSS 原子类可直接写在 template 中。
-6. 系统常规组件（Element Plus / Vant）已自动引入，无需手动 `import`。
-7. 自定义 Re 组件需显式引入：`import { RePagination } from "@/components/RePagination"`。
-
-### 常见反例
-
-- 使用 Options API（`export default { data(), methods }`）。
-- `defineProps` 内直接写内联类型而不抽取到 `type.ts`。
-- 在组件中硬编码中文文案（应使用 `$t()` 国际化）。
-- 忘记写 `defineOptions({ name })` 导致 keep-alive 失效。
-
-## 路由系统
-
-### 静态路由模块格式
-
-```typescript
-export default {
-  path: "/system",
-  redirect: "/system/user",
-  meta: {
-    title: "系统管理",
-    icon: "ep:tools",
-    rank: 1,
-  },
-  children: [
-    {
-      path: "/system/user",
-      name: "SystemUser",
-      component: () => import("@/views/system/user/index.vue"),
-      meta: { title: "用户管理", roles: ["admin"] },
-    },
-  ],
-} satisfies RouteConfigsTable;
-```
-
-### 路由约定
-
-- 路由文件放在 `src/router/modules/` 下，按业务模块拆分。
-- `meta.rank` 控制菜单排序，数值越小越靠前。
-- `meta.roles` 控制页面级权限，不设置则表示无权限限制。
-- 动态路由通过后端接口返回，前端使用 `addRoute()` 动态注册。
-- 移动端路由放在 `src/router/mobile.ts`，与 PC 端隔离。
-
-## Pinia 状态管理
-
-### Store 模块格式
-
-```typescript
-import { defineStore } from "pinia";
-
-export const useUserStore = defineStore("user", {
-  state: () => ({
-    token: "",
-    userInfo: null as UserInfo | null,
-  }),
-
-  actions: {
-    setToken(token: string) {
-      this.token = token;
-    },
-    async login(params: LoginParams) {
-      const { data } = await http.request<Result<LoginResult>>(
-        "post", "/api/login", { data: params }
-      );
-      this.token = data.token;
-      this.userInfo = data.userInfo;
-    },
-    logout() {
-      this.$reset();
-    },
-  },
-
-  persist: {
-    key: "user-store",
-    storage: localStorage,
-    paths: ["token"],
-  },
-});
-
-// 组件外部使用的 Hook（保证在 setup 外也能获取 store 实例）
-export const useUserStoreHook = () => {
-  return useUserStore();
-};
-```
-
-### Store 约定
-
-- 文件名使用 `useXxxStore` 命名，如 `useUserStore.ts`。
-- 必须导出 `useXxxStoreHook()` 函数，供组件外部（如工具函数、路由守卫）调用。
-- 需要持久化的字段在 `persist.paths` 中声明。
-- 不要在 store 中直接操作 DOM 或调用路由方法。
-
-## 国际化 (i18n)
-
-### 使用方式
-
-```vue
-<template>
-  <el-button>{{ $t("buttons.submit") }}</el-button>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-const { t } = useI18n();
-const label = t("system.title");
-</script>
-```
-
-### 约定
-
-- 所有用户可见文案必须通过 `$t()` 或 `t()` 引用。
-- 语言包文件放在 `src/locales/` 下，按模块拆分。
-- 开发阶段可先用中文 key 占位，后续替换为正式文案。
-- 避免使用 `more`、`view details` 等无业务语义的占位文案。
-
-## 通用原则
-
-- 仅在系统边界（用户输入、外部 API）做校验，不添加无意义的防御代码。
-- 新功能需同时考虑 PC 端与移动端兼容性。
-- 用户可见文案优先通过 i18n 或后端配置化提供。