【教程】vue+vite+ts创建一个最新的高性能后台项目架构

拜无忧2025-09-05 17:23

新建项目架构教程：构建高性能 Vue 3 后台管理系统

备注：此教程针对小白，非常详细且啰嗦，请慎重阅读

第一章：奠定基石：你的第一个 Vue 3 + Vite 项目

1.1 欢迎来到现代 Vue 生态系统

本教程旨在引导前端初学者从零开始，构建一个不仅仅是应用程序，而是一个完整、高性能、可维护的后台管理系统架构。我们将采用业界最新的技术栈，确保卓越的性能和一流的开发体验。

  • Vue 3：作为核心框架，我们将全面拥抱其强大的组合式 API (Composition API)，这种 API 风格相比于旧的选项式 API (Options API) 提供了更高的灵活性、更好的代码组织能力和更出色的性能 1。
  • Vite：我们将使用下一代前端构建工具 Vite。它利用现代浏览器对原生 ES 模块的支持，提供了闪电般的开发服务器启动速度和模块热更新 (HMR) 体验，告别了漫长的等待 2。
  • TypeScript：通过为 JavaScript 添加静态类型，TypeScript 帮助我们在编码阶段就发现潜在错误，使得代码更加健壮，尤其是在大型项目中进行重构时，它能提供无与伦比的信心和安全性 3。

这套技术栈的选择并非偶然，它们之间存在着强大的协同效应。Vue 3 的组合式 API 在设计之初就充分考虑了与 TypeScript 的集成，提供了无与伦比的类型推断支持。而 Vite 的构建理念则完美契合了现代浏览器的新特性，带来了传统构建工具（如 Webpack）难以企及的开发速度 4。这个组合拳------Vue 3 的性能与组织能力、Vite 的速度、TypeScript 的健壮性------共同构成了一个高效、现代且可靠的开发环境，完美契合了我们构建高性能应用的目标。

1.2 环境准备与配置

在开始之前，请确保你的开发环境满足以下要求：

  • Node.js：确保你安装了最新的长期支持 (LTS) 版本。Node.js 是我们运行 Vite、安装依赖包等一系列开发任务所必需的 JavaScript 运行时环境 4。
  • IDE（集成开发环境） ：强烈推荐使用 Visual Studio Code (VS Code)。并务必安装官方推荐的 Vue - Official 扩展（曾用名 Volar）。这个扩展为 .vue 单文件组件提供了完美的语法高亮、代码提示、TypeScript 类型检查和调试功能 3。如果你之前安装过 Vetur 扩展，请务必在项目中禁用它，以避免冲突 3。

1.3 项目初始化

我们将使用官方推荐的脚手架工具 create-vue 来创建项目，它比直接使用 create-vite 提供了更多针对 Vue 的定制化选项。

  1. 打开你的终端，运行以下命令：

    Bash

    sql 复制代码 
    npm create vue@latest

  2. 接下来，脚手架会以交互式提问的方式引导你完成项目配置。请按照以下建议进行选择，我们将在后续章节中手动集成更强大的自动化工具：

    • Project name: 输入你的项目名称，例如 vue-admin-dashboard
    • Add TypeScript?: Yes
    • Add JSX Support?: No
    • Add Vue Router for Single Page Application development?: No (我们稍后会集成一个更强大的文件路由系统)
    • Add Pinia for state management?: No (我们稍后会手动集成并配置持久化)
    • Add Vitest for Unit Testing?: No (我们将在测试章节单独集成)
    • Add an End-to-End Testing Solution?: No
    • Add ESLint for code quality?: Yes
    • Add Prettier for code formatting?: Yes

  3. 项目创建完成后，根据终端提示进入项目目录，安装依赖并启动开发服务器：

    Bash

    arduino 复制代码 
    cd <your-project-name>
npm install
npm run dev

    现在，你的浏览器应该会自动打开一个本地开发地址，显示 Vue 的欢迎页面。这标志着我们的项目基础已经成功搭建 1。

1.4 初始项目结构导览

让我们快速了解一下项目初始结构中的核心文件和目录：

  • public/: 存放不会被构建处理的静态资源，例如 favicon.ico。
  • src/: 存放我们应用的所有源代码，是主要的工作目录。
  • .eslintrc.cjs: ESLint 的配置文件，用于代码质量检查。
  • index.html: 应用的入口 HTML 文件，Vite 会在这里引入你的代码。
  • package.json: 项目的元数据和依赖管理文件。
  • vite.config.ts: Vite 的配置文件，我们很快就会和它打交道。

接下来，我们将重点剖析 Vue 的核心------单文件组件 (SFC) 。打开 src/components/HelloWorld.vue，你会看到它由三个部分组成 1。

  • <template> ：定义了组件的 HTML 结构。在这里你可以看到 Vue 的文本插值语法 {{ }}，它用于将脚本中的数据显示在模板里。
  • <script setup lang="ts"> ：这是组件的逻辑核心。setup 是一个标志，它告诉 Vue 我们将使用组合式 API，这种写法代码更简洁、性能更好，并且对 TypeScript 的支持也最完善，是当前官方最推荐的写法 1。
  • <style scoped> ：用于编写组件的 CSS 样式。scoped 属性是一个非常重要的特性，它能确保这里的样式只作用于当前组件，不会"泄露"出去影响到其他组件，极大地提高了项目的可维护性 1。

第二章：配置为王：精通 vite.config.ts 与 tsconfig.json

2.1 揭秘 vite.config.ts

