Zigbee协议是一种无线通信协议，专门设计用于低功耗、低数据速率、短距离的无线通信应用。它基于IEEE 802.15.4标准，并添加了网络和应用层的协议，用于构建低功耗无线传感器网络和物联网设备。

以下是Zigbee协议的主要特点和组成部分：

1. 低功耗：Zigbee协议设计用于低功耗应用，节点可以进入睡眠状态以节省能量，并通过周期性唤醒来进行通信。
2. 网络拓扑：Zigbee支持多种网络拓扑结构，包括星型、网状和混合结构。其中，协调器（Coordinator）负责网络的管理和协调，路由器（Router）用于中继数据，终端设备（End Device）作为最低级的节点。
3. 自组织网络：Zigbee网络具有自组织和自愈能力，可动态调整网络拓扑结构，使网络具备容错性和鲁棒性。
4. 低数据速率：Zigbee协议适用于低数据速率的应用，通常在10-100 kbps的范围内。
5. 安全性：Zigbee协议提供多层安全机制，包括加密、认证和访问控制，以确保数据的安全性和网络的保密性。
6. 应用层协议：Zigbee协议定义了一系列的应用层协议，用于特定的应用领域，如家庭自动化、智能能源管理、工业控制等。

Zigbee协议广泛应用于物联网领域，包括智能家居、智能建筑、工业自动化、农业监测等。它提供了一种低成本、低功耗、可靠且安全的无线通信解决方案。

Zigbee网关

Zigbee网关是连接Zigbee无线通信网络与其他网络（如以太网、Wi-Fi等）的设备。它充当一个桥梁，通过与Zigbee设备建立无线连接，将Zigbee设备的数据转发到其他网络，或将其他网络的命令传递给Zigbee设备。Zigbee网关通常具备数据转换和协议转换的功能，以适应不同网络之间的数据交互需求。

Zigbee组播

Zigbee组播是Zigbee网络中的一种通信方式，用于一对多的数据传输。在Zigbee网络中，多个设备可以加入同一个组播组，并通过组播组地址进行通信。当一个设备发送数据到组播组地址时，所有加入该组播组的设备都可以接收到该数据。Zigbee组播可以用于广播命令、控制多个设备或进行集群通信等场景。

Zigbee节点

Zigbee节点是指加入Zigbee无线通信网络的设备。每个Zigbee节点可以是传感器、执行器、控制器或其他类型的设备。Zigbee节点通过与Zigbee协调器通信，参与组网、数据传输和网络管理等操作。每个Zigbee节点具有唯一的64位或16位的节点地址，用于在Zigbee网络中进行标识和通信。

Zigbee设备

Zigbee设备是指采用Zigbee通信协议的终端设备，如智能灯泡、智能插座、传感器等。这些设备可以通过Zigbee协议进行通信和互联，构建起一个Zigbee网络。在Zigbee网络中，虽然Zigbee节点和Zigbee设备通常可以视为相同的概念，但有一些微妙的区别：

1. 角色：Zigbee节点可以扮演不同的角色，例如协调器（Coordinator）、路由器（Router）和终端设备（End Device）。而Zigbee设备通常被视为终端设备，扮演终端设备角色。
2. 能力：Zigbee节点通常具有更复杂的功能和能力，可以作为网络的核心，负责管理网络的拓扑结构、路由选择等。而Zigbee设备通常具有更简单的功能，执行特定的任务或提供特定的服务。
3. 参与程度：Zigbee节点更强调对整个Zigbee网络的参与和管理，通常需要进行配置和设置。而Zigbee设备更强调作为终端设备的使用，通常不需要进行复杂的配置和管理。

需要注意的是，这些区别并不是严格的定义，而是对于Zigbee网络中的概念的一种常见理解。在实际应用中，节点和设备的概念可能会交叉使用，具体的区分可以根据具体的实际情况和需求来确定。

之前也算研究过”高效学习“这方面的书籍和课程，总的来说，无非就是意识和实践，意识是指明白以教代学是什么，实际上就是以终为始——先假设你想得到的结果，然后再倒逼我们从源头去规划应该怎么去做这个事情。如果你打算教别人东西，为了怕被别人问住，你不得不把相关知识都弄明白了，这无形之中，就给你施加了学习的压力，有处于你全面掌握这个知识点。实践，也就是毛泽东《实践论》里的观点，实践与理论反复验证，只有动手了人才会更加专注，也才会真正感受得到所要学的东西到底是什么？如果只停留在书籍上面，因为都是一些理论的东西，注意力很容易分散，学习效果大大折扣。

比如，如果要学习Flutter开发，我不会一字不漏地看完官网文档才动手敲代码，我会立马开始敲代码，是的，啥都不知道，完全凭感觉去做这个事情，然后呢，如果要实现一个按钮，我就去看按钮的部分，动手实现了，如果要实现一个弹窗，我就去看弹窗的部分，把弹窗实现了，一步一步，慢慢先把用到的东西学起来，在这个过程中，你一定是带着问题去查看文档的，这无形之中，就会加深了印象。

