所以，使用相较于国内前沿的工具，无形之中就像是打了信息差，在各方面都会比别人领先一些，可能你和别人是同一个任务，但是，你的效率和产出都会比别人好上很多，而这仅仅是因为工具的不同而已，绝无其他。

AI的发展是极为迅速的，这个都是显而易见的，从2023年，开始有这种对话式的问答交流，获取想要的资讯，或者说让AI帮忙完成一些文本上的修改任务。

那时文言一心还没有上线，自己看到一些网站提供了这种功能，然后180元大洋买断了，结果时不时就网页打不开，好像一段时间，就在换域名。现在想起来，当时这种平台，自己好像也没有用来干嘛，无非就是翻译一篇短文、检查下写的文章的错别字等，后来，文言一心上线了，kimi，豆包等都纷纷出现，然后，注意力就转移了，这个买断的平台就没再去打开过了。

在使用AI的过程中，但印象中，较为深刻的，还是第一次知道和使用 Deepseek ，看到那个思考过程，极为惊艳。在 2025 年年初爆火，后来，只是后来人多了之后，总是因为使用人数太多，服务器资源不足，每次要用一下，经常是没有成功的，这是其一，第二个原因，就是人多了之后，数据被污染得太多了，回答的质量直线下降。然后，转到了豆包AI。

公司的微信文章，也只是根据公开的平台资料，让它按我提供的模板生成，这部分的工作，之前预估是两天的工作量，我半天就搞定了。在我看来，实在是没有什么必要深究一字一句，只要把表达的东西，传达到位，以及不要显得太过于AI味，就可以了，时间更应该花在高价值上的事情。

第一次使用超能模式，就知道这个又升级了，这个超能模式，可以抓取平台，只要你提供账号和密码，完全可以帮你做平台系统的测试，当时我第一次使用，都惊呆了。

后来，我就尝试让它登录公网的平台，让它对每个功能都测试，把暴露的问题，整理成表格给我，我在逐一检查，是否真实有效。

可以说，豆包是我用过的相对满意的一款AI工具了，至少2025年是这样的。可以说，为我的事情，提供了很大的帮助，但是，这一些，都在2026年爆火之后，戛然而止。

现在的问题是，使用超能模式，经常被告知当前功能使用爆火，要等几分钟才行。我是没有那么多耐心的，偶尔一两次才行，多了之后，可能要找替代品了。

恰逢和朋友交流最近基于AI开发的一些事情，说到很多公司都完全是面向AI开发了，大家都称之为“氛围编程”，就是不适应代码交流了，直接就是自然语言，把需求描述清楚，让AI完成项目的代码开发。

而选择的则是Google提供的IDE工具Google Antigravity，中文名是反重力，完全就是一键生成全部的代码，还自行调试，编译，运行，出现问题，还自行修复，就是到你手上的时候，已经成品了。

我想起之前使用 dev0 工具，尝试开发一键发文的工具，就是一篇文章，可以同时发布到不同的平台，比如微信公众号、掘金、博客园等，当时，用起来觉得很一般，以为这个方式还不够成熟，接着，也听说豆包提供的TACE插件，都以为，只是能局部支持，而不是整个项目都全部提供，就在这块上面，没有多去关注。

但是，真正使用起Google Antigravity之后，我心里只觉得，程序员被替代，真的不是痴人说梦。真的，这个时代真的要来了。

真的，完全可以使用自然语言完成整个项目的代码开发，我是不会Java后端开发的，但是，不影响我把之前在 dev0 工具开发的项目，我直接把项目在Google Antigravity打开，然后，让它根据需求，把这个项目重构，重构后的项目，真的是删除很多错误的代码，错误的功能，错误的编程语言选择，比如之前的前端代码里，有.vue文件的，又有.rect，显得不伦不类的，这次就完全重构，完全基于Vue3框架来开发。

接着，Java后端的代码也重构，搭配前端项目一起，把项目的架构都梳理清楚了。然后，项目也运行成功了。

我知道，真的太让我惊叹了。

如果我要创业，完全可以几个人组成小公司，完全基于这个Google Antigravity来开发项目，至于代码泄漏等问题，小公司完全就是利益至上，先赚到钱再说，管你什么核心技术泄漏，让Google去爬取了。

这一点大公司完全是不能做的，就是AI这些走的第三方的服务器，他们肯定是先读取到你项目的全部代码，才能给你提供建议，而这个过程，意味着你项目的全部源码，都被第三方公司获取了，这个就是代码泄漏风险，这也是这个氛围编程，无法那么快推进的原因。

如果你要私有化部署的话，成本是一方面，再者，你成本再高，能比大模型母公司高吗？花的钱越多，意味着功能越强大，如果投入钱搞私有化部署，效果和公网提供的一对比，心里落差极大，这种情况下，真的能坚持使用私有化部署的大模型吗？估计真的忍不了一点。

当前ini 帮我处理一个因为网络代理，导致在 Mac 电脑上使用VSCode 访问Ubuntu系统的工具，一直失败的问题。

然后，各种权限都给它了，就一直执行脚本处理，直到解决了为止。类似就是龙虾这个托管电脑。

可以说，AI工具，用得比较多的是豆包、deekseep、kmini、纳米AI，这些或多或少，都使用过，频次较高，其他的就不提及了。

只能说AI会发展越来越快，我始终相信，国内的AI工具迟早有一天会超过国外，但是，不是现在，现在来看，还是有很大的差距的，所以，我的看法是，如果可以，真的要赶紧用上Google Genmini和 ChatGPT，真的最少要比国内的AI工具，至少超半年以上。

很多编程的问题，让豆包和Deekseep排查的时候，明明提供的是同一份信息，但是得出的结果千差万别，Gmini 直接指出了问题出在哪里，一招就命中要害，但是豆包、deekseep提供的方案还是差的太多太多了。

我的三观真的刷新了，我第一次见到，给出的答案，是如此直接而有效。

正是在使用 Gmini 的这一段时间，我反复喂给它我的全部信息，让它给我诊断，以及提供发展路径，很多东西说的还是很有道理的。而且，少了很多献媚的措词，至少，让我发现了一个快十年来，一直被我忽视的一个特别主要的一个点，这个点就是所有问题的根源，而我一直以来，都没有注意到。

打一点这种信息差和时间差，你会比国内没有用这款AI工具的，远超半年甚至一年以上，效果更高，掌握的信息更为准确，何乐而不为。

基于 Oracle VM VirtualBox 虚拟机安装的 Ubuntu 系统，主要用于 C++ 嵌入式项目开发，最开始只是分配了 40G 硬盘内存。现在项目分支过多，加上项目一些插件、依赖库，导致现在系统硬盘内存不够了，经常提示只剩 1G 内存。想到一直这样下去也不是办法，只能先看下怎么清理大文件，然后，再怎么给 Ubuntu 系统扩容。

2. 使用 baobab 工具检索大文件

在 Ubuntu 系统终端，使用以下命令安装 Baobab 工具并打开：

// 安装
sudo apt install baobab -y
// 启动
baobab

Baobab 会扫描分区，然后通过颜色，来区分哪些文件是占内存最大的，并且排在最前，这个时候，你就可以看下一些比如.cache、.vscode、.lingma等占空间很大的文件，就可以考虑清空了。

但这只是用来优化一下内存而已，真正起到作用，还是要 VirtualBox 虚拟机扩容。

3. 在 VirtualBox 虚拟机扩容至 80G

考虑到办公电脑一般硬盘都很大的，所以，多分配一些内存问题不大，关闭虚拟机之后，在 管理 - 工具 - 虚拟介质管理 - 属性，然后把下面的滑块，滑到 80G 的大小位置。

4. 在 Ubuntu 系统安装 gparted 图形化分区工具

在虚拟机上扩容到 80G 后，到 Ubuntu 系统里，你就会发现，还是会提示剩余空间不足的问题，原因是虽然扩容了，但是这个空间没有真正使用起来，就需要安装 gparted 分区工具来处理：

sudo apt update
sudo apt install gparted

然后，在应用列表找到 gparted 工具，打开，就能看到 /dev/sda2 有 40G，然后 /dev/sda5 有 40G，这个类似一个父文件和子文件的结构，意思就是 sda2 是包裹着 sda5 的，要增大 sda5 的内存，就先增大 sda2 的内存，选中 /dev/sda2，然后右键，选择 “调整大小 / 移动”，然后把滑块拖动到 80G，接着也把 sda5 拖到 80G，然后点一下操作栏上的 “√”，这样内存扩容就生效了。