vite.config.ts 是 Vite 的中央控制室，我们在这里配置构建流程、开发服务器和插件，从而极大地提升开发效率和项目能力 7。

  • 路径别名 (Path Aliases) ：这是一个能显著改善开发体验的配置。通过设置路径别名，我们可以使用简短的符号（如 @）来代替冗长的相对路径，让模块导入变得更加清晰和易于维护。

    打开 vite.config.ts，并添加 resolve.alias 配置：

    TypeScript

    javascript 复制代码 
    import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

    配置完成后，原本这样的导入：

    import MyComponent from '../../components/MyComponent.vue'

    就可以简化为：

    import MyComponent from '@/components/MyComponent.vue'

  • 核心插件 ：Vite 的强大功能很大程度上来自于其丰富的插件生态。项目初始化时已经为我们安装并配置了 @vitejs/plugin-vue，这是支持 Vue 单文件组件编译的核心插件 7。在后续章节中，我们还会添加更多插件来自动化各种任务。

  • defineConfig 辅助函数 ：注意，整个配置对象被包裹在 defineConfig 函数中。这样做的好处是，Vite 会为我们的配置文件提供完整的 TypeScript 类型提示和校验，确保配置项的正确性，避免拼写错误 7。

2.2 配置 Vite 开发服务器

为了模拟真实的开发环境，我们需要配置开发服务器以解决常见的跨域问题。

  • API 请求代理 ：在开发中，当前端应用（例如运行在 localhost:5173）请求后端 API（例如运行在 localhost:8080）时，会遇到浏览器的同源策略限制，导致 CORS 跨域错误。Vite 提供了强大的代理功能，可以在开发服务器层面转发请求，从而轻松绕过这个问题。

    在 vite.config.ts 中添加 server.proxy 配置：

    TypeScript

    javascript 复制代码 
    // vite.config.ts
export default defineConfig({
  //... plugins 和 resolve.alias
  server: {
    proxy: {
      // 字符串简写写法
      // '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://your-backend-api.com', // 目标 API 地址
        changeOrigin: true, // 需要虚拟主机站点
        rewrite: (path) => path.replace(/^/api/, '') // 重写请求路径，去掉 '/api'
      },
    }
  }
})

    这样配置后，当你的应用发起一个到 /api/users 的请求时，Vite 开发服务器会自动将其转发到 http://your-backend-api.com/users，对浏览器来说，请求始终发往同源的 Vite 服务器，因此不会产生跨域问题 7。

  • 其他实用选项：

    • server.host: 设置为 true 或 '0.0.0.0' 可以让你的开发服务器在局域网内可访问，方便在手机等其他设备上调试 7。
    • server.port: 自定义开发服务器的端口号 7。

2.3 理解项目中的 TypeScript 配置

你可能会注意到项目根目录下有两个 TypeScript 配置文件：tsconfig.json 和 tsconfig.node.json。这种分离设计并非多余，而是保证整个项目类型安全的关键 9。

我们的项目代码实际上运行在两个完全不同的 JavaScript 环境中：

  1. Node.js 环境 ：诸如 vite.config.ts 这样的配置文件，是由 Node.js 直接执行的。它们可以访问 Node.js 的内置模块，如 path 7。
  2. 浏览器环境 ：我们编写在 src/ 目录下的应用代码，最终是运行在浏览器中的。它们可以访问浏览器提供的 DOM API，如 document。

如果只使用一个配置文件，TypeScript 编译器会陷入两难：它要么会因为在应用代码中找不到 Node.js 的类型而报错，要么会因为在配置文件中找不到 DOM 的类型而报错。

因此，通过 tsconfig.node.json 为 Node.js 环境提供专属配置，tsconfig.json 为浏览器环境的应用代码提供配置，我们确保了在两个环境中都能获得精确、有用的类型检查。这体现了现代前端工具链的严谨性和成熟度，从根源上避免了一大类潜在的错误。

2.4 tsconfig.json 核心选项解读

