sync from local backup

media/learn/courses/15/chapters/62.md

@@ -0,0 +1,49 @@
+# Vue 3 组合式 API
+
+## 学习目标
+- 理解 Options API vs Composition API
+- 掌握 setup 语法
+- 学会使用响应式 API
+
+## Composition API 简介
+
+Composition API 是 Vue 3 推荐的编写方式，使用函数组合替代选项式配置。
+
+## 基础用法
+
+```vue
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+
+function increment() {
+    count.value++
+}
+
+onMounted(() => {
+    console.log('组件已挂载')
+})
+</script>
+
+<template>
+    <button @click="increment">{{ count }} × 2 = {{ doubled }}</button>
+</template>
+```
+
+## 常用 API
+
+| API | 说明 |
+|-----|------|
+| `ref()` | 响应式变量 |
+| `reactive()` | 响应式对象 |
+| `computed()` | 计算属性 |
+| `watch()` | 监听器 |
+| `onMounted()` | 挂载后 |
+
+## 动手练习
+
+1. 使用 Composition API 实现计数器
+2. 创建待办事项列表
+3. 使用 watch 监听数据变化

media/learn/courses/15/chapters/63.md

@@ -0,0 +1,49 @@
+# TypeScript 基础
+
+## 学习目标
+- 理解 TypeScript 的优势
+- 掌握类型注解
+- 学会接口和泛型
+
+## TypeScript 简介
+
+TypeScript 是 JavaScript 的超集，添加了静态类型系统。
+
+## 类型注解
+
+```typescript
+let name: string = "Tom"
+let age: number = 25
+let isActive: boolean = true
+let hobbies: string[] = ["coding", "reading"]
+```
+
+## 接口
+
+```typescript
+interface User {
+    id: number
+    name: string
+    email?: string  // 可选属性
+}
+
+function printUser(user: User) {
+    console.log(user.name)
+}
+```
+
+## 泛型
+
+```typescript
+function identity<T>(arg: T): T {
+    return arg
+}
+
+const result = identity<string>("Hello")
+```
+
+## 动手练习
+
+1. 为变量添加类型注解
+2. 定义用户接口
+3. 使用泛型创建通用函数

media/learn/courses/15/chapters/64.md

@@ -0,0 +1,52 @@
+# Pinia 状态管理
+
+## 学习目标
+- 了解状态管理必要性
+- 掌握 Pinia 基本用法
+- 学会模块化管理
+
+## Pinia 简介
+
+Pinia 是 Vue 3 官方推荐的状态管理库，替代 Vuex。
+
+## 定义 Store
+
+```typescript
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+    state: () => ({
+        count: 0
+    }),
+    getters: {
+        doubled: (state) => state.count * 2
+    },
+    actions: {
+        increment() {
+            this.count++
+        }
+    }
+})
+```
+
+## 使用 Store
+
+```vue
+<script setup>
+import { useCounterStore } from '@/stores/counter'
+
+const counter = useCounterStore()
+</script>
+
+<template>
+    <button @click="counter.increment">
+        {{ counter.count }} × 2 = {{ counter.doubled }}
+    </button>
+</template>
+```
+
+## 动手练习
+
+1. 创建用户状态 Store
+2. 实现登录状态管理
+3. 使用持久化插件

media/learn/courses/15/chapters/65.md

@@ -0,0 +1,49 @@
+# Vue Router 路由
+
+## 学习目标
+- 掌握路由配置
+- 学会路由导航
+- 理解路由守卫
+
+## 路由配置
+
+```typescript
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        { path: '/', component: () => import('./Home.vue') },
+        { path: '/about', component: () => import('./About.vue') },
+        { path: '/user/:id', component: () => import('./User.vue') }
+    ]
+})
+```
+
+## 编程式导航
+
+```typescript
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+router.push('/about')
+router.push({ name: 'user', params: { id: '123' } })
+```
+
+## 路由守卫
+
+```typescript
+router.beforeEach((to, from, next) => {
+    if (to.meta.requiresAuth && !isLoggedIn()) {
+        next('/login')
+    } else {
+        next()
+    }
+})
+```
+
+## 动手练习
+
+1. 配置嵌套路由
+2. 实现面包屑导航
+4. 添加登录守卫

media/learn/courses/15/chapters/66.md

@@ -0,0 +1,39 @@
+# 项目实战：后台管理系统
+
+## 学习目标
+- 综合运用 Vue 3 + TypeScript
+- 掌握组件化开发
+- 学会项目结构设计
+
+## 技术栈
+
+- Vue 3 + TypeScript
+- Element Plus
+- Pinia
+- Vue Router
+- Axios
+
+## 项目结构
+
+```
+src/
+├── api/          # 接口请求
+├── components/   # 公共组件
+├── views/        # 页面视图
+├── stores/       # 状态管理
+├── router/       # 路由配置
+└── utils/        # 工具函数
+```
+
+## 核心功能
+
+1. 用户登录认证
+2. 权限管理
+3. 数据统计图表
+4. CRUD 操作
+
+## 动手练习
+
+1. 搭建项目脚手架
+2. 实现登录页面
+3. 开发用户管理模块