这个时候，你可以再看下，主目录下就会显示，还剩余 50G 的内存空间，一部分是清理了缓存，另一部分就是我们刚新增的 40G 空间。

说到 AI 是否会取代程序员，我的答案是会，但又不完全会。

在我看来，所谓的取代，其实是要求程序员提升自身能力，向更高层次发展，将比如某个通用函数的封装、代码漏洞检查这类已熟练掌握的工作交给 AI，自己则转变为发布和验收的角色，也就是按照自己的想法下达任务，然后验收任务，形成一个闭环。

AI 在实际应用中确实面临一些问题，以下是我想到的几点：

1. 怎样确保 AI 能完全依照你的想法，实现你想要的效果？
2. 如何判断 AI 生成的内容是否正确？
3. 何时该使用 AI，何时不该用？

就第一个问题而言，未来很可能会演变成面向 AI 编程。你看，现在都已经有 “Prompt 工程师” 这个职位了，他们的职责就是做好与 AI 的沟通工作，思考如何用精准的描述告诉 AI 该做什么。

回顾人与计算器的交互历史，从最初使用 0 和 1 二进制进行沟通，到后来发展出 C/C++/Java 等高级语言，这些都是对 0 和 1 的上层封装。如今与 AI 交互也是同理，只不过现在我们是用现实中的自然语言与它交流。

至于第二个问题，关键在于你自己得懂，也就是说不可能完全依赖 AI 而不学习新知识。不然，你怎么判断 AI 生成的内容是否正确呢？

对于第三个问题，何时使用 AI 就需要进行评估判断了。有些事情看似用 AI 能很快完成，但实际使用时，因输入指令不够具体准确，产出结果可能天差地别，常需多次调整才能满意，自己动手做或许更快，还免得在与 AI 的磨合中浪费时间、徒增郁闷。

除此之外，很多人都提到，既然 AI 能生成一整个项目的代码，那还要程序员干什么呢？

其实，AI 生成的只是项目第一版需求的代码，可项目又不是一锤子买卖，后续还需要不断迭代和更新。这时候该怎么办？全都交给 AI 处理吗？

理论上似乎是可行的，但就我使用 dev0、豆包和阿里云 AI 等工具开发网页的体验来看，效率实在不高。每次修改一点点内容，AI 都要重新生成全部代码，这个过程极其漫长，项目越大，等待的时间就越久。而且，如果输入的指令不够详细具体，得到的结果相差甚远，还得不断调整到满意为止。有这时间，我自己早就把代码改好了。所以在这种情况下，除非你的 prompt 能力特别强，否则真的是对 AI 又爱又恨。不过话说回来，人与人之间沟通都可能出现信息失真，更何况是与机器沟通呢？面对全是 AI 生成的代码，你真的有足够的信心直接部署到生产环境吗？

要是让 AI 生成第一版需求代码，后续的迭代和维护交给程序员呢？

这同样存在问题，因为 AI 生成的代码大概率不符合团队的代码规范，程序员得花时间去熟悉。而且团队可能已经有封装好的组件库，AI 生成的代码却无法复用这些组件，而是自行实现相同功能，这在迭代和维护时反而重复造轮子了。只是一个项目还好，要是所有项目都是如此，那组件库就形同虚设了。就像 A、B、C 三个由 AI 生成的项目，在迭代过程中又得抽取复用的组件和工具类，绕了一圈又回到组件库这里，仿佛回到了原点。

所以现阶段，无论是想完全依靠 AI 生成项目代码并直接发布到生产环境，还是仅让 AI 生成第一版代码，后续由程序员接手迭代和维护，都不太现实。

不过，现阶段 AI 在演示项目、UI 原型设计方面的表现还是不错的。比如我要实现一个大屏，把需求整理好后让 AI 生成效果图，虽仍需调整，但可作为参考，提高了工作效率。

智慧工厂大屏需求：

1. 实时数据可视化：设备状态、产能、良率、能耗等核心指标实时展示，10 秒刷新
2. 异常预警：设备故障、指标超标等异常即时报警
3. 灵活查看：支持按车间 / 产线切换视图，适配大屏显示

而且，AI 还降低了学习某种技术的门槛。以前学习知识点遇到问题，在网上搜了又搜，到处请教，都不一定能得到有效的解释。现在不同了，虽说不能保证 AI 给出的答案一定准确，但你可以要求它提供答案的依据，比如它是从哪篇文章总结出这个答案的，这样你只需进一步甄别就行。在这种情况下，只要你想学，学习任何技术都不是难事。

除了在项目开发和学习方面，AI 还有一些有趣的设想。在 AI 智能体出现之前，我就琢磨过，以后能不能有个 AI 智能体当我的 “替身”。把我所有的信息都喂给它，让它替我完成一些工作，比如写文章。我自己写文章时，对话题的看法、行文风格是怎样的，就希望 AI 智能体写出来的文章也符合这个风格。等把这个 AI 智能体训练到一定程度，说不定都能替我去公司上班。

但这个想法存在不少问题，目前能想到的就有两个。一个是责任承担的问题，这和当下的自动驾驶类似，如果出了事，责任该由谁承担呢？这个责任归属不明确，就阻碍了这种设想的推进；二是温度的问题，人是有温度的，可 AI 有吗？现实中的很多事，对错并非像 1 + 1 = 2 那么绝对，对不一定全对，错也不一定全错，遇到这种情况，AI 真的能解决吗？

所以，综合 AI 在实际应用中的各种表现，AI 真的可以取代程序员吗？有这种想法固然很好，但想法需要生长的土壤，任何激进的想法，没有因地制宜，只能是失败的。

事实上，并不是 AI 取代了程序员，而是掌握了 AI 技能或者更有能力的人，淘汰了其他能力差的程序员。因此，在当前形势下，我们该如何增强自己的核心竞争力呢？

我认为，一方面，要做到知己知彼，既然想用好 AI，就得学习 AI 相关知识。另一方面，借助 AI 快速掌握更多技能，最重要的是提升解决问题的能力。

这里我说的是技能，而非单纯的技术。因为**技术好固然重要，但如果不能为业务增长提供帮助，那技术再好也没太大价值，现实就是如此，现在都在说降本增效，公司只想看到盈利。**所以追求技术无可厚非，但最好是在清楚认识到这一点的前提下进行。

在前端开发中，业务组件的封装与管理是一个常见的难题。当多个项目共用同一个业务组件时，如何平衡不同项目的需求差异，同时保持组件的可维护性和可扩展性，成为了一个亟待解决的问题。

2 如何应对多项目需求差异

在业务组件封装过程中，我们常常会遇到这样的问题：项目 A 和项目 B 都使用了某个业务组件，但项目 A 迭代了需求，而这个需求在项目 B 中却用不到。如果这次为了满足项目 A 的需求而修改组件，那么未来项目 B 也可能出现类似但不完全相同的需求，难道每次都要通过特判来解决吗？

实际上，业务组件的问题并非孤立存在，而是整个前端项目开发流程中的一个环节。我们需要从更高的层次、更宏观的角度去看待，梳理整个前端项目的开发流程，预见可能面临的问题，并逐一讨论解决方案、进行应用和验证，而不仅仅是解决业务组件自身的问题。

3. 期望的应用场景

我们期望构建一个高效、灵活的前端开发流程，具体场景如下：

1. 提供一个基础的项目模板，其中包含常用的业务组件，如登录注册、首页、个人中心、用户管理等。这样，新的项目可以直接基于模板启动，减少重复工作。
2. 通过动态配置主题色等功能，满足客户项目的定制化需求。例如，不同客户可能对界面风格有不同偏好，通过风格配置平台可以快速实现定制。
3. 在菜单管理中配置好路由，从业务组件库中引入所需的业务组件。如果现有组件不满足需求，则可以迭代现有组件或新增组件。

4. 通用性与灵活性

业务组件应具备通用功能，能够满足大部分项目的需求，从而减少重复开发，提高开发效率。当遇到特殊需求时，可以采用组合式函数的方式，将逻辑单独抽离出来复用。同时，提供样式自定义功能，通过增加一个 .vue 文件来实现样式定制，从而复用组合式函数。这种做法既保持了组件的通用性，又提供了足够的灵活性来应对不同项目的需求。