让我们打开 tsconfig.json，了解其中几个对项目至关重要的 compilerOptions 3。

  • "target": "ES2020": 这个选项告诉 TypeScript 将我们的代码编译成哪个版本的 JavaScript。ES2020 是一个非常现代的版本，被绝大多数主流浏览器原生支持，这有助于在生产环境中获得更好的性能 3。

  • "moduleResolution": "bundler": 这是为使用 Vite、Webpack 等现代打包工具的项目量身定制的模块解析策略。它能更准确地模拟这些工具在解析 import 语句时的行为，是当前的最佳实践 10。

  • "isolatedModules": true: 这个选项至关重要。Vite 使用 esbuild 来转换 TypeScript 代码，esbuild 的工作方式是单个文件独立转换，而非分析整个项目。开启此选项后，TypeScript 会对那些在单文件转换模式下可能引发问题的代码（如 const enum）发出警告，从而保证与 Vite 的兼容性 5。

  • "strict": true: 强烈建议始终保持开启。它会启用一系列严格的类型检查规则，比如禁止隐式的 any 类型、要求函数所有分支都有返回值等，能最大程度地发挥 TypeScript 的优势，在早期捕获大量潜在错误 3。

  • "paths": 为了让 TypeScript 理解我们在 vite.config.ts 中设置的路径别名，我们需要在这里进行同步配置。

    JSON

    json 复制代码 
    {
  "compilerOptions": {
    //...其他选项
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

    这样配置后，当你在代码中使用 import... from '@/components/...' 时，TypeScript 就能正确地找到对应的模块并进行类型检查 3。

第三章：可扩展性架构：专业的项目结构

3.1 项目结构的重要性

一个优秀的项目结构能够让代码库变得"可预测" 13。这意味着，当一个新成员加入团队，或者当你自己时隔数月重返项目时，能够直观地知道去哪里寻找特定的代码，以及新功能应该放在哪里。这对于项目的长期维护和扩展至关重要 14。

3.2 推荐的模块化目录结构

我们将采用一种基于功能模块化（Feature-Based）的目录结构。在 src 目录下创建以下文件夹，它们各自承担着明确的职责 13：

bash 复制代码 
src/
├── assets/         # 静态资源 (图片, 字体等)
├── components/     # 全局可复用的UI组件
│   ├── common/     # 基础组件 (BaseButton, BaseModal)
│   └── layouts/    # 页面布局组件 (DefaultLayout, AuthLayout)
├── composables/    # 可复用的组合式函数 (useAuth, usePagination)
├── router/         # 路由配置 (后续将由插件自动生成)
├── services/       # API服务层 (apiClient.ts, userService.ts)
├── store/          # Pinia状态管理 (user.store.ts)
├── styles/         # 全局样式 (variables.scss, main.scss)
├── types/          # 全局TypeScript类型定义
├── utils/          # 通用工具函数 (formatDate.ts)
└── views/          # 页面级组件 (LoginView.vue, DashboardView.vue)

3.3 组件设计策略与命名规范

遵循官方推荐的风格指南是保证代码一致性和可读性的最佳途径 15。

  • 基础组件 (Base Components) ：这些是构成你应用 UI 的原子单位，通常位于 components/common/ 目录下，并以 Base 或 App 作为前缀，例如 BaseButton.vue、BaseInput.vue。它们应该是纯粹的展示性组件，不包含任何业务逻辑，只负责接收 props 并触发 events 13。
  • 布局组件 (Layout Components) ：这些组件定义了页面的整体结构，例如包含侧边栏和顶栏的后台布局，或者居中显示的登录页布局。它们通常位于 components/layouts/ 目录下，并且内部会包含一个 <router-view> 来承载具体的页面内容 13。
  • 页面/视图组件 (View Components) ：这些是与特定路由绑定的顶层组件，位于 views/ 目录下。它们负责组合基础组件和布局组件，并处理与该页面相关的业务逻辑和数据获取 17。
  • 单例组件 (Single-Instance Components) ：对于在整个应用中只应存在一个实例的组件，比如全局顶栏或侧边栏，推荐使用 The 作为前缀，例如 TheHeader.vue、TheSidebar.vue 13。

核心命名规则：

  • PascalCase (大驼峰命名法) ：单文件组件的文件名应始终使用 PascalCase，如 MyComponent.vue 15。
  • 多词组件名 ：组件名应始终由多个单词组成，以避免与现有的和未来的 HTML 元素产生冲突。例如，使用 TodoItem.vue 而不是 Todo.vue 13。

表格：项目结构方法对比

为了更好地理解我们为何选择基于功能的模块化结构，下表对比了几种主流的组织方式及其优缺点 17。

结构方法 描述 适用场景 优点 缺点
扁平结构 (Flat Structure) 所有组件都放在一个 components 文件夹中。 小型项目、原型验证。 简单，易于上手。 项目变大后会迅速变得混乱。
原子设计 (Atomic Design) 按组件复杂度（原子、分子、组织等）组织。 设计系统驱动的复杂项目。 高度可复用，扩展性强。 对初学者来说层级过多，可能过于复杂。
模块化结构 (Feature-Based) 按应用的功能或业务领域来组织代码。 中大型应用。 高内聚、低耦合，职责清晰，可预测性强。 需要团队遵守约定，维护模块边界。

我们的选择------模块化结构，是在简单性和可扩展性之间取得了最佳平衡，非常适合构建复杂的后台管理系统。

第四章：超级充电：自动化提升开发体验

4.1 使用 unplugin-vue-components 告别手动导入

在传统的开发流程中，每次使用一个组件，都需要在 <script> 区域手动 import 它，这不仅繁琐，也让代码显得冗长。unplugin-vue-components 这个 Vite 插件可以彻底解决这个问题。

它会自动扫描指定目录（默认为 src/components），并将这些组件注册为全局可用。这意味着你可以在模板中直接使用 <BaseButton />，而无需编写任何导入语句 20。

安装与配置：

  1. 安装依赖：

    Bash

    复制代码 
    npm install -D unplugin-vue-components

  2. 在 vite.config.ts 中配置插件：

    TypeScript

    javascript 复制代码 
    // vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 指定组件位置，默认是src/components
      dirs: ['src/components'],
      // ui库解析器
      // resolvers:,
      // 配置文件生成位置
      dts: 'src/types/components.d.ts',
    }),
  ],
  //...
})

类型定义生成：

该插件最强大的功能之一是它会自动生成一个 components.d.ts 类型声明文件 20。这个文件会告诉 TypeScript 所有自动导入的组件及其 props 的类型。你需要将这个文件的路径添加到

tsconfig.json 的 include 数组中，这样就能在模板中获得完整的类型检查和代码自动补全。

JSON

json 复制代码 
// tsconfig.json
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/types/components.d.ts"],
  //...
}

4.2 按需引入 UI 组件库

对于后台管理系统，引入一个成熟的 UI 组件库（如 Element Plus 或 PrimeVue）可以极大地提高开发效率。然而，全局完整引入整个库会导致最终打包体积过大，严重影响性能。最佳实践是"按需引入"------只打包你用到的组件。

借助 unplugin-vue-components 及其提供的 resolvers（解析器），我们可以实现完美的自动化按需引入。

以 Element Plus 为例：

  1. 安装 Element Plus 和相应的解析器：

    Bash

    arduino 复制代码 
    npm install element-plus
npm install -D unplugin-auto-import

    (注意：unplugin-vue-components 的 ElementPlusResolver 需要 unplugin-auto-import 作为对等依赖)

  2. 更新 vite.config.ts 配置：

    TypeScript

    javascript 复制代码 
    // vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins:,
      dts: 'src/types/auto-imports.d.ts',
    }),
    Components({
      resolvers:,
      dts: 'src/types/components.d.ts',
    }),
  ],
  //...
})

现在，你可以在任何组件的模板中直接使用 Element Plus 的组件（如 <el-button>），插件会在构建时自动帮你导入对应的组件及其样式，实现了开发便利性与最终性能的最佳结合 22。

这一过程体现了现代前端工程化的核心思想：利用智能的构建时工具来简化应用层代码的编写。开发者可以像使用全局组件一样方便地工作，而构建工具则在幕后完成了所有优化，确保了最终产品的性能，将复杂性留给工具，将简单性带给开发者。

第五章：现代路由之道：类型安全的自动化路由

5.1 传统路由 vs 文件路由

在传统的 Vue 项目中，我们需要在一个 routes.ts 文件中手动维护一个巨大的路由数组，每个路由对象都需要指定 path、name 和 component。这种方式不仅代码冗长，而且极易因手误（如路径拼写错误）导致运行时错误。

