写在前面

这是一篇站在中文开发者立场的横评。

为了避免主观偏见，我设计了一道 1 小时实战题目：用 Vue 3 + TypeScript 实现一个完整的「在线 JSON 格式化工具」。然后分别让 Cursor + Claude Sonnet 4.7、Cursor + Claude Opus 4.5、DeepSeek-V3 三套主流组合各写一遍，最后用 6 维评分卡打分。

文末给出 2026 年的选型建议矩阵——你最关心的「国内访问、价格、中文表达力」全部直面。

本文与已发布的 Cursor 完全教程 / DeepSeek 完全使用指南 是互补关系，那两篇讲单独的工具使用，本文讲组合对比与选型决策。

1. 三大 AI 编程引擎 2026 现状速览

| 引擎组合 | 性质 | 上手难度 | 月成本（个人） | |

写在前面

这是一篇接续我 2021 年所写 《锐浪报表 Grid++Report 使用教程 - Web 打印解决方案》 的 2026 进阶版。

5 年过去了，Vue 3 + TypeScript + Composition API 已成主流，浏览器 NPAPI/Chrome 扩展插件机制大变，锐浪报表也持续迭代，网页预览成为新主流方案。

本文专攻几个高频搜索问题：Grid++Report 网页预览实现、Vue WEB 报表插件接入、Vue 3 + TypeScript 完整封装、ERP/用友风格的销售发票打印。

写在前面：本文与老文的分工

| 维度 | 2021 老文 | 本文（2026） | |

写在前面

这是一篇我用 90 天时间，把一个 2018 年起步的旧博客升级成 2026 版 VuePress 2 站点的完整复盘。

全程踩过的坑：CSP 与广告联盟冲突、PWA 预缓存吞掉新 CSP、PWA 预缓存 404、SAN 证书签发、theme-reco 默认页脚 ICP 不是原生 <a>……一篇文章给你全部答案。

博客线上地址：https://www.lxc666.cn（你正在看的这个站）

1. 为什么选 VuePress 2

2026 年还有人写个人技术博客吗？有，而且活得很好。但选什么框架，主流已经从 5 年前的「Hexo / Hugo」分化出更多选择。我做选型时对比了 4 个主流方案：

| 框架 | 语言 | 主题生态 | 适合人群 | 短板 | |

Cursor 是一款基于 VS Code 的 AI 代码编辑器，但它不只是"加了个 AI 插件"这么简单。从 2024 年火到 2026 年，它已经从"AI 辅助编码"进化到了 "AI 自主编程" 的阶段。

我用 Cursor 开发了多个完整项目，这篇教程把我积累的实战经验全部分享出来。

2025 年初 DeepSeek 横空出世，直接把国产 AI 的天花板捅破了。到 2026 年 3 月，它已经成为国内开发者用得最多的 AI 大模型之一。

为什么这么火？三个字：开源、便宜、强。

• 完全开源：模型权重、训练方法全公开，MIT 协议可商用
• 极致性价比：API 价格只有 GPT-4 的 3%，缓存命中更是低到离谱
• 性能强悍：V3 编码能力媲美 GPT-4，R1 推理能力对标 o1

最近技术圈有个项目特别火 —— OpenClaw，一个开源的本地 AI Agent 平台，GitHub Star 数已经飙到 287k+。

• GitHub：https://github.com/openclaw/openclaw
• 官方文档：https://openclaws.io
• 中文文档：https://openclaws.io/zh/

简单说，它能让你在本地跑一个 AI 助手，接入 Telegram / WhatsApp / Discord 等聊天平台，而且支持多模型、多智能体、工具调用，相当于一个能操控你电脑的私人 AI 管家。

我自己折腾了好几天，踩了不少坑，最后成功部署了多 Bot + 多智能体的架构。这篇文章把所有经验整理出来，保证是你能找到的最详细的教程。

刷了好几年短视频，我终于找到了一个真正好用的去水印工具 —— ClipVid。

说实话，之前试过很多类似的工具，要么收费、要么弹广告、要么只支持一个平台，体验都不太行。ClipVid 是目前用下来最满意的一个，推荐给有同样需求的朋友。

📅

本文写于 2020 年，当时使用的是 Node.js v12.16.1。目前 Node.js 已更新至 v20+ LTS 版本，部分 API 和最佳实践可能已发生变化，请结合最新官方文档参考阅读。

node.js 学习开始

版本
node -v

V 12.16.1

1. 在cmd 命令行输入 node 即进入node的交互环境。

node
在node环境中可以输入js代码并立马执行

node
Welcome to Node.js v12.16.1.  
Type ".help" for more information.  
100+200  
300

npm

第一个node程序(hello Word)

1. 新建一个js文件,命名hello.js,输入以下代码

console.log('hello word')

2. 使用cmd命令cd 进入到当前js文件的目录,然后 输入 node hello.js,

C:\Users\Administrator>cd desktop
C:\Users\Administrator\Desktop>node hello.js
hello word

hello word 成功输入，说明程序运行成功！

注意

关于本页