5. 确保质量和稳定性

为了保证业务组件的质量和稳定性，单元测试是必不可少的环节。主要包括以下两个方面：

1. 对组件的逻辑代码进行测试，确保其功能正确无误。
2. 测试组件之间的交互是否符合预期，例如父子组件之间的数据传递、事件触发等。

6. 满足多样化需求

业务组件的风格动态设置是一个关键问题。以当前常见的明亮和暗黑风格为例，问题的根本原因并不在于组件自身，而在于项目。因此，需要设置的不是业务组件的主题，而是项目的主题。而项目是基于我们提供的项目模板开发的，所以项目模板需要提供风格动态设置功能。

最佳的实现方式是通过可视化页面进行配置，然后生成 CSS 文件，将其引入到项目中进行配置。这就需要开发一个可视化主题配置平台，比如 Arco Design Lab 平台（平台使用指南），能够很好地满足这一需求。

7. 总结

通过建立一套完整的开发规范、提供风格动态设置功能，我们可以有效地解决多项目需求差异的问题，提高开发效率和质量。

本项目旨在开发一个展厅3D展示系统，主要功能为监控大屏与3D城市沙盘显示。项目涉及两台电脑屏幕，分别标记为A和B。A屏幕用于展示3D城市沙盘，用户点击沙盘中的特定区域时，B屏幕将显示与该区域相关的效果视频。因此，项目的核心在于如何构建3D城市沙盘以及实现两台电脑之间的通信功能。

解决方案

最初计划使用Three.js来开发3D城市沙盘，并通过Electron开发两个独立的应用程序，分别部署在A和B电脑上以实现通信功能。然而，在项目推进过程中，我们发现3D城市沙盘可以通过视频形式实现，仅需由UI设计团队制作一个3D城市沙盘视频即可。对于沙盘大屏的左右旋转功能，可以通过捕获手势事件来控制视频播放器的快进和后退操作，从而避免了使用Three.js开发3D沙盘的复杂工作。

电脑间通信验证

基于electron-vite-vue和ws框架，我们开发了两个应用程序：客户端和服务端。客户端部署在主屏（A电脑），服务端部署在副屏（B电脑）。当系统启动时，服务端将在本地创建一个WebSocket服务器，监听8080端口。客户端则创建一个WebSocket客户端实例，连接至该服务器，从而实现两台电脑之间的通信功能。

1. electron-vite-vue
2. ws

假设B电脑的IP地址为192.168.28.112，我们首先在B电脑上创建一个WebSocket服务器，监听8080端口：

const WebSocket = require('ws');  
const wss = new WebSocket.Server({ port: 8080 });  
wss.on('connection', function connection(ws) {  
  ws.on('message', function incoming(message) {  
    console.log('received: %s', message);  
  });  
  ws.send('something');  
  ws.on('close', function clear() {  
    console.log('client disconnected');  
  });  
});  

接下来，在A电脑上创建一个新的WebSocket客户端实例，连接到B电脑的WebSocket服务器，用于发送消息：

const WebSocket = require('ws');
// 本地调试
// const ws = new WebSocket('ws://localhost:8080');  
// 连接`B`电脑的 `WebSocket` 服务器
const ws = new WebSocket('ws://192.168.28.112:8080');
ws.on('open', function open() {
  console.log('connected');
  setInterval(() => {
    ws.send('Hello Server!' + Math.random());
  }, 3000)
});
ws.on('message', function incoming(data) {
  console.log(data);
});
ws.on('close', function clear() {
  console.log('disconnected');
});
ws.on('error', function error(err) {
  console.error('WebSocket Error: ', err);
});

通过上述实现，A和B电脑之间的通信效果如下：

在Vue项目开发过程中，状态管理是至关重要的环节。随着Pinia的推出，它凭借更简洁直观的API，逐渐成为Vuex的有力替代品。为了进一步简化本地存储的管理，pinia-plugin-persistedstate 插件应运而生，它能够帮助开发者轻松实现状态的持久化。

本文将详细介绍如何使用该插件，并解决在跨项目登录时由于数据格式不一致导致的问题。

安装插件

在项目的根目录下运行以下命令以安装插件：

npm i pinia-plugin-persistedstate

随后，在main.ts文件中引入并配置插件：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

完成以上步骤后，Pinia便具备了持久化功能。

基本使用

假设我们需要管理用户信息userInfo，并将其持久化到本地存储中，那么就可以这样实现：

import { defineStore } from 'pinia';

export const useUserInfoStore = defineStore('userInfo', {
    state: () => ({
        userInfo: null as any
    }),
    persist: true,
    actions: {
        setUserInfo(info: any) {
            this.userInfo = info;
        }
    }
});

按照上述配置，用户信息将自动持久化到本地存储中。

仅持久化对象中的特定字段

在实际应用中，开发者可能会面临跨项目登录时出现的兼容性问题。具体场景为：用户在项目A完成登录操作后，随即打开项目B。由于Token的复用机制，项目B会自动完成登录流程。然而，在尝试获取用户信息userInfo时，由于不同项目对数据格式的定义存在差异，导致项目B无法准确获取用户的ID，进而无法基于此ID发起正确的网络请求。具体表现如下：

1. 项目A的数据格式：{ name: 'xiaoming', nick_name: '小明', userID: '9527' }
2. 项目B的数据格式：{ userInfo: { name: 'xiaoming', nick_name: '小明', userID: '9527' } }

由于插件默认将整个state对象存储起来，导致数据多了一层userInfo外壳，从而引发格式不一致的问题。

为了去掉userInfo这一层外壳，我们需要自定义序列化和反序列化逻辑。修改后的Store配置如下：

import { defineStore } from 'pinia';

export const useUserInfoStore = defineStore('userInfo', {
    state: () => ({
        userInfo: null as any
    }),
    persist: {
        key: 'userInfo',
        storage: localStorage,
        paths: ['userInfo'], // 明确声明要持久化的字段
        serializer: {
            serialize: (state: any) => JSON.stringify(state.userInfo),
            deserialize: (str: string) => ({ userInfo: JSON.parse(str) })
        }
    } as any,
    actions: {
        setUserInfo(info: any) {
            this.userInfo = info;
        }
    }
});

经过上述配置，用户信息的存储结构变为{ name: 'xiaoming', nick_name: '小明', userID: '9527' }，不再有额外的userInfo外壳，从而解决了跨项目登录时的格式不一致问题。

其他配置选项

在使用该插件时，虽然主要需求是“仅持久化对象中的特定字段”，因此只使用了serializer配置项，但插件还支持其他功能。以下是部分可选配置：

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();

pinia.use(piniaPluginPersistedstate, {
  storage: localStorage,
  key: 'myCustomStoreKey', // 自定义存储键名
  debug: true, // 启用调试
  serializer: {
    serialize(state) {
      // 自定义序列化逻辑
      return JSON.stringify(state);
    },
    deserialize(value) {
      // 自定义反序列化逻辑
      return JSON.parse(value);
    }
  },
  beforeHydrate(context) {
    // 在恢复状态之前执行的逻辑
    console.log('Before hydrating:', context.store.id);
  },
  afterHydrate(context) {
    // 在恢复状态之后执行的逻辑
    console.log('After hydrating:', context.store.id);
  },
  pick: ['userInfo.name', 'userInfo.email'], // 只持久化 userInfo 下的 name 和 email 属性
  // omit: ['userInfo.password'], // 省略 userInfo 下的 password 属性（与 pick 互斥）
});

// ... 定义你的 store ...

export default pinia;

因为近期在做一些行业客户群的数据分析，拿到600多条客户信息，需要对其进行分析。由于所在的是To B行业，所以只能先清理掉个人以及没有明确显示企业相关信息的数据。在此之后，需要基于这些企业名单，仔细分析各企业的情况。这可以通过爱企查的批量功能快速导出各企业的情况，但其要求模板中提供的企业名称必须是全称。

因此，我需要把剩下的500多条企业数据的名称一一补全。一开始是打算使用DeepSeek帮我基于关键词把企业名称补全，但反复验证后发现给的数据基本都是瞎编的。无奈之下，我只能一个一个查，具体操作是通过必应搜索关键词，比如“宁德时代”，然后从搜索结果中找到完整的企业名称“宁德时代新能源科技股份有限公司”复制到表格中。

