vue3项目

新建文件夹，然后用vscode打开这个文件然后在终端新建vue文件

前提有nvm和node（npm安装东西记得在项目路径安装）
nvm list
nvm use 版本
node -v
vite前端构建工具
npm create vite@latest pzadmin --template vue
Vue
JavaScript
cd pzadmin
npm i
npm run dev
版本报错
nvm install --lts
nvm list
nvm use 新版本
npm run dev
运行成功
vue-router插件实现路由配置页面跳转
npm install vue-router@4
router导入 配置 创建实例 导出实例 导入实例 注册插件 路由出口
npm run dev
Element Plus组件库的引入
npm install element-plus --save
跟文档导入
用组件实现菜单并用路由修改网页路径
npm i less@4.2.0
npm run dev
组件递归实现 页面ased.vue获取组件然后通过引入{useRouter}获取router实例然后调用实例获取router/index.js定义的数据然后引入{reactive}来创建响应式数据对象
安装element plus的icon图标库
npm install @element-plus/icons-vue
弄header头
引入vuex状态管理库
npm install vuex@next --save
创建了store 定义模块 在模块里面定义state和mutations等 通过调用createStork创建store实例并对外暴露 然后找到vue实例的位置然后挂载（注册）
vuex实现菜单收起和伸展的效果还有tag显示高亮删除效果
登录注册校验
引用axios网络请求库
npm install axios
配置axios 写api接口 页面引用接口 调用接口
登录注册 保存返回信息和token
路由守卫
树形菜单
添加权限
表单页面列表 新增 修改
页数
全局组件
新增按钮

 

vue编译最后的去处

 

vue route的配置和使用

 

 

用递归组件来传递数据

 

 

vuex导入项目

 

 

引入axios之后的配置

 

 

路由守卫

 

 

 

 

在 JavaScript 的 Promise 链式调用中，.then(({ data }) => { ... }) 是解构赋值与箭头函数的结合使用，其核心作用是从异步操作结果中提取数据并处理。以下是详细解释：

---

一、代码结构解析

// 原代码片段
getCode({ tel: loginForm.userName }).then(({ data }) => {
    console.log(data, 'data')
    if (data.code === 10000) {
        ElMessage.success('发送成功')
    }
})

1. .then() 方法   说明后面都是异步

• ​​作用​​：处理 Promise 成功状态（fulfilled）时的回调
• ​​参数​​：接收一个回调函数，该函数接收 Promise 的解析结果（resolve 传递的值）

2. ({ data }) 解构赋值

• ​​语法​​：从对象中提取 data 属性并赋值给同名变量
• ​​等效写法​​：

  .then((response) => {
    const data = response.data
    // 后续逻辑
  })

3. => 箭头函数

• ​​语法​​：() => { ... } 定义匿名函数
• ​​特性​​：
  • 简化函数定义（省略 function 关键字）
  • 自动绑定外层 this 值（在 Promise 回调中通常不需要）

---

二、执行流程演示

sequenceDiagram
    participant A as 代码调用
    participant B as getCode 方法
    participant C as Promise对象
    participant D as .then回调

    A->>B: 调用getCode()
    B->>C: 返回Promise对象
    C-->>D: 解析成功，返回{ data: ... }
    D->>D: 解构出data属性
    D->>D: 执行回调逻辑

---

三、关键特性说明

特性	说明
​​解构赋值​​	直接从响应对象提取 data 属性，避免多层嵌套访问（如 response.data）
​​箭头函数​​	简化回调函数定义，保持 this 上下文（在 Vue 中尤其重要）
​​链式调用​​	.then() 可继续串联其他异步操作（如 .catch() 错误处理）

---

四、对比传统写法

1. 未使用解构赋值

.getCode(...).then((response) => {
    const data = response.data
    // 后续逻辑
})

2. 使用普通函数

.getCode(...).then(function(response) {
    const data = response.data
    // 后续逻辑
}.bind(this)) // 需要显式绑定this（如果需要）

---