最开始是在公众号【软件安装管家】中来安装一系列的软件。源链接已全部失效了，现在又找到了新大陆，我只是搬运工，所有功劳归功于【软件安装管家目录】公众号！点击软件名称可跳转到对应的安装教程合集。

手机查找：点右上角 ··· → 搜索页面内容；电脑查找：Ctrl+F

📅

本文写于 2019 年，介绍的是 Element UI（Vue 2 版本）。如果你在使用 Vue 3，请改用 Element Plus，API 有较大变化。

Element UI 组件库使用指南

📅

本文写于 2019 年，基于 Vue 2 + Element UI。如果你在使用 Vue 3，建议查看 vue-element-plus-admin 等 Vue 3 版本的替代方案。

vue-element-admin 后台管理系统开发指南

大家好！今天给大家推荐一个超实用的在线工具 —— LxcTool，专门用来批量处理图片的神器！

如果你经常需要：

• 📸 处理大量截图（做教程、写文档）
• 🌐 优化网站图片（提升加载速度）
• 📱 压缩手机照片（节省空间）
• 🎞️ 制作 GIF 动图（演示效果）

那这个工具绝对能帮到你！最重要的是完全免费，无需注册，打开即用！

🎬 Mac 用户也需要的视频下载工具

抖音、快手、小红书、B站、微博、TikTok 都支持。Safari / Chrome 打开 clipvid.vip 就能用，不用装任何软件。免费、不用注册。

👉 打开 ClipVid

simple是陪伴了我们8年的狗子，性格高傲没什么朋友，对喜欢的人很友好，不喜欢的就很凶！

Kitty

kitty是我们家马上要迎来的小猫子，今天下班后就去接它。

希望Simple跟Kitty能好好相处，成为彼此的好朋友。

📅

本文写于 2019 年，介绍的 ES6 基础特性（Map、Set、解构赋值等）至今仍然通用。但 JavaScript 语言已新增许多特性（如可选链 ?.、空值合并 ??、顶层 await 等），建议结合 MDN 文档 了解最新特性。

ES6

Map 和 Set

1. Map

   在JavaScript的对象中，key值必须是字符串，才可以使用 . 来直接取值。

   const obj = {666:'我是value'}
   obj.666   // Uncaught SyntaxError: Unexpected number
   obj[666]  // '我是value'
   

   Map 是一组键值对的结构，具有极快的查找速度。

   举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：

   var names = ['Michael', 'Bob', 'Tracy'];
   var scores = [95, 75, 85];
   

   给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。

   如果用Map实现，只需要一个“名字”,“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下：

   var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
   m.get('Michael'); // 95
   

   初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

   var m = new Map(); // 空Map
   m.set('Adam', 67); // 添加新的key-value
   m.set('Bob', 59);
   m.has('Adam'); // 是否存在key 'Adam': true
   m.get('Adam'); // 67
   m.delete('Adam'); // 删除key 'Adam'
   m.get('Adam'); // undefined
   

   由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

   var m = new Map();
   m.set('Adam', 67);
   m.set('Adam', 88);
   m.get('Adam'); // 88
   

   个人感觉使用Map时，数据源得按照Map的格式定义好，如果还需要重新遍历来设置格式化，感觉性能提升不大。

   关于Map的性能提升这个比喻相当合理

   唐伯虎点秋香那个场景记得吧

   obj就像那群盖着盖头的姑娘，你要找到秋香，得一个个去掀盖头； map是姑娘们一出来没盖头，看到秋香牵着就走；

2. Set

   Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

   要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

   var s1 = new Set(); // 空Set
   var s2 = new Set([1, 2, 3]); // 含1, 2, 3
   

   重复元素在Set中自动被过滤：

   var s = new Set([1, 2, 3, 3, '3']);
   s; // Set {1, 2, 3, "3"}
   

   注意数字3和字符串'3'是不同的元素。

   通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

   s.add(4);
   s; // Set {1, 2, 3, 4}
   s.add(4);
   s; // 仍然是 Set {1, 2, 3, 4}
   

   通过delete(key)方法可以删除元素：

   var s = new Set([1, 2, 3]);
   s; // Set {1, 2, 3}
   s.delete(3);
   s; // Set {1, 2}
   

📅

本文写于 2020 年，介绍的微信小程序动态 class 绑定方式至今仍适用。不过微信小程序框架已持续更新，建议同时参考 微信官方文档 获取最新 API。

开发需求

方法一

<!-- .wxml 文件 -->
// 定义数组中是否包含某个元素的事件，记得要在顶部定义，或者引入wxs,不然不会生效
<wxs module="m1">
    var hasItem = function(list,item) {
      var boo;
      var index = list.indexOf(item)
      if (index < 0){
        boo = false;
      }else{
        boo = true;
      }          
      return boo;       
    }
    module.exports.hasItem = hasItem;