可是，如果只是几十条数据还好，这500多条数据，我要查到猴年马月了，这人工操作实在太繁琐，而且效率太低了，实在忍不了，就想着怎么把这一整个流程实现自动化。

通过DeepSeek查了下，可以使用Python实现，但我没学过Python，不过编程语言嘛，大同小异，就依葫芦画瓢，把教程走一遍。最开始是打算使用必应搜索API实现的，因为必应搜索API可以免费使用，虽然有额度，但对我来说已经足够。但在开通相关服务时需要用到VISA卡，各种操作实在太麻烦了，只能研究其他方案。结果好几个方案验证都行不通，我都打算放弃了，想老老实实一个个查算了，但昨晚回去又研究了一下，发现Selenium可以实现这个需求。

2. 需求描述

1. 有一个.txt文档用来存放关键词，有一个.xlsx表格用来存放输出的结果，表格格式包含两个表头：关键词、企业名称。

2. 代码读取.txt文档中的关键词，依次通过必应搜索，将结果中来自爱企查的信息补充到表格的企业全称中。

3. 对于来自爱企查的结果，去掉后缀“ - 爱企查”，只保留企业名称内容。

4. 因为来自爱企查的结果通常很精准，所以第一次执行时，得到的相关公司信息基本不会有问题。

5. 如果没有来自爱企查的结果，则可能是关键词信息有误，这种情况下只能默认选择第一个出现的企业名称。待全部匹配输出成功后，再通过人工逐一确认。由于这种情况通常不会很多，所以工作量相对较小。

6. 提供一个变量，可以控制是否要获取来自爱企查的结果。如果设置为“是”，则限制结果必须来自爱企查；否则选择必应搜索第一个出现的企业。

3. 项目地址

GitHub - dstweihao/bing-aiqicha-scraper

4. 项目结构

bing-aiqicha-scraper/
├── keywords.txt         		# 输入关键词文件
├── 企业名称清单.xlsx  		      # 输出文件
└── run.py     					# 主程序

5. 依赖安装

脚本需在Python 3.6及以上版本运行，检查Python版本：

python --version

创建虚拟环境：

python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate

安装核心依赖：

pip install selenium webdriver-manager pandas openpyxl

其中，各依赖说明如下：

6. 脚本代码

./bing-aiqicha-scraper/run.py

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
import pandas as pd
import time

# 配置参数
with open("keywords.txt", "r") as f:
    search_keywords = [line.strip() for line in f.readlines()]
output_file = "企业名称清单.xlsx"
USE_AIQICHA = True  # 模式切换开关：True=仅爱企查结果，False=普通模式

def bing_search(keyword):
    # 动态构建查询URL
    query = f"{keyword}+site%3Aaiqicha.baidu.com" if USE_AIQICHA else keyword
    driver.get(f"https://cn.bing.com/search?q={query}")
    time.sleep(2)
    
    try:
        # 根据模式选择元素定位器
        selector = 'li.b_algo h2 a[href*="aiqicha.baidu.com"]' if USE_AIQICHA else 'li.b_algo h2 a'
        result = driver.find_element(By.CSS_SELECTOR, selector)
        
        # 统一清理企业名称
        clean_name = result.text.split(' - 爱企查')[0].split('【')[0].strip()
        return clean_name, "爱企查" if USE_AIQICHA else "普通结果"
        
    except Exception as e:
        if not USE_AIQICHA:
            # 普通模式降级处理：尝试获取第一个结果
            try:
                fallback = driver.find_element(By.CSS_SELECTOR, 'li.b_algo h2 a')
                return fallback.text.split(' - ')[0].strip(), "普通结果（待确认）"
            except:
                return keyword, "未找到"
        return keyword, "未找到（爱企查）"

# 启动浏览器
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()))

# 批量处理（修改结果记录部分）
results = []
for kw in search_keywords:
    name, source = bing_search(kw)
    results.append({
        "关键词": kw, 
        "企业全称": name,
        "来源": source  # 新增来源标识列
    })
    print(f"[{source}] {kw} -> {name}")

# 保存结果（增加列排序）
pd.DataFrame(results)[["关键词", "企业全称", "来源"]].to_excel(output_file, index=False)
driver.quit()

7. 运行验证

在网上随机找了一些企业进行验证，关键词示例如下：

极光动力
上海明我
易能数字能源

仅爱企查结果：

普通模式：

8. 真实应用

在真实使用过程中，可以结合企业微信文档进行操作。首先运行第一次查询，拿到“仅爱企查结果”。然后，通过爱企查的批量查询功能，将第一次查询得到的全部数据导入，进行批量查询。接着，从爱企查导出的表格中，筛选出“经营状态”为--的条目（这些通常是无效或无法查询到的企业信息），并将这些条目复制到爱企查的导入模板中，再进行第二次导入，这次可以使用普通模式。这样基本能简化很多工作量。

在Vue3开发过程中，每次创建新的页面都需要注册路由，需要在src/router.ts中新增页面的路径，并将URL路径映射到组件中，如下所示：

import { createMemoryHistory, createRouter } from 'vue-router'

import HomePageView from './HomePageView.vue'
import DevListView from './DevListView.vue'

