vue3-naiveui-fsd

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vue 3 + Naive UI + FSD Senior Development Skill

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

Expert-level skill for building production-ready Vue 3 applications with Naive UI, Feature-Sliced Design architecture, TypeScript, and industry best practices.

本技能为构建生产级Vue 3应用提供专业指导，涵盖Naive UI组件库、Feature-Sliced Design（FSD）架构、TypeScript以及行业最佳实践。

Tech Stack

技术栈

Vue 3 with Composition API (
```
<script setup>
```
)
Naive UI v2.43+ component library
Feature-Sliced Design (FSD) architecture
TypeScript with strict mode
Pinia for state management
Vue Router 4 for routing
Tailwind CSS v4 for utility styles
Axios for HTTP requests
Day.js for date handling
Lucide Vue Next for icons
Vue I18n for internationalization

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

参考文档

Detailed documentation is organized in the

references/

folder:

File	Description
fsd-architecture.md	FSD directory structure and layer rules
api-layer.md	Axios setup, interceptors, service pattern
types.md	TypeScript patterns, I-prefix convention
stores.md	Pinia global stores (auth, operation)
composables.md	usePagination, useValidationRules, useTheme
forms.md	Form composable pattern (useXxxForm)
pages.md	Page component with table, CRUD
shared-ui.md	BaseTable, BaseModal, buttons
utilities.md	Formatters, helpers
router.md	Router config, guards, loading bar

详细文档组织在

references/

目录下：

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

Quick Start Patterns

快速入门模式

Component Structure

组件结构

vue

<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>
    <!-- content -->
  </NCard>
</template>

vue

<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>
    <!-- content -->
  </NCard>
</template>

FSD Layer Import Rules

FSD分层导入规则

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

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

Type Naming Convention

类型命名规范

typescript

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

typescript

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

Code Quality Checklist

代码质量检查清单

TypeScript strict mode passes
Types use
```
I
```
prefix convention
FSD layer boundaries respected
API services in
```
shared/api/
```
Form logic in composables (
```
useXxxForm
```
)
Pagination uses
```
usePagination
```
Validation uses
```
useValidationRules
```
i18n for all user-facing text
Loading/error states handled

TypeScript严格模式校验通过
类型采用I前缀命名规范
遵守FSD分层边界规则
API服务放置在
```
shared/api/
```
目录
表单逻辑封装在组合式函数（
```
useXxxForm
```
）中
分页功能使用
```
usePagination
```
校验逻辑使用
```
useValidationRules
```
所有用户可见文本支持i18n国际化
处理加载/错误状态