现代的解决方案是文件系统路由 (File-Based Routing) ，即项目的目录结构直接映射为应用的路由配置。

5.2 安装与配置 unplugin-vue-router

我们将使用 unplugin-vue-router 插件来实现文件路由，并获得完全的类型安全。

  1. 安装依赖：

    Bash

    复制代码 
    npm install -D unplugin-vue-router

  2. 配置 vite.config.ts：

    在 vite.config.ts 中引入并配置插件。注意：VueRouter 插件必须放在 vue() 插件之前，这是其正常工作的关键 23。

    TypeScript

    javascript 复制代码 
    // vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins:,
  //...
})

  3. 更新 tsconfig.json：

    将插件生成的类型声明文件路径添加到 tsconfig.json 的 include 数组中，以便 TypeScript 能够识别它 23。

    JSON

    json 复制代码 
    {
  "include": [
    //...
    "src/types/typed-router.d.ts"
  ]
}

  4. 更新 main.ts：

    现在我们可以用一种更简洁、更强大的方式来创建和初始化路由实例 23。

    TypeScript

    javascript 复制代码 
    // src/main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router/auto'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
})

app.use(router)
app.mount('#app')

    注意，我们现在从 vue-router/auto 导入 createRouter，它会自动使用插件生成的路由。

5.3 通过文件和文件夹创建路由

现在，路由的创建变得异常简单直观，只需在 src/views/ 目录下创建 .vue 文件即可 24：

  • src/views/index.vue -> 映射到 /
  • src/views/about.vue -> 映射到 /about
  • src/views/users/[id].vue -> 映射到 /users/:id (动态路由)
  • src/views/settings/profile.vue -> 映射到 /settings/profile (嵌套路由)

5.4 类型安全的路由导航

这是 unplugin-vue-router 带来的最大好处。由于插件为所有路由生成了精确的 TypeScript 类型，我们在进行编程式导航或使用 <RouterLink> 组件时，将获得全面的类型检查和自动补全 25。

例如，当你尝试导航到一个带参数的路由时：

TypeScript

php 复制代码 
import { useRouter } from 'vue-router/auto'
const router = useRouter()

// 正确：类型安全，参数 'id' 会有提示
router.push({ name: '/users/[id]', params: { id: '123' } })

// 错误：TypeScript 会在编译时报错！
// 1. 路由名称拼写错误
router.push({ name: '/user/[id]' }) // Error: Property 'user/[id]' does not exist.
// 2. 缺少必需的参数
router.push({ name: '/users/[id]' }) // Error: Property 'params' is missing.
// 3. 参数名错误
router.push({ name: '/users/[id]', params: { userId: '123' } }) // Error: Property 'userId' does not exist.

这种编译时的保护机制使得重构路由变得极其安全，彻底告别了因路径或参数错误导致的 404 页面。

5.5 使用 vite-plugin-vue-layouts 实现页面布局

为了给不同的页面应用统一的布局（如带有侧边栏和顶栏的后台布局），我们可以使用 vite-plugin-vue-layouts。

  1. 安装与配置：

    Bash

    复制代码 
    npm install -D vite-plugin-vue-layouts

    在 vite.config.ts 中添加插件：

    TypeScript

    javascript 复制代码 
    // vite.config.ts
import Layouts from 'vite-plugin-vue-layouts'

export default defineConfig({
  plugins:,
  //...
})

  2. 创建布局文件：

    在 src/components/layouts/ 目录下创建一个 default.vue 文件。这个文件必须包含一个 组件，用于渲染实际的页面内容 26。

    代码段

    xml 复制代码 
    <template>
  <div class="app-layout">
    <TheSidebar />
    <main>
      <TheHeader />
      <router-view />
    </main>
  </div>
</template>

  3. 为页面指定布局：

    在你的页面组件（如 src/views/index.vue）中，添加一个 块来声明它所使用的布局 26。

    代码段

    xml 复制代码 
    <template>
  <div>Dashboard Content</div>
</template>

<route lang="yaml">
meta:
  layout: default
</route>

    这样，当用户访问根路径 / 时，应用会自动将 index.vue 的内容渲染到 default.vue 布局的 <router-view> 中。

第六章：使用 Pinia 掌握全局状态

6.1 为何需要状态管理？

当应用变得复杂时，多个组件可能需要共享同一份数据（例如，当前登录的用户信息）。如果仅仅通过父子组件的 props 和 events 来传递，会导致所谓的"属性钻探 (prop drilling)"，代码会变得难以维护。状态管理库就是为了解决这个问题而生的。

Pinia 是 Vue 官方推荐的状态管理库，它设计简洁、类型支持友好、轻量且直观，是 Vue 3 项目的首选 27。

6.2 初始化 Pinia

  1. 安装依赖：

    Bash

    复制代码 
    npm install pinia

  2. 在 main.ts 中注册：

    创建 Pinia 实例并将其作为插件安装到 Vue 应用中 29。

    TypeScript

    javascript 复制代码 
    // src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
//... router import

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(router)
app.mount('#app')

6.3 定义你的第一个 Store

Store 是一个保存着应用全局状态的实体。我们将在 src/store/ 目录下为每个业务模块创建独立的 store 文件。

我们将使用对初学者更友好的选项式 Store (Options Store) 语法来定义 store 31。

  • State ：一个返回初始状态对象的函数，类似于组件中的 data 28。
  • Getters ：Store 的计算属性，类似于组件中的 computed 28。
  • Actions ：可以修改 state 的方法，可以是同步或异步的，类似于组件中的 methods 31。

示例：user.store.ts

TypeScript

typescript 复制代码 
// src/store/user.store.ts
import { defineStore } from 'pinia'