const routes = [
  { path: '/', component: HomePageView },
  { path: '/DevListView', component: DevListView },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

虽然看起来工作量不大，但如果页面特别多，就会感到繁琐。即使是微小的改动，如组件名的修改，也需要在路由文件中反复确认，反复如此就会感到不便。为了简化这部分工作，我想到了一个解决方案，那就是开发一个Vue3菜单路由生成工具，只需填写组件的中文名称，根据树形结构生成一个与routes结构相同的数组，然后替换使用即可。但还是觉得不够好，随后想到既然自己能发现这个问题，别人可能早已有了应对方案。接着，我就发现了 unplugin-vue-router 插件。

2. 配置

2.1 安装

npm install -D unplugin-vue-router

2.2 vite.config.ts

import VueRouter from 'unplugin-vue-router/vite'

export default defineConfig({
  plugins: [
    VueRouter({
      /* options */
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
})

2.3 tsconfig.json

{
  "include": [
    // other files...
    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    // ...
    "moduleResolution": "Bundler",
    // ...
  }
}

2.4 vite-env.d.ts

/// <reference types="unplugin-vue-router/client" />

3. 应用

3.1 常规方式

因为项目布局是基于Element Plus组件库的<el-container>搭建的，其中对<e-main>进行了处理，<router-view>是 Vue Router 的一个内置组件，用于渲染匹配当前路由的组件，如下所示：

<el-main>
  <router-view v-slot="{ Component }">
    <component :is="Component" />
  </router-view>
</el-main>

所以，DevList.vue和DataList.vue组件都在<e-main>中渲染显示，常规的组件文件结构，如下所示：

src/components/
├── Login.vue
├── Register.vue
├── Container.vue
└── DevManagement
    ├── DevList.vue
    └── DataList.vue

然后，在router.ts文件中是这样的：

import { createRouter, createWebHistory } from 'vue-router';
import Login from '@/components/Login.vue';
import Register from '@/components/Register.vue';
import Container from '@/components/Container.vue';
import DevList from '@/components/DevManagement/DevList.vue';
import DataList from '@/components/DevManagement/DataList.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/register',
    name: 'Register',
    component: Register
  },
  {
    path: '/',
    name: 'Container',
    component: Container,
    children: [
      {
        path: 'DevManagement/DevList',
        name: 'DevList',
        component: DevList
      },
      {
        path: 'DevManagement/DataList',
        name: 'DataList',
        component: DataList
      }
    ]
  }
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

3.2 使用unplugin-vue-router方式

需将src/components修改为src/pages，然后把登录页Login.vue重命名为index.vue，再创建一个Container文件夹和Container.vue相对应，这样就会自动识别DevList.vue和DataList.vue为Container.vue的子路由，其路由为/Container/DevManagement/DevList，如下所示：

src/pages/
├── index.vue
├── Register.vue
├── Container.vue
└── Container
    └── DevManagement
        ├── DevList.vue
        └── DataList.vue

在src/router.ts文件中配置如下：

import { createRouter, createWebHashHistory } from 'vue-router'
import { routes, handleHotUpdate } from 'vue-router/auto-routes'

export const router = createRouter({
  history: createWebHashHistory(),
  routes, 
})

// This will update routes at runtime without reloading the page
if (import.meta.hot) { 
  handleHotUpdate(router) 
} 

如此一来，后续只需要在src/pages文件夹下按约定的规范处理即可，不需要在router.ts文件中进行修改了。

在项目开发过程中，计划将组态页面的渲染器集成到组件库，以 npm 包的形式供后续项目模板复用。如此一来，倘若组态页面渲染出现问题，便能简化修复与迭代工作。

遇到问题

采用本地引入方式开发完成后，切换至 npm 包方式使用，此时面包屑可正常显示，然而组态页面部分却呈现空白状态。

分析问题

1. 既然面包屑显示正常，那就表明通过向组件传入 Router 对象进行相关操作并无问题，毕竟面包屑与组态页面共同构成了项目中的具体功能页面。不可能 Router 有问题，面包屑却还能正常显示。
2. 推测组件打包生成 npm 包后，自身未携带 Vue 环境，致使 Vue 内置特殊元素 <component> 渲染失败，此前使用 Pinia 时就碰到过类似情况。
3. 那么，该如何在组件里创建 Vue 环境呢？
4. 要是不使用 <component>，而改用渲染函数来实现会怎样呢？
5. markRaw 的作用是什么？
6. 利用渲染函数实现后，发现打包成 npm 包使用时依旧出现空白，这就说明并非 <component> 的问题，如此一来，问题范围便缩小到组态页面的数据源上了。
7. 对比本地引用和 npm 包两种方式下的数据请求差异，发现使用 npm 包时，存在接口未发起请求的情况，进而定位到问题根源。

问题原因

由于该渲染器是在项目中使用，其请求的 baseURL 是通过 window.location.origin 获取的。在本地引入使用时，本地开发服务器地址为 http://localhost:3000/，并且在 Vue 项目的 vite.config.ts 中已做代理，所以请求正常。但当把渲染器代码移至组件库并以 npm 包方式使用时，它自行获取的请求地址仍是 http://localhost:3000/，并未经过代理处理，致使请求资源的接口异常，最终造成页面空白。

const baseURL = import.meta.env.DEV ? "http://192.168.50.20" : window.location.origin

总结

解决 Bug 的思路仍有待提升，自己还是过于急于求成了。刚察觉到问题的一点苗头，就贸然行事、妄下结论，实在有些武断。一开始认定是 <component> 的问题，就应当采用排除法，不该如此笃定。实际上，只需用简单示例测试一下，便能排除该选项，也不至于耗费大量精力深入研究如何在组件里创建 Vue 环境？如何用渲染函数实现组件？平白浪费了许多时间。

每次解决完一个 Bug 之后都会觉得，这个算啥问题，真的不值一提。可在解决过程中，却常常感到无奈，好几次都差点放弃。原本代码放在项目中使用正常，非要解耦，感觉像是没事找事。不过，最终还是坚持了下来，觉得应该差不多能弄清楚问题所在了。虽说花费的时间不太划算，就如同这篇文章写得好似没什么价值一般，但总结一下解决 Bug 的心路历程，相信还是会有所收获的。积累到一定程度，便能为自己提供更多面对问题时的视角与启发。

当前的后台管理系统主要负责云平台和云服务器的管理，并且是以Web应用的形式在使用。但是，当出现服务器紧急情况或需要进行平台注册审核时，如果这些任务发生在非工作时间，例如在通勤路上，我们就无法使用PC浏览器进行访问和操作，这显然是不方便的。另外，由于后台管理系统仅供内部人员使用，我们只需要它能满足基本的查看和配置需求，对于便利性和美观性并没有太高要求。因此，将Web端的所有功能移植到手机端并开发一个App，显然很不划算。毕竟，每当Web端功能迭代时，App端也需要同步更新，这意味着同一功能需要实现两次，所以，开发App的方案就不考虑了。

2. 方案

2.1 方案一：使用手机Edge、Firefox浏览器访问使用【推荐】

1. 使用手机通过Edge或Firefox浏览器访问时，设置为“查看桌面网站”（Firefox中称为桌面版网站开关），即可浏览平台的完整布局，并通过手势放大和缩小来居中展示所需内容，操作便捷。
2. 可将后台管理系统的管理平台添加到手机主屏幕，实现快速访问。
3. 以TDesign页面模板演示效果。

2.2 方案二：当前页面 + 全屏

1. 创建一个专为手机端使用的手机端菜单，仅显示关注页面，手机端访问时读取该菜单显示。
2. 利用@media媒体查询调整各页面布局，例如筛选条件等，以避免布局错乱。
3. 默认情况下，只能在手机横屏模式下使用，提供一个全屏按钮，点击后将当前页面全屏化，以争取更多展示空间。

2.3 方案三：远程软件控制电脑访问使用

使用远程软件（如向日葵）访问电脑，然后在手机端通过手势放大和缩小进行操作。效果与方案一相似，但存在以下不足：

1. 输入时需要手动打开键盘。
2. 页面有滚动条时操作繁琐。
3. 连接可能不稳定，画质不佳。

3. 结论

1. 方案一无需额外开发成本，只需在指定手机浏览器上使用即可。
2. 方案二需要额外开发，且最终呈现效果可能不如方案一。
3. 方案三存在上述提到的缺点。
4. 综合考虑，推荐采用方案一。

公司有部门使用VuePress 1.0搭建平台的帮助文档，前期文档不是很多，所以没有暴露出特别明显的问题。但随着文档的逐步迭代和内容的增多，出现了大量的并发请求，总共有218个请求，导致服务器带宽耗尽、响应速度下降，进而影响了文档的使用。

2. 问题分析

VuePress 1.0是基于Vue 2和webpack实现的，其模块化方式使用的是CommonJS。这意味着，当项目打包部署在服务器并进行访问时，需要将源码全部加载完成后才能进行渲染，即同步加载。随着项目持续迭代，内容增多，性能问题逐渐显现。

3. 解决方案

考虑到向服务器发起了200多个请求，但查看那些.js文件，整个js文件夹大小才10.3MB，是否可以将10.3MB分为10个.js文件，减少请求至10次呢？

3.1 方案一：替换成showDoc

使用showDoc在线文档系统，相比vuepress基于vue.js的静态站点生成器，除了操作便利，对于解决并发请求200次这个问题，还是有帮助的，毕竟showDoc初始化的时候，是从服务器获取文档目录，再通过文档ID，去请求文档详情，通常来说，不会有那么多文档目录，不太可能出现并发请求200次这个问题，只是将vuepress迁移至showDoc，花费的成本很高，文档格式需要调整，图片需要上传，想想这个工作量就头大，再者，作为平台的帮助文档，本身带有宣传的作用，很难醒目地在showDoc中体现平台的公司名和Logo，所以这个方案不推荐。

3.2 方案二：研究webpack如何合并打包

如果请求过多是因为文件太分散导致的，那么，能够在当前基础上，也就是webpack里，找到，当打包时，将各个文件合并，减少请求次数呢？

VuePress 1.0 支持通过 webpack-chain 链式操作来修改内部的 webpack 配置，如下所示：

module.exports = {
  chainWebpack (config, isServer) {
    // config 是一个 ChainableConfig 的实例
  }
}

那在 webpack 中，如何对打包的体积、文件等进行处理呢？在 webpack 官方文档中，有推荐使用 SplitChunksPlugin 插件，是为了代码分割，减少包的体积，然后优化加载效率，感觉和自己的初衷背道而驰，最终没达到自己想要的效果。还有就是研究了下 ModuleConcatenationPlugin 插件，其作用是将所有模块的作用域“提升”或合并到一个闭包中，从而使得代码在浏览器中执行速度更快。但是因为要在使用 webpack-chain 去调研 webpack 的配置，尝试使用后也没达到预期，加上再花精力投入到 VuePress 1.0 和 webpack-chain 感觉有点不值。所以，就再想想其他方案。

3.3 方案三：替换成VitePress【推荐】

说到减少并发请求次数，实际上，Vite就在做这样的工作。Vite采用的JavaScript模块化方式是ESM（ECMAScript Modules）。与CommonJS相比，ESM支持按需加载，并且是异步执行的，不会阻塞浏览器的其他事件处理。这意味着在首次加载时，我们无需加载所有资源，仅需加载首页所需的资源即可。这样就能减少了并发请求次数，解决当前遇到的问题。

而VitePress，正是基于Vue 3和Vite构建的。

5. 方案验证

以下是两个文档框架的对比，内容基本为空，可忽略不计。可以看到VuePress 1.0初始化请求的就有26个请求，大部分都是.js文件，而VitePress 1.0只有9个请求，.js文件的请求才4个。

5.1 VuePress 1.0

5.2 VitePress 1.0

6. 结论

由于VitePress也是VuePress团队开发的，并且是他们重点推荐的文档框架，从VuePress迁移至VitePress不需要推倒重来，只需调整差异部分，迁移成本相对较低，因此建议迁移至VitePress。

由于当前部门使用Flutter框架进行开发，支持生成Android和iOS两端的App应用。现在鸿蒙系统计划完全去掉AOSP核心代码，将无法支持Android应用。因此，鸿蒙手机接下来只能安装鸿蒙App应用。鉴于此，从长远来看，部门App后续也需要支持鸿蒙系统。那么，如何从成本和可维护性方面考虑后续的开发模式？可以兼顾到Android、iOS和鸿蒙系统，同时老项目又能支持在鸿蒙手机上运行？重新开发鸿蒙版本？显然不切实际。

2. 解决方案

2.1 方案一：Flutter for OpenHarmony

https://gitee.com/openharmony-sig/flutter_flutter

鸿蒙官方计划对Flutter进行反向适配，即基于Flutter SDK的稳定版本进行拓展，使其能够在鸿蒙DevEco Studio上构建和生成鸿蒙App应用。

2.1.1 优势

1. 官方支持。
2. Flutter源码直接可用，只需简单适配，成本低。

2.1.2 劣势

1. 因使用Flutter版本为3.7，与当前最新3.24版本相差过大，加上Flutter迭代特别频繁，很多开发方式、组件都在不断变化，后续要使用新的Flutter特性，可能不会那么容易。
2. Flutter正在考虑使用自研的图形渲染引擎Impeller替换掉Skia，这无疑又加大了更多的变数。最后，可能会变成多个分支进行维护。
3. 部门已有项目，使用的Flutter版本都是最新的，可能是没办法兼容的。除非新项目统一使用这个3.7版本的Flutter SDK来开发。

2.2 方案二：ArkUI-X 跨平台框架

https://gitee.com/arkui-x

ArkUI-X扩展ArkUI开发框架到多个OS平台，让开发者基于一套主代码，就可以构建支持多平台的精美、高性能应用。目前支持OpenHarmony、HarmonyOS、Android、iOS，后续会逐步增加更多平台支持，可以简单理解为鸿蒙版的Flutter。

2.2.1 优势

1. 官方支持。
2. 鸿蒙版的Flutter。

2.2.2 劣势

1. 有学习成本，虽然鸿蒙和Flutter是有一些共性的，学习成本相比之下不会太高，但是毕竟是新的开发模式，各种各样的知识和问题都是需要积累和时间的。
2. 有开发成本，已有的Flutter项目需要重新开发。
3. 生态各方面还处于初期，还未成熟和完善，也不适合立马接入商业项目应用。

2.3 方案三：Flutter Web【推荐】

http://192.168.24.10/appweb/index.html

通过Flutter Web可以部署在网页上，然后在手机浏览器上使用，并设置为全屏，则可以达到和App一样的使用效果。

2.3.1 优势

1. 无开发成本。
2. 使用时无需安装。
3. 与系统无关，只要有浏览器就可使用。

2.3.2 劣势

1. 需要说服使用鸿蒙手机的客户接受这种使用方式。
2. 各手机浏览器需要支持全屏功能，不过可以代码实现，检测到当前是手机访问，则自动全屏即可。
3. 考虑到毕竟是在网页上使用，体验可能不如App，但是现在手机性能、网络访问各方面发展都很不错，这方面应该不会特别明显。
4. 不联网的项目怎么办？可以基于鸿蒙开发一个基于WebView的简单手机浏览器，并加载本地Flutter Web部署的包，打开这个应用就可访问。
5. 额外多一些适配的工作，但不会很多，Flutter项目开发，需同时考虑兼容Web端。

2.4 方案四：Flutter 官方支持 HarmonyOS

Flutter官方暂没有支持HarmonyOS的计划，但是这个问答 《HarmonyOS Support》 毕竟是几年前了，以后的发展并不好说，如果鸿蒙系统大规模发展起来，发展到可以倒逼Flutter官方支持也不是没有可能。

3. 结论

到底选哪个方案，不是绝对的，只能是阶段性的，因为很多方案都还存在变数。考虑到部门的App项目情况，推荐选择【方案三】，但是方案一、方案二可以在后续进行这方面的调研和准备工作，伺机而动。

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产品设计
• 怎么学市场营销？
• 怎么学项目管理？
• 怎么学团队管理？
• 怎么徒步？
• 怎么学吉他？
• 怎么学钢琴？
• 怎么学英语？
• 怎么学普通话？
• 怎么学习画画？
• 怎么做饭？
• 怎么护肤？
• 怎么穿搭？
• 怎么阅读？
• 怎么写读书笔记？
• 怎么写电影日志？
• 怎么写诗词？
• 怎么创作歌词？
• 怎么写小说？
• 怎么写日记？
• 怎么摄影？
• 怎么创业？

随着移动设备碎片化加剧和跨端需求增长，2025 年的响应式开发已从单纯的 “适配多屏幕” 升级为 “全场景体验一致性”。结合当前技术演进，针对 PC、平板、手机多端适配需求，推荐以下增强方案：

一、核心技术栈升级

1. 基础框架：Vue 3 + Vite 6 + TypeScript 5

• Vite 6 优势：新增的responsive-plugin可自动识别设备类型并注入环境变量，配合import.meta.env.DEVICE_TYPE在编译时优化条件渲染

• TypeScript 5：借助const type特性强化响应式断点类型定义，避免运行时类型错误

// 设备类型类型定义示例
type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'large-screen'
const deviceType: DeviceType = import.meta.env.DEVICE_TYPE as DeviceType

2. 响应式引擎：Tailwind CSS 4 + Bootstrap 6 混合方案

• Tailwind CSS 4：通过@container查询实现组件级响应式，比传统@media更精准控制元素布局

• Bootstrap 6：新增responsive-propsAPI，支持在组件上直接声明多端样式

<!-- Bootstrap 6 响应式属性示例 -->
<button 
  class="btn"
  :responsive="{
    mobile: 'btn-sm w-full',
    tablet: 'btn-md w-1/2',
    desktop: 'btn-lg w-auto'
  }"
>
  多端适配按钮
</button>

3. 跨端状态管理：Pinia + 设备传感器 API

• 利用Pinia存储设备状态（如屏幕方向、分辨率），结合ScreenOrientationAPI 实现动态适配

// 设备状态Store示例
import { defineStore } from 'pinia'

export const useDeviceStore = defineStore('device', {
  state: () => ({
    orientation: ScreenOrientation?.type || 'portrait-primary',
    breakpoint: 'mobile'
  }),
  actions: {
    init() {
      window.addEventListener('orientationchange', () => {
        this.orientation = ScreenOrientation.type
      })
    }
  }
})

二、组件层优化方案

1. 自适应布局组件库：PrimeVue 4 + VueUse

• PrimeVue 4：所有组件默认支持responsive属性，内置 30 + 种设备预设

• VueUse：使用useMediaQuery组合式 API 实现组件级响应式逻辑

<script setup>
import { useMediaQuery } from '@vueuse/core'

const isMobile = useMediaQuery('(max-width: 640px)')
const isTablet = useMediaQuery('(min-width: 641px) and (max-width: 1024px)')
</script>

<template>
  <div>
    <mobile-header v-if="isMobile" />
    <tablet-header v-else-if="isTablet" />
    <desktop-header v-else />
  </div>
</template>

2. 响应式数据处理：VueQuery + 设备感知数据请求

• 根据设备性能动态调整数据粒度，移动端请求精简数据减少流量消耗

// 设备感知数据请求示例
useQuery(['dashboard-data', deviceType], () => {
  return fetchDashboardData({
    detailLevel: deviceType === 'mobile' ? 'basic' : 'full'
  })
})

三、性能优化策略

1. 渲染优化：组件级代码分割

借助 Vite 6 的deviceConditionalImport功能，实现设备专属组件的按需加载

<script setup>
// 按设备类型动态导入组件
const [MobileComponent, TabletComponent, DesktopComponent] = await Promise.all([
  import.meta.env.DEVICE_TYPE === 'mobile' ? import('./MobileComponent.vue') : null,
  import.meta.env.DEVICE_TYPE === 'tablet' ? import('./TabletComponent.vue') : null,
  import.meta.env.DEVICE_TYPE === 'desktop' ? import('./DesktopComponent.vue') : null
])
</script>

2. 图像适配：NextGen Image + WebP 2

• 使用标签配合srcset实现不同设备加载对应分辨率图像

• 采用 WebP 2 格式减少 50% 图像体积，配合loading=“lazy"实现按需加载

<picture>
  <source srcset="image-200.webp" media="(max-width: 640px)">
  <source srcset="image-400.webp" media="(max-width: 1024px)">
  <source srcset="image-800.webp" media="(min-width: 1025px)">
  <img src="image-400.webp" alt="响应式图像" loading="lazy">
</picture>

四、测试与调试方案

1. 多设备同步测试：BrowserStack 2025 + Vitest

• 利用 BrowserStack 的实时同步功能，在 20 + 设备上同时预览效果

• 使用 Vitest 的device-simulator模拟不同设备环境进行单元测试

2. 性能监控：Lighthouse Mobile + Web Vitals

• 重点监控移动设备的 LCP（最大内容绘制）和 CLS（累积布局偏移）

• 配置 CI/CD 流程，移动端性能得分低于 80 分自动阻断发布

五、方案对比与选择建议

决策建议：

• 简单应用：选择 Tailwind CSS 4 + VueUse 组合

• 复杂企业应用：采用混合方案 + PrimeVue 组件库

• 极致性能要求：增加 Vite 设备级代码分割和图像优化策略

通过上述方案，可在 2025 年的技术环境下实现 “一次开发，全端适配”，同时兼顾性能和开发效率。核心思路是将响应式逻辑从 CSS 层提升到组件层和应用层，结合编译时优化和设备感知能力，构建真正适配未来多端环境的 Web 应用。

前言

因为之前只是用Vue来开发IaaS平台项目，其使用场景通常都是PC，所以没怎么涉及到Web响应式设计开发相关知识。最近项目刚好是应用在PC和平板，甚至是手机上的，所以就需要考虑响应式的问题。

1. 技术选型

Web响应式开发，主要是基于CSS里@media媒体查询实现，允许不同视图尺寸使用不同的布局。

1.1 方案一：Vue 3 + Vite + Bootstrap5

1.1.1 优点

1. 容易上手：只要对 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。

2. 响应式设计：Bootstrap 可以根据不同平台（手机、平板电脑和台式机）进行调整。

3. 移动优先：在 Bootstrap 中，自适应移动端是框架的核心部分。

4. 浏览器兼容性：Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera）。 如果您需要支持 IE11 及以下版本，请使用 Bootstrap4 或 Bootstrap3。

5. github 星数 164k

6. Bootstrap5 效果演示：https://www.bootstrap-admin.top/

1.1.2 缺点

1. 没办法使用我们积累的vue next组件库

2. Bootstrap5 需要学习成本，但不会很难

3. 相对紧急的项目，通常不应该引入新技术去开发实现，而是以快速交付为主。

1.2 方案二：Vue 3 + Vite + Element Plus + @media

1.2.1 优点

1. 基于前端现有技术积累，可快速开发项目功能

1.2.2 缺点

1. 前端封装组件库，并没考虑过响应式设计，潜在未知样式问题，如开发此项目，各组件需考虑各平台（电脑、平板、手机）屏幕适配的同时，还要考虑已引用该库开发的项目兼容性问题。

2. @media媒体查询需每个页面、每个平台去适配（Bootstrap5做的事情），工作量相对较大，因无更多平台设备去验证，潜在未知的样式问题。

1.3 结论

简单来说，可以理解为方案一Bootstrap5帮我们处理好了屏幕适配的问题，我们只需要关注功能开发即可，方案二则是功能也要开发，样式也要关注。长远来看，倾向于方案一开发。

2. 快速搭建

Bootstrap5官方文档有提供Vite基于开发的指南《Bootstrap & Vite》，我们虽然是基于Vue3开发的，但是相关配置基本都一样的，只是有一点点差异而已。

2.1 下载

通过Vite直接生成基于Typescript开发的Vue3模版。

npm create vite@latest my-vue-app -- --template vue-ts

2.2 安装

npm install
// bootstrap5、popperjs
npm install --save bootstrap @popperjs/core
// sass
npm install --save-dev sass
// bootstrap-icons 官方图标库
npm install bootstrap-icons

2.3 配置

2.3.1 开发热重载

在vite.config.ts中配置，我们需要让Vite知道在哪里可以找到我们项目的TypeScript，以及开发服务器应该如何表现(热重载从src文件夹中拉取)。

import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      root: path.resolve(__dirname, 'src'),
    }
  },
  server: {
    port: 8080,
    host: true
  }
})

