Vue3全家桶 Antd — Vue3生态系统的Ant Design组件库（Antd）

Vue3全家桶 + Ant Design 技能总结 前言 本技能总结涵盖Vue3全家桶与Ant Design结合开发的核心知识，包括Vue3核心特性、TypeScript集成、Ant Design组件库使用、主题定制、网络请求、状态管理等内容，帮助开发者快速掌握Vue3+Ant Design项目开发技能。

第1章 Vue3核心特性 1.1 Composition API

1.2 响应式系统 1.2.1 ref vs reactive import { ref, reactive } from 'vue' // ref - 用于基本类型和对象 const count = ref(0) const user = ref({ name: '张三', age: 25 }) // reactive - 用于对象 const state = reactive({ count: 0, user: { name: '张三', age: 25 } }) // 访问方式 console.log(count.value) // ref需要.value console.log(state.count) // reactive直接访问

1.2.2 响应式API import { ref, reactive, shallowRef, readonly, toRef, toRefs } from 'vue' // shallowRef - 浅层响应式 const shallowState = shallowRef({ count: 0 }) // readonly - 只读响应式 const readonlyState = readonly(reactive({ count: 0 })) // toRef - 创建单个ref const state = reactive({ count: 0 }) const countRef = toRef(state, 'count') // toRefs - 创建多个ref const { count } = toRefs(state)

1.3 生命周期钩子 import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue' onBeforeMount(() => { console.log('组件挂载前') }) onMounted(() => { console.log('组件挂载完成') }) onBeforeUpdate(() => { console.log('组件更新前') }) onUpdated(() => { console.log('组件更新完成') }) onBeforeUnmount(() => { console.log('组件卸载前') }) onUnmounted(() => { console.log('组件卸载完成') })

第2章 TypeScript集成 2.1 组件类型定义 2.1.1 Props类型定义

2.1.2 Emits类型定义

2.1.3 组件暴露类型定义

2.2 路由类型定义 import { RouteRecordRaw } from 'vue-router' const routes: RouteRecordRaw[] = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/user/:id', name: 'User', component: () => import('@/views/User.vue'), props: true } ]

2.3 Pinia类型定义 import { defineStore } from 'pinia' import { ref, computed } from 'vue' interface User { id: number name: string email: string } export const useUserStore = defineStore('user', () => { const user = ref(null) const isLoggedIn = computed(() => !!user.value) const setUser = (userData: User) => { user.value = userData } const clearUser = () => { user.value = null } return { user, isLoggedIn, setUser, clearUser } })

第3章 Ant Design Vue组件库 3.1 基础组件使用

3.2 表单组件