这个方法其实也是可以用在学校的，我就先做练习本或者试卷，根本就没学过这个知识，凭感觉去做，不知道就记下来，猜测应该是什么意思，然后再去找答案，再去收集，总结，再去做题。

我们通常都会说，人心不足蛇吞象，想什么都学，结果什么都学不会。这个道理没错，但是，人这一生本来就很短暂，不可能看完古今中外所有的书，学到所有的知识，我只打算享受过程，哪怕最后都是半桶水也没有关系，我希望自己能成为一个有点知识的人，一方面我无法忍受自身知识的匮乏和认知的浅薄；另一个方面，我想学很多很多东西，将来可以给村里小朋友教点东西也行，或者其他地方的，很小的时候，就已经想过，将来要在二楼弄个书房，全都堆满书，然后可以借给很多人看，再有个房间，学习乐器什么的。乡下教育，一直以来的问题，其实不一定都是经济，经济当然是很大的原因，但其实更多的是缺少引路人，引路人一般都是父母，父母的知识面，眼界，信息差其实很大程度决定了小朋友的命运，他们不知道外面世界是什么样子的，每个人看到的世界有好坏之分，但是世界自身没有好坏之分，你看到什么是你个人主观投射而成，这就是引路人的价值所在，怎么去给小朋友搭建一个符合他们自身个性的世界，让他们看得到，摸得着，至于他们怎么选择，就完全看他们自己了，但是现在的情况是，很多大人没有什么知识面和眼界，那么搭建能力也就无从说起了。

希望能以身践行，学习每一个技能，从实践总结成理论，将理论整理为教程。

怎么学

• 怎么减肥？
• 怎么增肌？
• 怎么跑步？
• 怎么游泳？
• 怎么早睡早起？
• 怎么学Vue开发？
• 怎么学Flutter开发？
• 怎么学Android开发？
• 怎么学Nodejs开发？
• 怎么学Java开发？
• 怎么学ToB产品设计
• 怎么学市场营销？
• 怎么学项目管理？
• 怎么学团队管理？
• 怎么徒步？
• 怎么学吉他？
• 怎么学钢琴？
• 怎么学英语？
• 怎么学普通话？
• 怎么学习画画？
• 怎么做饭？
• 怎么护肤？
• 怎么穿搭？
• 怎么阅读？
• 怎么写读书笔记？
• 怎么写电影日志？
• 怎么写诗词？
• 怎么创作歌词？
• 怎么写小说？
• 怎么写日记？
• 怎么摄影？
• 怎么创业？

我们在学习新技术的时候，习惯于将官方文档先过一遍，将全部的知识点全部掌握之后，再进行项目实战，但是因为太多都是概念的知识，学习过程枯燥乏味，很少有人能坚持下来。

所以我在想，怎么改变这种现象？以我个人的经验来说，过多深究官方文档，反而将自己陷入知识点的海洋之中，抓不到重点，往往水过鸭背，因为学了没有真正应用，不久之后就会忘记，我的意思是，不用看什么官方文档，以终为始，不用管自己到底会不会，直接上手开发项目，根据当前的需求，去学习对应的知识点，比如现在你要生成一个 Vue3.0 项目，那么你可能只需要去学一下Vite对应的知识点就好了，不用去学Vue3.0中父子组件应该怎么传值？比如你要学习开发一个登陆页面，那你就需要去看Element-Plus应该怎么引入？如果你所学并不能为当下所用，那将毫无意义。

其实在你一步一步完成真实项目的过程中，就一直在学习Vue3.0的知识点了。

本书计划将 Vue3.0 的知识过一遍，所以一些 Vue2.0 就需要的环境配置就不再过多说明，只会提到 Vue3.0 开发环境配置相关的内容，用到的技术有 Vue3.0+Vite+TypeScript+Element-Plus+Less 。

第2章 开发环境配置

2.1 新建项目

在 Vite官方文档 中，已经提供了很多预设的模板，这里因为只关注当前使用的技术，所以其他模板并不详细说明，使用 Vite 生成 Vue3.0 项目模板，如果是使用 JaveScript 进行开发，使用 vue ，如果是使用 TypeScript 进行开发，使用 vue-ts ，具体命令如下所示：

# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线：
# 如果是使用JaveScript开发，使用vue
npm init vite@latest my-vue-app -- --template vue
# 如果是使用JaveScript开发，使用vue-ts
npm init vite@latest my-vue-app -- --template vue-ts

打开chrome，就会显示项目模板的内容，如下图所示：

2.2 Chrome 91版本以上跨越问题

第3章 Vue3.0基础知识