2.3.2 Bootstrap5

1. 在vite.config.ts中配置，让导入变得尽可能简单：

    resolve: {
       alias: {
         '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
       }
     }
   

2. 在src/assets/style文件夹新建一个文件bootstrap5.scss ，引入bootstrap5样式：

   @import "~bootstrap/scss/bootstrap";
   

3. 将main.ts文件修改为main.js，然后在index.html中同步修改：

   <script type="module" src="/src/main.js"></script>
   

4. 在main.js中引入bootstrap5：

   // 自定义样式
   import '../src/assets/style/bootstrap5.scss'
   
   // Bootstrap5 JS
   import * as bootstrap from 'bootstrap'
   

2.3 验证

  <div class="container mt-3">
    <h2 class="my-3 text-start">按钮样式</h2>
    <button type="button" class="btn">基本按钮</button>
    <button type="button" class="btn btn-primary ms-2">主要按钮</button>
    <button type="button" class="btn btn-secondary ms-2">次要按钮</button>
    <button type="button" class="btn btn-success ms-2">成功</button>
    <button type="button" class="btn btn-info ms-2">信息</button>
    <button type="button" class="btn btn-warning ms-2">警告</button>
    <button type="button" class="btn btn-danger ms-2">危险</button>
    <button type="button" class="btn btn-dark ms-2">黑色</button>
    <button type="button" class="btn btn-light ms-2">浅色</button>
    <button type="button" class="btn btn-link ms-2">链接</button>
  </div>

