Vue 生态全景与项目架构

组件
模板
响应式
Composition API

路由
菜单
权限
Pinia 全局状态
接口请求
表单校验
组件库
构建部署
自动测试

Vue -> Vue Router -> Pinia -> Vite -> Nuxt

SFC 单文件组件
template
script setup
ref / reactive
computed / watch
Composition API

<script setup lang="ts">
const keyword = ref('');
const users = ref<User[]>([]);
</script>

<template>
  <UserFilter v-model:keyword="keyword" />
  <UserTable :users="users" />
</template>

路径对应页面
嵌套路由
路由 meta
路由守卫
页面跳转

{
  path: '/admin/users',
  component: () => import('@/features/users/pages/UserManagementPage.vue'),
  meta: {
    title: '用户管理',
    permission: 'user:read'
  }
}

router.beforeEach((to) => {
  const authStore = useAuthStore();
  const permission = to.meta.permission as string | undefined;

  if (permission && !authStore.permissions.includes(permission)) {
    return '/403';
  }
});

当前登录用户
权限列表
菜单
主题
语言
跨页面共享状态

搜索框临时输入
编辑弹窗草稿
某个组件自己的开关

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null as CurrentUser | null,
    permissions: [] as string[]
  }),
  actions: {
    setUser(user: CurrentUser) {
      this.user = user;
      this.permissions = user.permissions;
    }
  }
});

const authStore = useAuthStore();
const canCreate = computed(() => authStore.permissions.includes('user:create'));

官网
内容站
SSR
SSG
SEO
全栈 Vue 应用

Vue + Vite + Vue Router + Pinia

Nuxt

文件路由
布局
服务端渲染
自动导入
server routes
数据获取

export async function fetchUsers(query: UserQuery) {
  return request.get<PageResult<User>>('/users', { params: query });
}

export function useUsers() {
  const users = ref<User[]>([]);
  const loading = ref(false);

  async function loadUsers() {
    loading.value = true;
    users.value = await fetchUsers(query);
    loading.value = false;
  }

  return { users, loading, loadUsers };
}

<el-form :model="form" :rules="rules">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="form.name" />
  </el-form-item>
</el-form>

组件库 Form 管交互体验
Zod / rules 管数据规则

Table
Form
Dialog / Modal
Select
Pagination
Message
Dropdown

<style scoped>
.user-table {
  width: 100%;
}
</style>

CSS Modules
Tailwind
UnoCSS
Sass

组件库样式 + scoped CSS + UnoCSS/Tailwind

Vite
TypeScript
ESLint / Biome
Prettier
环境变量
构建检查
pnpm workspace
Turborepo
CI/CD

apps/admin
apps/website
packages/ui
packages/request
packages/config

const wrapper = mount(UserTable, {
  props: { users }
});

expect(wrapper.text()).toContain('小明');

await page.goto('/admin/users');
await page.getByPlaceholder('搜索用户名').fill('小明');
await expect(page.getByText('小明')).toBeVisible();

src/
  app/
    router.ts
    providers.ts
  shared/
    request/
    utils/
    ui/
  stores/
    auth.ts
  features/
    users/
      api.ts
      types.ts
      composables/
        use-users.ts
      components/
        UserFilter.vue
        UserForm.vue
        UserTable.vue
      pages/
        UserManagementPage.vue

api.ts 管请求
composable 管业务状态
page 管组装

1. Vue 核心：template、ref/reactive、computed、watch、组件
2. Vue Router：页面、参数、守卫、meta
3. Pinia：用户、权限、菜单、主题
4. 请求封装：api.ts + composable
5. 表单和组件库：Element Plus / Naive UI
6. 工程化：Vite、TypeScript、测试、构建
7. 进阶：Nuxt、SSR、uni-app

Vue 生态不是只有 v-model 和组件库，真正的能力是把 Router、Pinia、请求、权限、工程化组织成稳定项目。