interface UserState {
  token: string | null
  userInfo: { name: string; email: string } | null
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    token: null,
    userInfo: null,
  }),

  getters: {
    isLoggedIn: (state) =>!!state.token,
  },

  actions: {
    async login(credentials: { email: string; password: string }) {
      // 假设这里有一个 API 调用
      const response = { token: 'fake-jwt-token', user: { name: 'Admin', email: credentials.email } };
      this.token = response.token;
      this.userInfo = response.user;
    },

    logout() {
      this.token = null;
      this.userInfo = null;
    },
  },
})

6.4 在组件中使用 Store

在任何组件的 <script setup> 中，只需导入并调用 store 的 hook 即可访问其状态 31。

代码段

xml 复制代码 
<template>
  <header>
    <div v-if="userStore.isLoggedIn">
      <span>Welcome, {{ userStore.userInfo?.name }}</span>
      <button @click="handleLogout">Logout</button>
    </div>
    <div v-else>
      <button>Login</button>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/user.store'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()

// 错误的做法：直接解构会丢失响应性
// const { isLoggedIn, userInfo } = userStore;

// 正确的做法：使用 storeToRefs 来保持响应性
const { isLoggedIn, userInfo } = storeToRefs(userStore)

const handleLogout = () => {
  userStore.logout()
  // 可以在这里添加路由跳转逻辑
}
</script>

重要提示 ：直接从 store 实例中解构 state 和 getters 会破坏其响应性。如果你需要将它们赋值给局部变量，必须使用 Pinia 提供的 storeToRefs 辅助函数来确保数据保持响应式 29。Actions 可以被直接解构，因为它们是绑定到 store 实例上的普通函数。

6.5 使用插件实现状态持久化

默认情况下，Pinia 的状态是存储在内存中的，刷新页面后所有状态都会丢失。对于像用户登录信息这样的数据，我们希望它能被持久化。pinia-plugin-persistedstate 插件可以轻松实现这一功能。

  1. 安装插件：

    Bash

    css 复制代码 
    npm i pinia-plugin-persistedstate

  2. 在 main.ts 中注册：

    将插件应用到 Pinia 实例上 33。

    TypeScript

    javascript 复制代码 
    // src/main.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

//... app.use(pinia)

  3. 在 Store 中开启持久化：

    只需在 defineStore 的第三个参数中添加 persist: true 即可 33。

    TypeScript

    javascript 复制代码 
    // src/store/user.store.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  //... state, getters, actions
  persist: true,
})

    你还可以进行更精细的配置，例如只持久化 state 中的特定字段 35：

    TypeScript

    arduino 复制代码 
    persist: {
  key: 'my-app-user', // 自定义存储的 key
  storage: sessionStorage, // 默认是 localStorage
  paths: ['token'], // 只持久化 token 字段
},

第七章：构建健壮的 API 服务层

7.1 使用 Axios 集中管理 API 请求

将 fetch 调用分散在各个组件中是一种不良实践，它会导致代码重复、难以维护和无法统一配置。我们将使用 axios 这个强大的 HTTP 客户端，并建立一个集中的 API 服务层。

  1. 安装 Axios：

    Bash

    复制代码 
    npm install axios

  2. 创建 API 客户端实例：

    在 src/services/ 目录下创建一个 apiClient.ts 文件。在这里，我们创建一个预配置的 Axios 实例，设定好基础 URL 和超时时间等 36。基础 URL 应该从环境变量中读取。

    首先，在项目根目录创建 .env.development 文件：

    bash 复制代码 
    VITE_API_BASE_URL=http://localhost:8080/api

    然后创建 apiClient.ts：

    TypeScript

    javascript 复制代码 
    // src/services/apiClient.ts
import axios from 'axios';

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000, // 请求超时时间
});

export default apiClient;

7.2 使用拦截器实现自动化任务

Axios 的拦截器功能非常强大，它允许我们在请求发送前或响应返回后对其进行拦截和处理。

  • 请求拦截器：自动附加认证令牌

    我们可以设置一个请求拦截器，在每个请求发送前，从 Pinia store 中读取认证令牌，并自动将其添加到请求头中。这样就不需要在每个 API 调用函数中重复此操作 36。

    TypeScript

    javascript 复制代码 
    // src/services/apiClient.ts
import axios from 'axios';
import { useUserStore } from '@/store/user.store';

const apiClient = axios.create({ /*... */ });