2.4 效果

3. 组件

3.1 日期选择器

一开始打算使用<input type="datetime-local">实现的，但是效果不是很理想，一些样式调整起来很复杂，加上本着不重复造轮子的思想，就打算引用相关日期插件实现。

1. 安装

npm install @popperjs/core @eonasdan/tempus-dominus

2. main.js中引入样式

// 日期组件样式
import '@eonasdan/tempus-dominus/dist/css/tempus-dominus.css'

3. 在.vue中使用时，需引入

import { TempusDominus} from '@eonasdan/tempus-dominus';
import {  name } from "@eonasdan/tempus-dominus/dist/locales/ru";

4. 实现代码

<div class="input-group mb-3" id="datetimepicker1">
    <input type="text" class="form-control" readonly aria-label="">
    <span class="input-group-text"><i class="bi bi-calendar"></i></span>
</div>
    
onMounted(() => {
    const element: any = document.getElementById('datetimepicker1')
    var datetimepicker1 = new TempusDominus(element, {
        localization: {
            format: 'yyyy-MM-dd HH:mm:ss',
            hourCycle: 'h24'
        },
        display: {
            viewMode: 'calendar',
            components: {
                year: true,
                month: true,
                date: true,
                clock: true,
                hours: true,
                minutes: true,
                seconds: true
            },
            icons: {
                time: 'bi bi-clock',
                date: 'bi bi-calendar',
                up: 'bi bi-arrow-up',
                down: 'bi bi-arrow-down',
                previous: 'bi bi-chevron-left',
                next: 'bi bi-chevron-right',
                today: 'bi bi-calendar-check',
                clear: 'bi bi-trash',
                close: 'bi bi-x',
            },
            buttons: {
                today: true,
                clear: true,
                close: true,
            },
        }
    });
    datetimepicker1.locale(name);
})

