vue3-naiveui-fsd

Vue 3 + Naive UI + FSD 高级开发技能

用于构建可投入生产的 Vue 3 应用的专家级技能，涵盖 Naive UI、Feature-Sliced Design 架构、TypeScript 和行业最佳实践。

技术栈

• Vue 3，使用 Composition API（<script setup>）
• Naive UI v2.43+ 组件库
• Feature-Sliced Design（FSD） 架构
• TypeScript 严格模式
• 使用 Pinia 进行状态管理
• 使用 Vue Router 4 进行路由管理
• Tailwind CSS v4 工具类样式
• Axios HTTP 请求库
• 使用 Day.js 处理日期
• Lucide Vue Next 图标库
• Vue I18n 国际化

参考资料

详细文档位于 references/ 文件夹中：

文件	描述
fsd-architecture.md	FSD 目录结构和分层规则
api-layer.md	Axios 配置、拦截器、服务模式
types.md	TypeScript 模式、I-前缀约定
stores.md	Pinia 全局状态库（auth、operation）
composables.md	usePagination、useValidationRules、useTheme
forms.md	表单组合式函数模式（useXxxForm）
pages.md	包含表格和 CRUD 的页面组件
shared-ui.md	BaseTable、BaseModal、按钮
utilities.md	格式化器、辅助函数
router.md	路由配置、守卫、加载进度条

快速入门模式

组件结构

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { NCard, NButton } from 'naive-ui'
import type { IUser } from '@/entities/user'

const props = defineProps<{ userId: number }>()
const emit = defineEmits<{ success: [] }>()

const loading = ref(false)
// ... logic
</script>

<template>
  <NCard>
    
  </NCard>
</template>

FSD 分层导入规则

app     → pages, features, entities, shared
pages   → features, entities, shared
features → entities, shared
entities → shared only
shared  → nothing (self-contained)

类型命名约定

IUser         // Base entity
IUserList     // List item (simplified)
IUserDetail   // Full detail
IUserForm     // Form data
IUserListParams // Query params

代码质量检查清单

• TypeScript 严格模式检查通过
• 类型遵循 I 前缀约定
• 遵循 FSD 分层边界
• API 服务位于 shared/api/
• 表单逻辑位于组合式函数中（useXxxForm）
• 分页使用 usePagination
• 校验使用 useValidationRules
• 所有面向用户的文本均使用 i18n
• 妥善处理加载和错误状态