apiClient.interceptors.request.use(
  (config) => {
    const userStore = useUserStore();
    if (userStore.token) {
      config.headers.Authorization = `Bearer ${userStore.token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default apiClient;

  • 响应拦截器：全局错误处理

    响应拦截器可以统一处理 API 错误。例如，当 API 返回 401 Unauthorized 状态码时，我们可以判断为用户登录已失效，自动执行登出操作并跳转到登录页 36。

    TypeScript

    javascript 复制代码 
    // src/services/apiClient.ts
//... imports

apiClient.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response;
  },
  (error) => {
    if (error.response && error.response.status === 401) {
      const userStore = useUserStore();
      userStore.logout();
      // 跳转到登录页，需要引入 router 实例
      // router.push('/login');
      console.error('Unauthorized, logging out.');
    }
    return Promise.reject(error);
  }
);

7.3 使用 Zod 保证运行时类型安全

TypeScript 的类型检查在代码编译后就会被擦除。这意味着，如果后端 API 返回了与前端类型定义不符的数据（例如，字段缺失或类型错误），程序在运行时依然会出错。Zod 是一个 TypeScript-first 的 schema 验证库，它可以在运行时验证数据的结构和类型，确保我们的应用只处理符合预期的数据 40。

  1. 安装 Zod：

    Bash

    复制代码 
    npm install zod

  2. 定义 Schema 并推断类型：

    我们不再手动编写 TypeScript interface，而是定义一个 Zod schema。Zod 会自动为我们推断出对应的 TypeScript 类型。这实现了"一次定义，两处使用" 40。

    TypeScript

    csharp 复制代码 
    // src/types/user.types.ts
import { z } from 'zod';

// 定义 User 的 Zod Schema
export const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(1),
  email: z.string().email(),
  role: z.enum(['admin', 'user']),
});

// 从 Schema 推断出 TypeScript 类型
export type User = z.infer<typeof UserSchema>;

  3. 在服务层进行解析和验证：

    在我们的 API 服务函数中，接收到数据后，使用 schema 的 safeParse 方法进行验证。safeParse 不会像 parse 那样在验证失败时抛出错误，而是返回一个包含 success 标志和 data 或 error 的结果对象，这使得错误处理更加优雅和可控 41。

    TypeScript

    typescript 复制代码 
    // src/services/userService.ts
import apiClient from './apiClient';
import { UserSchema, type User } from '@/types/user.types';

export const fetchUserById = async (id: string): Promise<User> => {
  try {
    const response = await apiClient.get(`/users/${id}`);
    const validationResult = UserSchema.safeParse(response.data);

    if (!validationResult.success) {
      // 记录详细的验证错误信息
      console.error('API response validation failed:', validationResult.error.format());
      throw new Error('Invalid user data received from server.');
    }

    return validationResult.data;
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw error;
  }
};

第八章：使用 TanStack Query 进行高级数据管理

8.1 服务器状态 vs 客户端状态

在现代前端应用中，我们需要区分两种类型的状态：

  • 客户端状态：完全由前端控制的状态，如模态框的开关、表单的输入内容等。Pinia 非常适合管理这类状态。
  • 服务器状态：来自后端的数据，前端只是"借用"或"缓存"它，例如用户列表、文章详情等。这类状态具有异步、可能过期、需要重新获取等特性。

TanStack Query (在 Vue 中常被称为 Vue Query) 是一个专门用于管理服务器状态的强大库。它能自动处理缓存、后台更新、请求重试、数据同步等复杂逻辑，让我们能以声明式的方式来处理数据获取 44。

8.2 配置 Vue Query

  1. 安装依赖：

    Bash

    bash 复制代码 
    npm i @tanstack/vue-query @tanstack/vue-query-devtools

  2. 在 main.ts 中注册插件 45：

    TypeScript

    javascript 复制代码 
    // src/main.ts
import { VueQueryPlugin } from '@tanstack/vue-query'

//...
app.use(VueQueryPlugin)
//...

  3. 在 App.vue 中添加开发工具：

    这个开发工具在调试数据缓存和请求状态时非常有用 44。

    代码段

    xml 复制代码 
    <template>
  <router-view />
  <VueQueryDevtools />
</template>

<script setup lang="ts">
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
</script>

8.3 使用 useQuery 获取数据

让我们用 useQuery 来重构获取用户列表的逻辑。

  • queryKey：一个用于唯一标识此项数据的数组，Vue Query 会用它来管理缓存 46。
  • queryFn：一个返回 Promise 的异步函数，负责实际的数据获取。

代码段

xml 复制代码 
<template>
  <div>
    <h1>Users</h1>
    <div v-if="isLoading">Loading...</div>
    <div v-else-if="isError">An error has occurred: {{ error?.message }}</div>
    <ul v-else-if="data">
      <li v-for="user in data" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'
import { fetchUsers } from '@/services/userService' // 假设我们创建了这个服务函数

const { isLoading, isError, data, error } = useQuery({
  queryKey: ['users'], // 缓存的键
  queryFn: fetchUsers, // 获取数据的函数
})
</script>

useQuery 返回了一个包含各种状态（isLoading, isError）和数据（data）的响应式对象，极大地简化了我们在模板中处理加载和错误状态的逻辑 44。更重要的是，Vue Query 默认采用"stale-while-revalidate"缓存策略：当组件再次挂载时，它会立即返回缓存中的旧数据（stale），同时在后台发起新的请求以获取最新数据（revalidate），从而在保证数据新鲜度的同时提供了极佳的用户体验 47。

8.4 使用 useMutation 变更数据

对于创建、更新、删除等操作，我们使用 useMutation。它最强大的地方在于，可以在成功回调中轻松地让相关的查询缓存失效，从而自动触发 UI 更新。

TypeScript

xml 复制代码 
// 在 Users.vue 的 <script setup> 中
import { useMutation, useQueryClient } from '@tanstack/vue-query'
import { createUser } from '@/services/userService'

const queryClient = useQueryClient()

const mutation = useMutation({
  mutationFn: createUser, // 负责提交数据的函数
  onSuccess: () => {
    // 当创建成功后，让 'users' 这个 queryKey 对应的缓存失效
    queryClient.invalidateQueries({ queryKey: ['users'] })
  },
})

const handleCreateUser = () => {
  mutation.mutate({ name: 'New User', email: 'new@example.com' })
}

这种模式从根本上改变了数据管理的思维方式。我们不再需要手动在创建用户成功后去更新本地的 ref 数组，而是通过 invalidateQueries 告诉 TanStack Query："嘿，用户列表的数据已经过时了"。所有依赖 ['users'] 这个 queryKey 的 useQuery 实例都会自动重新获取数据，UI 也会随之响应式地更新。这是一种更声明式、更健壮、更少出错的数据管理范式 44。

第九章：保障代码质量与一致性

9.1 配置 ESLint 与 Prettier

在项目初始化时，我们已经选择了集成 ESLint 和 Prettier。

  • ESLint 负责代码质量，它会根据预设的规则（如 eslint:recommended, plugin:vue/vue3-recommended）检查代码中是否存在潜在问题，例如未使用的变量、不符合最佳实践的写法等 48。
  • Prettier 负责代码风格，它是一个"有主见"的代码格式化工具，能自动统一代码的格式，如缩进、分号、引号等，从而终结团队内部关于代码风格的无谓争论 48。

eslint-config-prettier 这个包（已默认安装）的作用是关闭 ESLint 中与 Prettier 冲突的格式化规则，确保两者能够和谐共存 48。

9.2 使用 Git Hooks 自动化质量检查

为了从根本上保证代码库的质量，我们可以在代码提交到 Git 仓库之前，强制执行代码检查和格式化。这可以通过 Git Hooks 实现，而 husky 和 lint-staged 是实现这一目标的黄金搭档。

  1. 安装依赖：

    Bash

    复制代码 
    npm install -D husky lint-staged

  2. 配置 Husky：

    运行 npx husky init，这个命令会创建 .husky/ 目录并生成一个 pre-commit 钩子文件。然后，修改这个文件，让它在 git commit 时执行 lint-staged 49。

    Bash

    bash 复制代码 
    npx husky init
# 这会创建一个.husky/pre-commit 文件，内容为 npm test
# 我们需要修改它
echo "npx lint-staged" >.husky/pre-commit

  3. 配置 lint-staged：

    在 package.json 文件中添加 lint-staged 配置。这个配置告诉 lint-staged 对哪些暂存区（staged）的文件执行哪些命令 50。

    JSON

    json 复制代码 
    // package.json
{
  //...
  "lint-staged": {
    "*.{js,ts,vue}": "eslint --fix",
    "*.{js,ts,vue,json,md}": "prettier --write"
  }
}

    这个配置意味着：在提交前，对所有暂存的 .js, .ts, .vue 文件执行 eslint --fix，然后对所有暂存的 .js, .ts, .vue, .json, .md 文件执行 prettier --write。

现在，每当团队成员执行 git commit 时，husky 就会触发 pre-commit 钩子，lint-staged 会自动对即将提交的文件进行 lint 检查和格式化。任何不符合规范的代码都会被自动修复，或者在无法自动修复时阻止提交。这套自动化流程是专业团队协作中不可或缺的一环，它从制度上保证了代码库的整洁与一致 48。

第十章：性能优化深度探索

10.1 包分析与代码分割

  • 路由懒加载 (Lazy Loading Routes) ：默认情况下，Vite 会将所有页面的代码打包到一个大的 JavaScript 文件中。当用户首次访问时，需要下载整个文件，这会影响首页加载速度。通过路由懒加载，我们可以将每个页面的代码分割成独立的小文件（chunk），只有当用户访问该页面时，浏览器才会去下载对应的文件。得益于我们使用的 unplugin-vue-router，路由懒加载是默认开启的，无需额外配置 52。

  • 组件懒加载 (Lazy Loading Components) ：对于一些体积较大且不是首屏必需的组件（例如富文本编辑器、复杂的图表库），我们可以使用 Vue 提供的 defineAsyncComponent 函数来实现懒加载 53。

    TypeScript

    javascript 复制代码 
    import { defineAsyncComponent } from 'vue'

const HeavyChartComponent = defineAsyncComponent(() =>
  import('@/components/common/HeavyChart.vue')
)

    现在，HeavyChartComponent 及其依赖的代码会被打包成一个独立的文件，只有当它在页面上实际需要被渲染时才会被下载。

10.2 资源优化

  • 打包文件压缩 ：压缩静态资源（JS, CSS）是提升加载性能最有效的手段之一。我们可以使用 vite-plugin-compression2 插件，在生产构建时自动生成 Gzip 和 Brotli 两种格式的压缩文件。服务器可以根据浏览器的支持情况发送更小的文件，从而显著减少网络传输时间 55。

    1. 安装：npm i -D vite-plugin-compression2

    2. 配置 vite.config.ts：

      TypeScript

      javascript 复制代码 
      // vite.config.ts
import { defineConfig } from 'vite'
import compression from 'vite-plugin-compression2'

export default defineConfig({
  plugins: [
    //...
    compression({ algorithm: 'gzip' }),
    compression({ algorithm: 'brotliCompress', exclude: [/.(html)$/i] }),
  ],
})

  • 图片优化 ：图片资源通常是页面性能的瓶颈。使用 vite-plugin-image-optimizer 可以在构建时自动压缩项目中的图片（JPG, PNG, SVG 等），在不显著牺牲质量的前提下减小文件体积 57。

    1. 安装：npm i -D vite-plugin-image-optimizer sharp svgo

    2. 配置 vite.config.ts：

      TypeScript

      javascript 复制代码 
      // vite.config.ts
import { defineConfig } from 'vite'
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'

export default defineConfig({
  plugins: [
    //...
    ViteImageOptimizer({
      // 自定义选项，例如 jpeg 质量
      jpeg: { quality: 80 },
    }),
  ],
})

10.3 高效渲染大数据列表

当需要渲染包含成百上千条数据的列表时，标准的 v-for 会一次性创建所有的 DOM 节点，这可能导致页面卡顿甚至崩溃 58。

解决方案：虚拟滚动 (Virtual Scrolling) 。虚拟滚动的核心思想是只渲染当前视口内可见的列表项，随着用户滚动动态地更新和复用 DOM 节点。这使得渲染无限量的数据成为可能。

我们可以使用成熟的库如 vue-virtual-scroller 或 VueUse 提供的 useVirtualList 组合式函数来实现此功能 59。

使用 vue-virtual-scroller 示例：

代码段

xml 复制代码 
<template>
  <RecycleScroller
    class="scroller"
    :items="largeList"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>

<script setup>
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { RecycleScroller } from 'vue-virtual-scroller'

const largeList = Array.from(Array(10000).keys()).map(i => ({
  id: i,
  name: `User ${i}`,
}))
</script>

<style>
.scroller {
  height: 400px;
}
.user {
  height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>

10.4 Vue 内置优化指令

  • v-memo：这是一个性能优化指令，它可以"记住"模板的一部分。只有当其依赖的数组中的值发生变化时，这部分模板才会重新渲染。非常适合用于优化那些渲染开销大但数据不常变的列表或组件 53。
  • v-once：用于渲染那些只需计算一次、之后永不更新的静态内容。Vue 会跳过对这部分内容的所有后续更新检查 53。

第十一章：测试入门

11.1 测试金字塔简介

一个健康的测试策略通常遵循"测试金字塔"模型，它包括：

  • 单元测试 (Unit Tests) ：测试最小的代码单元（如单个函数或组件），数量最多，运行最快。
  • 集成测试 (Integration Tests) ：测试多个单元协同工作的情况。
  • 端到端测试 (End-to-End Tests) ：从用户的角度出发，模拟真实的用户操作流程，测试整个应用的完整功能。数量最少，运行最慢。

11.2 使用 Vitest 进行单元测试

Vitest 是一个由 Vite 驱动的极速单元测试框架，它与我们的技术栈无缝集成。

  1. 安装依赖：

    Bash

    bash 复制代码 
    npm install -D vitest @vue/test-utils jsdom

  2. 配置 vite.config.ts：

    添加 test 属性来配置 Vitest。globals: true 让我们可以在测试文件中直接使用 describe, it, expect 等全局 API，environment: 'jsdom' 则模拟了浏览器环境 62。

    TypeScript

    javascript 复制代码 
    // vite.config.ts
/// <reference types="vitest" />
import { defineConfig } from 'vite'
//...

export default defineConfig({
  //...
  test: {
    globals: true,
    environment: 'jsdom',
  },
})

  3. 编写一个简单的组件测试：

    创建一个 src/components/common/tests/BaseButton.spec.ts 文件。我们使用 @vue/test-utils 的 mount 函数来渲染组件，然后使用 expect 来断言其行为是否符合预期 64。

    TypeScript

    javascript 复制代码 
    // src/components/common/__tests__/BaseButton.spec.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import BaseButton from '../BaseButton.vue'

describe('BaseButton.vue', () => {
  it('renders slot content', () => {
    const wrapper = mount(BaseButton, {
      slots: {
        default: 'Click Me'
      }
    })
    expect(wrapper.text()).toContain('Click Me')
  })
})

11.3 使用 Cypress 进行端到端测试

Cypress 是一个现代化的 E2E 测试框架，它能让我们像真实用户一样在浏览器中与应用交互。

  1. 安装依赖：

    Bash

    复制代码 
    npm install -D cypress

  2. 启动 Cypress：

    运行 npx cypress open。Cypress 会启动一个交互式的向导，引导你完成 E2E 测试的初始化配置 65。

  3. 编写一个简单的 E2E 测试：

    Cypress 的测试用例非常直观。以下是一个模拟用户登录流程的测试示例 65：

    TypeScript

    dart 复制代码 
    // cypress/e2e/login.cy.ts
describe('Login Flow', () => {
  it('successfully logs in and redirects to dashboard', () => {
    cy.visit('/login') // 访问登录页

    cy.get('input[name="email"]').type('admin@example.com') // 输入邮箱
    cy.get('input[name="password"]').type('password123') // 输入密码

    cy.get('button[type="submit"]').click() // 点击登录按钮

    cy.url().should('include', '/dashboard') // 断言 URL 已跳转到仪表盘
    cy.contains('h1', 'Dashboard').should('be.visible') // 断言页面上出现了 "Dashboard" 标题
  })
})

结论：你的高可用架构已准备就绪

恭喜你！通过本教程的引导，你已经从零开始构建了一个专业、健壮、可扩展且高性能的 Vue 3 后台管理系统前端架构。

我们回顾一下所做的关键决策及其背后的考量：

  • 技术选型：选择了 Vue 3、Vite 和 TypeScript 的协同组合，以获得最佳的性能、开发体验和代码健壮性。
  • 项目结构：采用了模块化的目录结构，确保了代码的可预测性和长期可维护性。
  • 开发体验 ：通过 unplugin 系列插件，我们实现了组件和路由的自动化管理与类型安全，极大地提升了开发效率。
  • 状态管理：集成了官方推荐的 Pinia，并为其配置了持久化，以简洁的方式解决了复杂的全局状态管理问题。
  • API 层：构建了带拦截器和运行时验证的健壮 API 服务层，统一处理认证、错误和数据校验。
  • 数据管理：引入 TanStack Query，用声明式的方式管理服务器状态，自动处理缓存和同步，让代码更简洁、应用更流畅。
  • 代码质量：通过 ESLint、Prettier 和 Husky Git 钩子，建立了自动化的代码质量保障体系。
  • 性能优化：从代码分割、资源压缩到虚拟滚动，我们应用了多种策略来确保应用的极致性能。

现在，你拥有了一个坚实的基础。接下来的任务就是在这个强大的架构之上，填充具体的业务逻辑和页面，打造出功能完善的后台管理系统。希望这个教程能成为你专业前端开发道路上的一个重要里程碑。

相关推荐
JaceJufrog10 分钟前
VidGo-一个基于LLM的本地视频管理服务，集合字幕生成&工作流翻译&自定义合集&字幕编辑，导出
vue.js
console.log('npc')26 分钟前
前端性能优化，给录音播放的列表加个播放按键，点击之后再播放录音。减少页面的渲染录音文件数量过多导致加载缓慢
前端·javascript·vue.js·算法
努力往上爬de蜗牛1 小时前
文件下载 针对安卓系统
前端·javascript·vue.js
正义的大古1 小时前
OpenLayers地图交互 -- 章节十二：键盘平移交互详解
javascript·vue.js·openlayers
老华带你飞2 小时前
寝室快修|基于SprinBoot+vue的贵工程寝室快修小程序(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·贵工程寝室快修
正义的大古2 小时前
OpenLayers地图交互 -- 章节十一：拖拽文件交互详解
javascript·vue.js·microsoft·openlayers
艾小码2 小时前
告别复制粘贴！掌握这7个原则，让你的Vue组件复用性翻倍
前端·javascript·vue.js
知识分享小能手11 小时前
React学习教程，从入门到精通，React 前后端交互技术详解(29）
前端·javascript·vue.js·学习·react.js·前端框架·react
许___11 小时前
基于 @antv/x6 实现流程图
vue.js·antv/x6
热门推荐
01UV 工具安装与国内镜像源配置指南02GitHub 镜像站点03Spec-Kit 使用指南0446个Nano-banana 精选提示词，持续更新中05UV安装并设置国内源062025年华为杯研赛数学建模竞赛C题完整参考论文 （含模型、MATLAB和Python代码）07保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）08KGG转MP3工具|非KGM文件|解密音频09Linux下V2Ray安装配置指南10jdk21下载、安装（Windows、Linux、macOS）