5. 效果如下

3.2 自定义主题色

因为Bootstrap5主题默认是蓝色，和项目设计的主题色不一致，所以就需要修改定制主题色，这一块在官网Sass模块也有详细说明。特别注意的是，同一Sass文件中的变量覆盖可以在默认变量之前或之后。但是，当跨Sass文件覆盖时，必须在导入Bootstrap的Sass文件之前进行覆盖。比如要将主题色修改为紫色（#6610f2），就需要在我们自定义的样式文件bootstrap5.scss中设置，如下所示：

$primary: #6610f2;
$danger: #ff4136;

$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

// scss
@import "~bootstrap/scss/bootstrap";
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

效果如下图所示，可以看到按钮设置为primary时，颜色已经变成紫色（#6610f2）了，但是出现了一个问题，那就是次要按钮、成功、信息等按钮样式异常。

为了解决这个问题，就去查看下_variables.scss 文件，其中有一段样式代码：

// scss-docs-start theme-color-variables
$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-900 !default;

也就是我们在自定义样式中覆盖了，导致相关字段颜色值丢失，所以就在自定义样式文件中，补上，如下所示：

// 修改主题色
$primary: #6610f2;
$secondary: #6c757d;
$success: #198754;
$info: #0dcaf0;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #212529;

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $dark,
);

效果如下所示，虽然解决了按钮的样式问题，但是其他组件其实可能有潜在的问题，这一块后续再补充。

3.3 Echarts

3.3.1 安装

npm install echarts --save

3.3.2 引入 ECharts

因为Echarts官网上面其实都有Demo的，但是结合我们实际项目，还是可以把相对贴切的模版给出来的，如下所示：

<template>
  <div class="card">
    <div id="echarts" style="width: 500px; height: 300px;"></div>
  </div>
</template>
<script setup lang="ts">

import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  const element: any = document.getElementById('echarts')
  const myChart: any = echarts.init(element);
  const colors = ['#5470C6', '#91CC75', '#EE6666'];
  const options = {
    color: colors,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    grid: {
      left: '30%'
    },
    legend: {
      data: ['电压', '电流', '功率']
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        // prettier-ignore
        data: ['06:00:00', '07:00:00', '08:00:00', '09:00:00', '10:00:00', '12:00:00', '14:10:00', '15:30:00', '16:00:00', '17:00:00', '18:00:00', '19:00:00']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '电压',
        position: 'left',
        alignTicks: true,
        offset: 0,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[0]
          }
        },
        axisLabel: {
          formatter: '{value} V'
        }
      },
      {
        type: 'value',
        name: '电流',
        position: 'left',
        alignTicks: true,
        offset: 50,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[1]
          }
        },
        axisLabel: {
          formatter: '{value} A'
        }
      },
      {
        type: 'value',
        name: '功率',
        position: 'left',
        alignTicks: true,
        offset: 100,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[2]
          }
        },
        axisLabel: {
          formatter: '{value} KW'
        }
      }
    ],
    series: [
      {
        name: '电压',
        type: 'line',
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ]
      },
      {
        name: '电流',
        type: 'line',
        yAxisIndex: 1,
        data: [
          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
        ]
      },
      {
        name: '功率',
        type: 'line',
        yAxisIndex: 2,
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
      }
    ]
  };
  // 绘制图表
  myChart.setOption(options);
})


</script>

<style scoped>
</style>

3.3.2 屏幕自适应

因为使用Bootstrap5开发本身就是为了Web响应式功能，所以Echarts也需要处理屏幕自适应的问题，这个ECharts官方文档已经有相关说明了《响应容器大小的变化》，如下所示：

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>

3.3.3 热更新

待解决。

4. 打包

4.1 本地打开

因为项目应用场景不太一样，所以有些时候是想要直接打开dist/index.html就可以看到网页内容的，实现这个有现成的插件可以使用vite-plugin-singlefile，其原理就是将js和css文件内容填充到index.html里，这样就可以通过打开index.html查看打包好的项目了。如下所示：

1. 安装

npm install vite-plugin-singlefile --save-dev

2. 在vite.config.ts中配置

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { viteSingleFile } from "vite-plugin-singlefile"

export default defineConfig({
	plugins: [vue(), viteSingleFile()],
})

每一个公司或者团队有会有相关的项目网址，考虑到团队共用的东西，所以计划是开发一个静态导航页，这样就不需要每个人自己维护了，使用同一套即可，当时在Github上面找了一些开源的静态导航页项目，使用的是开源库static-nav，它是使用HTML+CSS+JQ简单实现的，代码里面网址都是直接写死的，我只要将其替换就可以。

1. 遇到问题

static-nav虽然可以正常应对当前的需求，但是使用一段时间之后发现，如果我要替换或者新增一些网址，每次都需要在.html文件中修改，然后再重新部署。一两次还好，次数多了，就有点受不了了，再加上一个模块的网址多了之后，好几个模块所占用的空间不一致的话，那布局就容易错乱，为了解决这个问题，我每次都需要使用占位符解决。

2. 解决方案

考虑到维护、后期拓展难的问题，就打算重构这个项目，并命名为dst-static-nav，基于vue next + vite + element-plus 实现，通过一个navLists.ts文件动态配置，后期只需要将这个文件存放在服务器，如有任何需求，只需要改动这个navLists.ts文件即可，不需要改动项目界面，然后又要重新部署一遍，因为最近百度捣鼓了一个开发者搜索，所以也加了一下，项目效果图，如下所示：

功能主要是以下几点，分别是：

1. 左边菜单栏快速定位，右边静态导航页动态渲染

2. 通过 navList.ts 配置，无需改动前端页面

3. 支持百度开发者搜索

当前只是这些功能，后期可能考虑部署线上，然后怎么可以做到通用一点。

3. 技术要点

项目虽然很小，但是有一些细节点还是可以梳理记录一下的，技术没有高低之分，只要能解决了问题就是好技术。

3.1 基于el-scrollbar实现左右联动定位到标题栏

项目开发过程中，主要解决的问题是，左侧菜单栏和右边导航布局页面的联动，需求就是左侧菜单栏选中，右边导航页对应的标题栏滚动到顶部显示，在实现中主要使用document.getElementsByName()这个函数，当

const handleSelect = (key: string, keyPath: string[]) => {
		let offsetTop = document.getElementsByName(key)[0].offsetTop
		scrollbarRef.value!.setScrollTop(offsetTop - 20)
}

3.2 实现左侧菜单栏最后几个菜单的标题置顶

在项目使用过程中，发现左侧菜单栏最后几个菜单，来回切换，导航标题没有置顶，原因很简单，因为布局不够，为了解决这个问题，就需要在最后一个导航模块增加布局，但是应该要增加多少呢？每个导航模块的高度都是不定的，所以要新增的布局高度只能通过计算，动态设置。

首先，需要知道最后一个导航模块的名称，如下所示：

// 获取左侧菜单最后一项，基于它加上需补充的空间高度(浏览器内高度-卡片整个高度)
let lastNavName = navLists.at(-1)?.chindren.at(-1)?.label

然后，需要获取当前浏览器页面的高度，减去这个导航模块的高度，就可以知道需要新增多高的布局了，如下所示：

const handleSelect = (key: string, keyPath: string[]) => {
   let offsetTop = document.getElementsByName(key)[0].offsetTop
   scrollbarRef.value!.setScrollTop(offsetTop - 20)
 }

总结

dst-static-nav 项目还有蛮多东西需要完善的，也是在逐步新增需求，虽然不是什么了不起的项目，但是项目开发整个流程规范是一样的，争取培养起来用心做事情的感觉，从中体验到丝丝成就感。

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

所以我在想，怎么改变这种现象？以我个人的经验来说，过多深究官方文档，反而将自己陷入知识点的海洋之中，抓不到重点，往往水过鸭背，因为学了没有真正应用，不久之后就会忘记，我的意思是，不用看什么官方文档，以终为始，不用管自己到底会不会，直接上手开发项目，根据当前的需求，去学习对应的知识点，比如现在你要生成一个 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>
   

   然后按照官网的写法，将