diff --git "a/src/\346\210\220\347\273\251\346\237\245\350\257\242.png" "b/src/\346\210\220\347\273\251\346\237\245\350\257\242.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5456e51e473b7e715a9bb1991f6c57e89d67ef52
Binary files /dev/null and "b/src/\346\210\220\347\273\251\346\237\245\350\257\242.png" differ
diff --git "a/\345\215\240\351\233\252\350\212\271/220260422-\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256\347\273\221\345\256\232.md" "b/\345\215\240\351\233\252\350\212\271/20260422-\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256\347\273\221\345\256\232.md"
similarity index 100%
rename from "\345\215\240\351\233\252\350\212\271/220260422-\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256\347\273\221\345\256\232.md"
rename to "\345\215\240\351\233\252\350\212\271/20260422-\345\223\215\345\272\224\345\274\217\346\225\260\346\215\256\347\273\221\345\256\232.md"
diff --git "a/\345\215\240\351\233\252\350\212\271/20260506-\347\273\203\344\271\240.md" "b/\345\215\240\351\233\252\350\212\271/20260506-\347\273\203\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6de1b49948ef687c9298dc06e3dfcea3b2d5412e
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260506-\347\273\203\344\271\240.md"
@@ -0,0 +1,327 @@
+# 练习
+
+```bash
+<script setup>
+import { computed,watch,ref,reactive } from 'vue'
+//1.1
+let message=ref('欢迎学习Vue3')
+//1.2
+let htmlContent=ref('<h2 style="color:red;">重要提示</h2><p>请认真完成练习</p>')
+//1.3
+let username1=ref('张三')
+//1.4
+let price=ref(29.9)
+let quantity=ref(3)
+//1.5
+let createTime=ref(Date.now())
+let formatDate=(timestamp)=>{
+    let date=new Date(timestamp)
+    let year=date.getFullYear()
+    let month=String(date.getMonth()+1).padStart(2,'0')
+    let day=String(date.getDate()).padStart(2,'0')
+    return `${year}-${month}-${day}`
+}
+//1.6
+let fullName=ref('vue3 framework')
+let upperFullName=computed(()=>{
+    return fullName.value.toUpperCase()
+})
+//2.1
+let isLoggedIn=ref(true)
+//2.2
+let score=ref(75)
+//2.3
+let isSubscribed=ref(false)
+//2.4
+let level=ref('D')
+//2.5
+let isAdmin=ref(true)
+let hasPermission=ref(true)
+
+
+// 3.1. 数组遍历
+let fruits = ['苹果', '香蕉', '橙子'];
+
+// 3.2. 带索引遍历
+let cities = ['北京', '上海', '广州', '深圳'];
+
+// 3.3. 对象属性遍历
+let user = { name: '李四', age: 20, major: '计算机' };
+
+// 3.4. 遍历对象数组（5个学生）
+let students = [
+  { id: 1, name: '张三', score: 90 },
+  { id: 2, name: '李四', score: 85 },
+  { id: 3, name: '王五', score: 95 },
+  { id: 4, name: '赵六', score: 88 },
+  { id: 5, name: '钱七', score: 92 },
+];
+
+// 3.5. 嵌套循环（分类 + 子项）
+let categories = [
+  {
+    name: '水果',
+    items: ['苹果', '香蕉'],
+  },
+  {
+    name: '电子产品',
+    items: ['手机', '电脑', '平板'],
+  },
+  {
+    name: '书籍',
+    items: ['Vue教程', 'JS高级'],
+  },
+];
+
+// 4.1. 动态链接
+let url = 'https://vuejs.org';
+
+// 4.2. 动态 class
+let textClass = 'highlight';
+
+// 4.3. 布尔属性
+let isReadonly = true;
+
+// 4.4. 对象语法 class
+let isActive = true;
+let hasError = false;
+
+// 4.5. 动态 style
+let fontColor = 'red';
+let fontSize = 24;
+
+
+//5.1
+let count=ref(0)
+let handleClick=()=>{
+    count.value++;
+};
+
+//5.2
+let message1 = ref('');
+
+let greet=()=>{
+    message1.value='Hello Vue!';
+};
+
+//5.3
+let msg=ref('');
+let say=(text)=>{
+    msg.value=text;
+};
+
+//5.4
+let formData=ref('');
+let handleSubmit=()=>{
+    console.log('表单提交的数据：',formData.value);
+    alert('提交成功！已在控制台打印数据');   
+};
+
+//5.5
+let inputValue = ref('');
+
+// 外层点击
+let outerClick = () => {
+  console.log('触发：外层区域被点击');
+};
+
+// 内层按钮点击（加了 .stop 不会冒泡到外层）
+let innerClick = () => {
+  console.log('触发：内层按钮被点击');
+};
+
+// 按下回车执行
+let submitInput = () => {
+  console.log('按下回车，输入内容：', inputValue.value);
+};
+
+//6.1
+let username=ref('')
+
+//6.2
+let agree=ref(false)
+
+//6.3
+let gender=ref('')
+
+//6.4
+let city=ref('')
+let cityMap={
+  bj:'北京',
+  sh:'上海',
+  gz:'广州'
+}
+
+//6.5
+let searchQuery=ref('')
+</script>
+
+<template>
+    <div id="app1">
+        <p v-text="message"></p>
+
+        <div v-html="htmlContent"></div>
+
+        <span>{{ username }}，您好！</span>
+
+        <p>商品总价:{{ price*quantity }}元</p>
+
+        <span>{{ formatDate(createTime) }}</span>
+
+        <div>{{ fullName.toUpperCase() }}</div>
+    </div>
+
+    <div id="app2">
+        <p v-if="isLoggedIn">您已登录</p>
+
+        <p v-if="score>=60">及格</p>
+        <p v-else>不及格</p>
+
+        <button v-show="!isSubscribed">订阅更新</button>
+
+        <div v-if="level==='A'">优秀</div>
+        <div v-else-if="level==='B'">良好</div>
+        <div v-else-if="level==='C'">及格</div>
+        <div v-else>需努力</div>
+
+        <div v-if="isAdmin && hasPermission">管理面板</div>
+    </div>
+
+    <div class="container">
+    <!-- 1. 数组遍历 -->
+    <h2>1. 数组遍历</h2>
+    <ul>
+      <li v-for="item in fruits" :key="item">{{ item }}</li>
+    </ul>
+
+    <!-- 2. 带索引遍历 -->
+    <h2>2. 带索引遍历</h2>
+    <div v-for="(city, index) in cities" :key="city">{{ index + 1 }}. {{ city }}</div>
+
+    <!-- 3. 对象属性遍历 -->
+    <h2>3. 对象属性遍历</h2>
+    <div v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</div>
+
+    <!-- 4. 遍历对象数组 -->
+    <h2>4. 遍历对象数组（表格）</h2>
+    <table border="1" cellpadding="5">
+      <tr>
+        <th>姓名</th>
+        <th>分数</th>
+      </tr>
+      <tr v-for="student in students" :key="student.id">
+        <td>{{ student.name }}</td>
+        <td>{{ student.score }}</td>
+      </tr>
+    </table>
+
+    <!-- 5. 嵌套循环 -->
+    <h2>5. 嵌套循环</h2>
+    <div v-for="category in categories" :key="category.name">
+      <h3>{{ category.name }}</h3>
+      <ul>
+        <li v-for="item in category.items" :key="item">{{ item }}</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="container">
+    <!-- 1. 动态 href -->
+    <h2>1. 动态链接</h2>
+    <a v-bind:href="url" target="_blank">访问链接</a>
+    <!-- 简写：<a :href="url"> -->
+
+    <!-- 2. 动态 class -->
+    <h2>2. 动态 Class</h2>
+    <p v-bind:class="textClass">这是一段文本</p>
+
+    <!-- 3. 布尔属性绑定（disabled）-->
+    <h2>3. 布尔属性（禁用输入框）</h2>
+    <input type="text" v-bind:disabled="isReadonly" placeholder="我是输入框" />
+    <button @click="isReadonly = !isReadonly">切换禁用状态</button>
+
+    <!-- 4. 对象语法绑定 class -->
+    <h2>4. 对象语法 Class</h2>
+    <div :class="{ active: isActive, 'text-danger': hasError }">动态Class</div>
+    <button @click="isActive = !isActive">切换 active</button>
+    <button @click="hasError = !hasError">切换 error</button>
+
+    <!-- 5. 动态 style 绑定 -->
+    <h2>5. 动态 Style</h2>
+    <div :style="{ color: fontColor, fontSize: fontSize + 'px' }">样式文本</div>
+  </div>
+
+
+  <div>
+    <!--1.点击事件-->
+    <h1>1.点击事件</h1>
+    <h2>点击次数：{{ count }}</h2>
+    <button v-on:click="handleClick">点击我</button>
+    <!--2.事件处理方法-->
+    <h1>2.事件处理方法</h1>
+    <button @click="greet">打招呼</button>
+    <p>{{ message1 }}</p>
+    <!--3.传递事件参数-->>
+    <h1>3.传递事件参数</h1>
+    <button @click="say('欢迎')">说欢迎</button>
+    <button @click="say('再见')">说再见</button>
+    <h3>{{ msg }}</h3>
+    <!--4. 修饰符 .prevent-->
+    <h1>4. 修饰符 .prevent</h1>
+    <form @submit.prevent="handleSubmit">
+        <input v-model="formData" />
+       <button type="submit">提交</button>
+   </form>
+   <!--5. 修饰符 .stop 和 .enter-->
+   <h1>5. 修饰符 .stop 和 .enter</h1>
+   <div>
+    <!-- 1. .stop 阻止事件冒泡 -->
+    <h3>1. 阻止冒泡 (.stop)</h3>
+    <div 
+      @click="outerClick" 
+      style="padding: 30px; background: #eee; margin: 10px 0;"
+    >
+      外层区域（点击会触发 outerClick）
+      <button @click.stop="innerClick">点击我（仅触发 innerClick）</button>
+    </div>
+
+    <!-- 2. .enter 回车键监听 -->
+    <h3>2. 回车键 (.enter)</h3>
+    <input 
+      v-model="inputValue"
+      @keyup.enter="submitInput" 
+      placeholder="输入内容按回车"
+      style="padding: 6px; margin: 10px 0;"
+    />
+  </div>
+  </div>
+  <div>
+    <!--1. 文本输入框-->
+    <h1>1. 文本输入框</h1>
+    <input v-model="username1" placeholder="请输入用户名" />
+    <p>您好，{{ username1 }}</p>
+    <!--2.复选框-->
+    <h1>2.复选框</h1>
+    <input type="checkbox" id="agree" v-model="agree"/>同意协议
+    <label for="agree">同意协议</label>
+    <button :disabled="!agree">注册</button>
+    <!--3.单选按钮-->
+    <h1>3.单选按钮</h1>
+    <input type="radio" v-model="gender" value="男" /> 男
+    <input type="radio" v-model="gender" value="女" /> 女
+    <p>选择结果：{{ gender }}</p>
+    <!--4.下拉选择框-->
+    <h1>4.下拉选择框</h1>
+    <select v-model="city">
+      <option value="">请选择城市</option>
+      <option value="bj">北京</option>
+      <option value="sh">上海</option>
+      <option value="gz">广州</option>
+    </select>
+    <!--5.修饰符 .lazy-->
+    <h1>5.修饰符 .lazy</h1>
+    <input v-model.lazy="searchQuery" />
+    <p>搜索内容：{{ searchQuery }}</p>
+  </div>
+</template>
+```
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260507-\347\273\204\344\273\266.md" "b/\345\215\240\351\233\252\350\212\271/20260507-\347\273\204\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c6370114048cf8b4c415c6eeb4e7c4d007bc6eb2
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260507-\347\273\204\344\273\266.md"
@@ -0,0 +1,15 @@
+# 笔记
+
+- 组件的定义
+  - 单文件组件，一个vue文件就是一个组件
+  - 其中必须包含tempate标签
+- 组件的注册
+  - 局部注册
+    - 在某个指定的组件中注册，叫局部注册，局部注册的组件只能用在当前组件，而不无法用在其他组件中
+    - 在组件式写法中，引入组件即可，注册可省略
+  - 全局注册
+    - 在main.js中注册，然后在全局的组件中都可以直接使用，即全局注册
+    - 只要注册一次即可
+- 组件的使用
+  - 帕斯卡使用方式`<AboutMe></AboutMe>`
+  - 短线使用方式`<about-me></about-me>`
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260508-\347\273\204\344\273\266\344\274\240\351\200\222\345\222\214\346\217\222\346\247\275.md" "b/\345\215\240\351\233\252\350\212\271/20260508-\347\273\204\344\273\266\344\274\240\351\200\222\345\222\214\346\217\222\346\247\275.md"
new file mode 100644
index 0000000000000000000000000000000000000000..05ddcab731f00d98dc983208822ee8a0511403bb
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260508-\347\273\204\344\273\266\344\274\240\351\200\222\345\222\214\346\217\222\346\247\275.md"
@@ -0,0 +1,88 @@
+# 笔记
+
+父子数据传递
+父向子传递数据 -子组件中定义数据 -数组形式
+-const props=defineProps(['dd1','dd2']) -对象形式
+-const props=defineprops（{dd1:数据类型，dd2:数据类型} -父组件中使用数据 -`<子组件名称 dd1="传入的数据或变量名称" dd2="传入的数据或变量名称"></子组件名称>`
+
+插槽（Slot）
+是子组件留给父组件的占位符。
+默认插槽：只有一个坑，父组件直接往里塞内容。
+具名插槽：有多个带名字的坑（如 <slot name="header">），父组件通过 #名字 精准投放内容。
+作用域插槽：子组件在坑里绑定了数据，父组件在填内容时可以直接使用这些数据（常用于列表自定义渲染）
+
+## 项目
+
+二、条件渲染 4. v-else-if 多条件
+
+```
+<script setup>
+ import {ref} from 'vue';
+
+const level=ref('A')
+</script>
+
+<template>
+<div v-if="level === 'A'">优秀</div>
+<div v-else-if="level === 'B'">良好</div>
+<div v-else-if="level === 'C'">及格</div>
+<div v-else>需努力</div>
+</template>
+```
+
+5. 条件组合渲染
+
+```
+<script setup>
+ import {ref} from 'vue';
+
+const isAdmin=ref(true)
+const hasPermission=ref(true)
+</script>
+
+<template>
+<div v-if="isAdmin && hasPermission">管理面板</div>
+</template>
+```
+
+6. 权限管理系统界面
+
+```
+<script setup>
+ import {ref} from 'vue';
+
+const role=ref('admin')
+</script>
+
+<template>
+<div id="app">
+  <div class="user-info">
+    <p>当前用户：{{ username }}</p>
+    <p>角色：{{ role }}</p>
+  </div>
+
+  <div v-if="role === 'admin'" class="admin-panel">
+    <h3>管理员面板</h3>
+    <button>用户管理</button>
+    <button>系统设置</button>
+    <button>数据统计</button>
+  </div>
+
+  <div v-else-if="role === 'editor'" class="editor-panel">
+    <h3>编辑面板</h3>
+    <button>文章管理</button>
+    <button>草稿箱</button>
+  </div>
+
+  <div v-else class="user-panel">
+    <h3>用户面板</h3>
+    <p>欢迎阅读文章</p>
+  </div>
+
+  <div v-if="!isLoggedIn" class="login-prompt">
+    <p>请登录后查看更多内容</p>
+    <button>登录</button>
+  </div>
+</div>
+</template>
+```
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260511-\346\217\222\346\247\275\345\222\214\347\273\204\344\273\266.md" "b/\345\215\240\351\233\252\350\212\271/20260511-\346\217\222\346\247\275\345\222\214\347\273\204\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..323ad031de6b4e0905e43e129057839ad72036c2
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260511-\346\217\222\346\247\275\345\222\214\347\273\204\344\273\266.md"
@@ -0,0 +1,11 @@
+# 笔记
+- 插槽的定义
+    - 在父组件中将一些内容插入自定义组件开始和结束标签之间（即插槽内容），子组件将这个部分的内容放在指定的位置（插槽），这样一种做法叫插槽
+- 插槽的分类
+    - 默认插槽
+        - 在定义默认插槽时，其名称为default
+    - 具名插槽
+        - 组件有多个插槽位置时，用具名插槽区分
+    - 作用域插槽
+        - 有时子组件需要将自己的数据传回给父组件的插槽内容使用
+- 使用slotdemo这个子组件时，并且将子组件开始和结束标签之间的内容（插槽内容），插入进名为（在子组件命名的名称）的插槽的那个位置
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260513-\345\212\250\346\200\201\347\273\204\344\273\266.md" "b/\345\215\240\351\233\252\350\212\271/20260513-\345\212\250\346\200\201\347\273\204\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c19366cbd54a003acc298360e601e471d3fde2d0
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260513-\345\212\250\346\200\201\347\273\204\344\273\266.md"
@@ -0,0 +1,22 @@
+# 笔记
+## 动态组件
+- 动态组件最关键的代码`<component :is="currentComponent" />`
+- 计算属性：`const currentComponent = computed(() => componentMap[currentTab.value])`
+## 生命周期
+- 组件挂在前：`Vue.onBeforeMount(()=>{})`
+- 组件挂在后：`Vue.onMounted(()=>{})`
+## 路由
+- 一个对象对应一个路由(即每一条路由，就是一个配置对象)
+- 普通路由：无子页面，单独一个路径对应一个页面
+- 嵌套路由：页面里包含子页面，父路由对象里用 children 包裹子路由对象
+- `routes:[
+{
+    path：'/'
+    component:Home,
+},
+{
+    path：'/aboutme'
+    component:() => import(@/components/AboutMe.Vue),
+}
+]`
+- 组件点位符会将路由匹配到的组件显示在`<RouterView></RouterView>`
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260514-\350\267\257\347\224\261.md" "b/\345\215\240\351\233\252\350\212\271/20260514-\350\267\257\347\224\261.md"
new file mode 100644
index 0000000000000000000000000000000000000000..158c4533eebabb781bf4a28d56e9335f070c9ae7
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260514-\350\267\257\347\224\261.md"
@@ -0,0 +1,25 @@
+# 笔记
+- 安装路由的依赖：`yarn add vue-router`
+## Vue Router 基础配置（三步）
+### 第一步：创建路由配置文件
+**新建 `src/router/index.js`**
+```// 4. 创建路由实例
+const router = createRouter({
+  history: createWebHistory(), // HTML5 history模式（无#）
+  routes // 路由表
+})
+```
+### 第二步：入口文件挂载路由
+**修改 `src/main.js`**
+```
+app.use(router) // 注册路由插件（核心步骤）
+```
+### 第三步：页面中配置导航 + 路由出口
+**修改 `src/App.vue`**
+```
+    <!-- 2. 路由出口：匹配的组件会渲染在这里 -->
+    <RouterView />
+```
+
+- | `<RouterLink to="路径">` | 页面导航，阻止默认刷新 | 升级版`<a>`标签 |
+- | `<RouterView />` | 路由占位符，渲染匹配组件 | 页面内容展示区域 |
diff --git "a/\345\215\240\351\233\252\350\212\271/20260515-\345\212\250\346\200\201\350\267\257\347\224\261.md" "b/\345\215\240\351\233\252\350\212\271/20260515-\345\212\250\346\200\201\350\267\257\347\224\261.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c25ef4e30ce6bdfaf36dc20453b2d673d24cf41f
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260515-\345\212\250\346\200\201\350\267\257\347\224\261.md"
@@ -0,0 +1,47 @@
+# 笔记
+
+## 动态路由它允许我们在路由路径中定义一个“占位符”，来匹配结构相同但参数不同的URL
+
+## 对于动态路由
+
+    ```bash
+    // src/router/index.js
+    const routes = [
+    {
+        path: '/product/:id', // :id 就是动态参数，可以匹配 /product/1, /product/abc 等
+        name: 'ProductDetail', // 推荐给路由命名，方便后续跳转
+        component: () => import('@/views/ProductDetail.vue'), // 懒加载组件
+    },
+    // ... 其他路由
+    ]
+    ```
+
+## 用useRoute()获取URL中的参数来加载对应的数据
+
+## 跳转到动态路由页面的两种方式
+
+### 声明式导航 (<router-link>)
+
+    - 在模板中使用 <router-link> 组件，通过 :to 属性绑定目标路径。
+
+### 编程式导航 (useRouter())
+
+    - 在组件的脚本逻辑中，通过 useRouter() 钩子获取路由实例，调用 push 方法进行跳转。
+
+## 我们还可以使用 ?key=value 格式的查询参数。它通常用于传递非必需的、过滤或排序相关的信息。
+
+### 传递：在跳转时添加 query 属性。
+
+    ```bash
+    router.push({
+    path: '/products',
+    query: { category: 'earphone', sort: 'price', page: 1 }
+    })
+    ```
+
+### 获取：通过 route.query 对象获取。
+
+    ```bash
+    const category = route.query.category // 'earphone'
+    const sort = route.query.sort         // 'price'
+    ```
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260518-\345\265\214\345\245\227\350\267\257\347\224\261.md" "b/\345\215\240\351\233\252\350\212\271/20260518-\345\265\214\345\245\227\350\267\257\347\224\261.md"
new file mode 100644
index 0000000000000000000000000000000000000000..75245cb87972df491ea2869860a3ca2e62067caa
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260518-\345\265\214\345\245\227\350\267\257\347\224\261.md"
@@ -0,0 +1,11 @@
+# 笔记
+- 用 children 配置子路由
+- 子路由 path 不加 /，自动拼接父路由
+- **父组件必须放 `<RouterView>` 作为子路由出口**
+- 父路由组件（布局外壳）
+    - 必须包含：固定布局 + `<RouterView>`
+- 子路由组件
+    - 普通页面组件，会渲染到父组件的 `<RouterView>` 中。
+- redirect 实现默认页面 / 跳转
+- /:pathMatch(.*)* 做 404 兜底
+- 必须加`<RouterView>`作为出口；
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260520-\345\257\274\350\210\252\345\256\210\346\212\244.md" "b/\345\215\240\351\233\252\350\212\271/20260520-\345\257\274\350\210\252\345\256\210\346\212\244.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ab9407eaa70659bb2a4c74769c46f54295b25ea1
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260520-\345\257\274\350\210\252\345\256\210\346\212\244.md"
@@ -0,0 +1,26 @@
+# 笔记
+- 全局前置守卫
+```// router/index.js
+router.beforeEach((to, from) => {
+  // to：目标路由
+  // from：来源路由
+    return ture
+})
+```
+- 五种用法
+    - return true // 正常放行                 
+    - return '/login' // 跳指定路径
+    - return { name: 'Login' } // 跳命名路由
+    - return false // 取消跳转，留在当前页
+    - return { path: '/login', query: { redirect: to.fullPath } }
+- 路由跳转触发顺序：
+    - beforeEach 全局前置
+    - beforeEnter 路由独享
+    - onBeforeRouteEnter 组件内进入
+    - beforeResolve 全局解析
+    - 路由正式跳转
+    - afterEach 全局后置
+- 权限判断写beforeEach，页面标记用meta
+- 未登录存redirect，登录成功原路返回
+- 跳转后操作统一写afterEach
+- 懒加载()=>import优化首页加载速度
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260521-\347\212\266\346\200\201\347\256\241\347\220\206\347\254\224\350\256\260.md" "b/\345\215\240\351\233\252\350\212\271/20260521-\347\212\266\346\200\201\347\256\241\347\220\206\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ca37ba757316bc3126ac2e9dd4c00f0aa32340f7
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260521-\347\212\266\346\200\201\347\256\241\347\220\206\347\254\224\350\256\260.md"
@@ -0,0 +1,39 @@
+# 笔记
+- 跨组件共享数据
+    - 父组件=>(Props)=>子组件
+    - 子组件=>(Emit)=>父组件
+- 安装：`yarn add pinia`
+- 全局注册（main.js）
+```
+import { createPinia } from 'pinia'
+app.use(createPinia())
+```
+- Pinia 的 Store 包含三大核心部分:
+    - state：ref/reactive，存储响应式共享数据
+    - getters：computed，派生数据（计算属性，带缓存）
+    - actions：普通函数，修改 state 的方法，支持异步
+- 创建与使用 Store
+    - 目录：src/stores/xxx.js（按功能命名）
+    - 导出函数：useXxxStore（命名约定）
+- 语法：
+```
+export const useCartStore = defineStore('唯一标识', () => {
+  // 1. state：响应式数据,状态数据
+  const items = ref([])
+  // 2. getters：计算属性
+  const totalCount = computed(()=>{})
+  // 3. actions：修改数据的方法
+  function addItem(){}
+
+  return { items, totalCount, addItem }
+})
+```
+- 组件中使用:在xxx.vue里面导入并获取 Store 实例
+```
+import { useCartStore } from '@/stores/cart'
+const cartStore = useCartStore()
+```
+1. 读取数据：直接使用属性 
+2. 修改数据：调用 action 方法
+- Props/Emit 只适合父子通信，跨组件用Pinia
+- 三大核心：state(数据)、getters(计算)、actions(方法)
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260522-\347\275\221\347\273\234\350\257\267\346\261\202Axios\344\270\216\350\257\267\346\261\202\345\260\201\350\243\205\346\213\246\346\210\252\345\231\250.md" "b/\345\215\240\351\233\252\350\212\271/20260522-\347\275\221\347\273\234\350\257\267\346\261\202Axios\344\270\216\350\257\267\346\261\202\345\260\201\350\243\205\346\213\246\346\210\252\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f77fa79c27b8f1a761f6a67115544ca09a34b36b
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260522-\347\275\221\347\273\234\350\257\267\346\261\202Axios\344\270\216\350\257\267\346\261\202\345\260\201\350\243\205\346\213\246\346\210\252\345\231\250.md"
@@ -0,0 +1,32 @@
+# 笔记
+## axios的安装
+- `yarn add axios`
+## axios的包装为request请求工具
+- 创建实例，统一配置地址
+- 引入axios
+- `export const request-axios.create({baseUrl:'http://localhost:3000/api',timeout:1000})`
+- 配置请求拦截器和响应拦截器
+```
+// 请求拦截
+request.interceptors.request.use(config => {
+  const token = localStorage.getItem('token')
+  token && (config.headers.Authorization = `Bearer ${token}`)
+  return config
+})
+// 响应拦截
+request.interceptors.response.use(
+  res => res.data,
+  err => {
+    if(err.response?.status === 401) localStorage.removeItem('token')
+    return Promise.reject(err)
+  }
+)
+```
+## request请求工具的使用
+- 引入工具库
+- 搭配async/await处理请求状态
+- `await request.get('/products')`
+## 要点区分
+- GET 传参：使用params配置项携带参数
+- POST 传参：直接传入请求体对象
+- 封装后直接拿到后端原始数据，无需额外取.data
\ No newline at end of file
diff --git "a/\345\215\240\351\233\252\350\212\271/20260525-Mock\346\225\260\346\215\256" "b/\345\215\240\351\233\252\350\212\271/20260525-Mock\346\225\260\346\215\256"
new file mode 100644
index 0000000000000000000000000000000000000000..0076abe8db7ddab8f2b495cdc9e2e8f35a8a6aa5
--- /dev/null
+++ "b/\345\215\240\351\233\252\350\212\271/20260525-Mock\346\225\260\346\215\256"
@@ -0,0 +1,32 @@
+# 笔记
+
+- 安装依赖:`yarn add vite-plugin-mock mockjs -D`
+- MockJS 常用随机占位符
+    - @cname	中文姓名
+    - @integer(min,max)	区间整数
+    - @float	小数
+    - @phone/@email	手机号、邮箱
+    - @date/@datetime	日期时间
+    - @image	占位图片
+    - @ctitle	中文标题
+- 核心模板语法
+    - `'list|10'`:[] 生成 10 条数组数据
+    - `'id|+1'`:1 数据自增 ID
+    - `'key|1'`:[数组] 随机选取数组一项
+    - num|区间:0 生成区间随机数
+- 接口基础配置
+    - url：请求地址
+    - method：请求方式 get/post/put/delete
+    - response：接口返回逻辑
+- 数据常用操作
+1. 查询：find、filter 筛选
+2. 新增：push 追加数组
+3. 修改：下标替换更新数据
+4. 删除：splice 移除数组元素
+- 统一返回格式
+```
+{
+  code:状态码,
+  message:提示信息,
+  data:业务数据
+}
\ No newline at end of file