3.1 Router

3.2 Comand

3.3 Porps

3.4 Emit

3.5 Vuex

3.5.1 computed

computed主要用于涉及到视图更新的处理，比如用户名username的更新，刷新后，右上角用户名没有赋值成功。在App.vue中已经添加了getUserInfo的网络请求，但是在右上角上赋值显示失败了。

使用方式如下所示，并没有触发视图更新：

const username = store.state.userInfo.username

触发视图更新：

improt { useStore } from 'vuex'
const store = useStore()
const username = computed(() => {
    return store.state.userInfo.username
})

userInfo敲定刷新后的获取策略

1. 通过在App.vue中重新发起请求获取用户信息

   问题：1.登录页面刷新因为没有token会报错，解决可以加上判断，但是代码很难看。

    2.每个组件中都需要watch监听usrInfo，很繁琐。
   

2. 登录后将用户信息保存在localStorage，刷新后通过vuex中获取

   问题: 1.如果更新了用户信息,刷新后获取的还是旧的数据

    2.在getters.ts中判断数据为空就重新发起网络请求，获取用户信息，但是因为异步的原因，数据并没有同步。
   

3. 登录后触发commit，然后在mutations.ts中，将用户信息保存到localStorage，刷新后通过vuex获取。

   问题: 1.需解决刷新后还是旧数据的问题，那就需要更新后，通过commit更新localStorage中的用户信息

4. 最终确定以方式3实现：

   使用方式：

   
    import { useStore } from 'vuex'
   
     let userInfo = store.getters.userInfo
   

在ZHeaderArea.vue中的 let userInfo = computed(() => { return store.state.userInfo })

改为getter获取就报错

### 3.5.2 watch

`watch`用于监听数据有变化触发，用于需要对数据进行操作时使用，比如个人中心，刷新后，使用`computed`方式`userInfo`没有成功获取，原因是`<template>`上并没有使用userInfo进行关联。

```tsx
     let userInfo = store.state.userInfo
     setUserInfoListValue(userInfo)
     watch(
         () => store.state.userInfo,
         (newValue, oldValue) => {
             userInfo = newValue
             setUserInfoListValue(userInfo)
         }
     )
     function setUserInfoListValue(info: any) {
         userInfoList.forEach((item: any) => {
             for (var key in info) {
                 if (item.prop === key) {
                     item.content = info[key] ? info[key] : '--'
                 }
             }
         })
     }

3.5 Vite.config.ts

3.5.1 如何设置路径别名

在项目中，因为组件或者ts文件引入，需要指定路径，如果文件层级很深，在开发中就会变得很繁琐，使用别名可以有效的解决这个问题。

第一步，需要在vite.config.ts文件中加上，如下所示：

const path = require('path')
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
  ......
})

第二步，需要在tsconfig.json文件中加上，如下所示：

{
  "compilerOptions": {
    
    ......
    
    "baseUrl": "./",
    "paths": {
      "@/*":["./src/*"]
    }
  }

此时，就可以在项目中使用@了。

第4章 搭建项目框架

4.1 Container布局容器

4.1 左侧菜单栏实现

1. 左侧菜单栏，实现过程中遇到了一个问题，那就是el-aside的宽度默认是300px，项目中需求是200px，这个不难，只需要在中设置width=“200px"就可以解决了，然后如果要实现展开和收缩，就需要设置，而它的宽度需要单独设置的 ，设置为200px，实现展开和收缩功能，收缩时宽度变为60px，但是还是200px，其实要实现联动，只需要动态设置width的值就好了，但是实现左侧菜单栏，我们通常是单独抽成组件来使用的，这样要联动就很麻烦，其实要实现也是可以的，使用props就好了，但我还是想着有没有更好的方法，有什么办法能够动态设置的宽度？

   因为去掉的宽度属性发现，实现的效果是很理想的，后来发现只需要设置width为auto即可

2. 左侧菜单栏，如何使用组件递归实现？

3. el-menu折叠时为何不显示二级菜单？

   当菜单栏折叠时，发现首页的图标没有显示，实现的代码如下所示：

   <el-menu-item v-if="!item.childrens" :index="`${String(index)}`" :route="item.index">
   	<template #title>
   		<div class="zws-aside-menu-item">
   			<i :class="`zws-aside-menu-item-iconSetting iconfont ${item.icon}`"></i>
   			<span>{{ item.title }}</span>
   		</div>
   	</template>
   </el-menu-item>
   

   之前的项目没有这个问题是因为不是使用collapse这个属性实现的，而是动态设置宽度，200和60切换达到的效果。查看官方文档的案例，发现这个写法，当折叠时，是显示图标的，如下所示：

   <el-menu-item index="4">
   	<i class="el-icon-setting"></i>
   	<span slot="title">导航四</span>
   </el-menu-item>
   

   然后按照官网的写法，将