</wxs>
<view>
    <div class="tags-content">
        <div class="title">选择<span>供应</span>产品分类</div>
        <div class="content">
            <van-grid gutter="10" column-num="3">
                <block wx:for="{{list}}" wx:key="curCode">
                		<!-- 在这里动态绑定class类名 -->
                    <van-grid-item class="{{m1.hasItem(checkSupplyList,item.curCode)?'on':''}}" use-slot data-name="{{item.curName}}" data-code="{{item.curCode}}"
                        bindtap="checkSupply">
                        {{item.curName}}
                    </van-grid-item>
                </block>
            </van-grid>
        </div>
        <div class="bottom-btn">
            <button bindtap="next" type="primary">下一步</button>
        </div>
    </div>
</view>

方法二

  // hasItem.wxs 中定义
  var hasItem = function(list,item) {
    var boo;
    var index = list.indexOf(item)
    if (index < 0){
      boo = false;
    }else{
      boo = true;
    }          
    return boo;       
  }
  module.exports.hasItem = hasItem;

  <!-- wxml中引入 -->
  <wxs src="../hasItem.wxs" module="hasItem" />

记住想要在小程序wxml中使用函数,一定得定义wxs! wxs官方文档

实现过程

1. 通过高德自带的拖拽生成途径点来完成

​ 高德地图 可拖拽的路线规划

<script type="text/javascript">
    var map, route, marker;
    //基本地图加载
    map = new AMap.Map("container", {
        resizeEnable: true
    });
    //绘制初始路径
    var path = [];
    path.push([116.303843, 39.983412]);
    path.push([116.321354, 39.896436]);
    path.push([116.407012, 39.992093]);
    map.plugin("AMap.DragRoute", function() {
        route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
        route.search(); //查询导航路径并开启拖拽导航
    });
</script>

官方的demo相当给力，几行代码就实现了可自由拖拽的功能，第一反应就用这个了，基本功能也能满足。

官方实现效果如下：

在实现点击途经点设置限速的时候，居然发现官方没有给这些生成的途径点提供回调方法，有点儿坑。

设置途经点点击方法

// 通过官方的mousemove方法来实时获取当前鼠标在地图上的位置
triggerClick() {
  const that = this
  that.map.on('mousemove', function(ev) {
  	var lnglat = ev.lnglat
  	that.currentLngLat = lnglat // 将经纬度信息保存下来
	})
},
addMarkerClick() { // 定义点击方法
      const that = this
      var infoWindow = new that.AMap.InfoWindow({
        offset: new that.AMap.Pixel(0, -20)
      })
      // 拿到地图上的marker 点

      setTimeout(() => {
        var dom = document.getElementById('container').getElementsByClassName('amap-marker') // 获取地图上所有途径点的dom
        dom = Array.from(dom).filter((item) => {
          if (item.style.display !== 'none') {
            return item
          }
        })
        dom.forEach((item, index) => { // 遍历dom
          const img = item.getElementsByTagName('img')[0]
          if (img) {
            img.onclick = (e) => { // marker 点击事件
              const list = [ // 经纬度数组格式数据
                that.currentLngLat.lng,
                that.currentLngLat.lat
              ]
              const distanceList = this.mapData.waypoints.map(item => { // 获取每个途经点到当前点距离list
                const p = [item.lng, item.lat]
                return that.AMap.GeometryUtil.distance(list, p)
              })
              const min = Math.min.apply(null, distanceList) // 拿到距离当前位置最近的点
              const index = distanceList.indexOf(min) // 获取索引
              const currentPoint = this.mapData.waypoints[index] // 获取触发点击途经点的经纬度数据
              const LngLat = new that.AMap.LngLat(currentPoint.lng, currentPoint.lat)
              infoWindow.setMap(that.map)
              // 设置marker信息展示内容
              const speedLimit = currentPoint.speedLimit ? currentPoint.speedLimit + 'KM' : '未设置'
              infoWindow.setContent(
                '<b>报警信息 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>  <br/><br/>' +
            '<b> 限速： </b> <span class="speed-input">' + speedLimit + '</span><br/><br/>' +
            `<button id="closeBtn" type="button" class="el-button el-button--small" "><span>关闭</span></button> <button id="editBtn" type="button" class="el-button el-button--primary el-button--small"><span>设 置</span></button>`
              )
              infoWindow.open(that.map, LngLat) // 打开弹窗消息
              setTimeout(() => {
                document.getElementById('closeBtn').onclick = () => {
                  infoWindow.close()
                }
                document.getElementById('editBtn').onclick = () => {
                  that.limitSet(index)
                }
              }, 500)
            }
          }
        })
      }, 500)
   }

到这里之后 基本能完成想要的效果了。

但是由于官方api的限制，当我大于十六个网点后出现了这种情况。

超过十六个点后，前面的点就没有在线路规划的范围内了，这样肯定是不行的。

2. 放弃官方的拖拽方法，来实现途径点规划路线

由于时间关系，先把最终完成的效果展示一下，具体实现方法下次完善。

3.源码

今天花了点时间将地图demo整理了出来，基本功能发出来了，具体的业务逻辑大家根据自己的需求做调整。 github源码地址 基本交互
路线详情展示

4.预览地址

demo预览地址