还记得去年提到“国产模型”时，我们下意识想到的是 DeepSeek——对话挺顺，Coding 却像新手村：前端能糊弄，后端一碰就崩，改 BUG 直接摆烂。

现在，国产模型终于把“写代码”这件事卷到全球第一梯队。

如果你也受够了“贵、慢、卡”的海外模型，是时候换个国产电锯了——MiniMax-M2，全球第五、编程场景第一，100 TPS 热更新式出码。

用完你会发现：国产 Coding 模型，已经不只是“能写”，而是写得比你快，还比你便宜。

从 DeepSeek 到 Claude，再到 M2：我的踩坑三连

• DeepSeek 的无奈： 上周把祖传 Vue 订单模块扔给它，前端样式倒是出的很快，但是交互逻辑却直接摆烂——循环嵌套 4 层、内存泄漏一个不修，CI 一片红。

• Claude 的痛点： 咬牙换 Claude 4.5，网速先卡 30 秒，TPS 40 像老爷车，一晚跑 15 美金，月底看账单心更堵——还得翻墙。

• M2 的登场： 同行甩给我一条国内链接：MiniMax-M2，限时免费，TPS 100，直连不翻墙。

抱着“白嫖”心态试了一把—— 分分钟帮我修复代码中内存泄漏、并且帮我增加单元测试!

什么是 MiniMax-M2？

MiniMax M2 是 MiniMax 公司刚刚在 2025 年 10 月发布的最新大语言模型！作为国产 AI 的代表作品，这次真的给我们带来了惊喜～

• 230B 总参，只激活 10B 的 MoE 怪物，专为 Coding & Agent 砍成本、提速度。
• 工作流程：自然语言 → 任务拆解 → 多文件编辑 → 本地/沙箱运行 → 自动测试 → 给你部署链接。
• 定位：专为「Coding + Agent」场景打造的轻量级、高速度、极致性价比模型。

核心优势：价格、速度、安全、易用、开源，全部拉满

• 价格：8.4 元/百万 token，Claude 4.5 的 8%，限时还全量免费——一杯奶茶钱就能跑一整周。
• 速度：100 TPS 出码，像热更新一样实时，写完立刻刷新看效果，40 TPS 的老爷车直接甩后视镜。
• 网络：国内直连，0 FQ，公司内网也能 ping 通，再也不用给代理打补丁。
• 易用：Cursor/Claude Code 只改一行 BaseURL，30 秒完成“换芯”，零学习成本。
• 开源：MIT 协议，源码公开，可私有部署可二开，真正的“国产可控”。

5 分钟上手：把 VSCode 变成最强 Coding 工具

• 第一步：获取 Key

打开网站：https://platform.minimax.io ，没有账号的同学需要自行注册账号登录即可，这里就不做过多的讲解

点击 Account 菜单：

进入个人账户页面， 复制 GroupID：

点击 API Keys 生成 密钥：

输入密钥名称，点击**“创建”**：

此时会弹出一个对话框。在点击**“确认”**之前，请使用复制图标安全地保存 API 密钥，因为该密钥将不会再次显示。

VSCode 集成

M2 可以集成到 Claude Code/ Cursor/ Cline/ Kilo Code/ Roo Code/ Grok CLI/ Codex CLI /Gemini CLI/ Droid 等多种开发工具中，这里以 VSCode 举例，更多工具配置教程可以参考：

• 配置教程：https://platform.minimax.io/docs/guides/text-ai-coding-tools

安装适用于 VS Code 的 Claude Code 扩展：

安装完成后，点击“设置”：

配置模型以 MiniMax-M2：

在“设置”中 Claude Code: Selected Model，输入 MiniMax-M2：

点击 Edit in settings.json：

修改 claude-code.environmentVariables 为以下设置；

把 <MINIMAX_API_KEY> 替换成你在官网生成的 key：

大功告成，测试一下，在输入框中输入：你是什么模型？

M2 实测：3 个前端高能场景，全程录屏

① 屎山代码优化

作为一名程序员，接手“屎山代码”已经是家常便饭了，每次在前辈的代码中修修改改简直是要了我们的老命，这下好了，一切都可以交给 M2

直接在输入框中输入：帮我修复代码中内存泄漏、并且帮我增加单元测试；

果然，在代码中发现了内存泄漏问题：

• 第 36-38 行：window.addEventListener('resize', handleResize) 添加了 resize 事件监听器，但没有在组件卸载时移除
• 第 30-34 行：setTimeout 创建了定时器，但没有在组件卸载时清除

定位到问题之后 MiniMax M2 全部过程帮你自动完成修复:

并且自动帮我生成好单元测试用例，而且还附带文档:

② Web Dev 一条龙｜ 上线个人站

测试一下 MiniMax M2 Web Dev 能力，在输入框中输入：帮我开发一个前端开发爱好者的个人网站

MiniMax M2 自动分析网站功能、设计风格、技术栈、技术偏好等.

并且帮我自动添加了动画效果，使得页面变得更加炫酷：

• 添加滚动触发动画（使用 Intersection Observer）
• 实现打字机效果（Hero 区域标题）
• 添加数字滚动动画（统计数据）
• 实现项目卡片 3D 翻转效果
• 添加技能进度条动画（数字计数）
• 实现鼠标跟随效果
• 添加背景粒子动画
• 实现页面切换动画
• 测试所有动画效果

原本需要一周开发的工作量，使用 MiniMax M2 只需要几分钟即可完成！

贴心的 MiniMax M2 还帮我自动启动了开发服务；

直接点击链接即可预览：

③ 技术分享 PPT 自动生成

作为一名前端开发人员，写 PPT 做汇报已经成为常态，经常需要分享一些新的技术方案和技术趋势。

刚好前段时间要在团队做技术分享，但是平时工作太忙了根本没有太多的时间和精力来深入的写分享文档，还好有 M2,帮我省去了不少的时间。

直接访问 MiniMax M2 Agent 网站：https://agent.minimaxi.com/

选择专业模式，在输入框中输入：生成一个 前端流行库 Echarts 产品介绍 PPT

MiniMax M2 在收到请求之后，会制定一份完善的 PPT 制作计划，包括任务目标、执行步骤、预期交付物.

然后会使用 deep_research_tasks 来进行全面的研究，收集关于 ECharts 的各种信息，不得不说这一步真的是太详细了

MiniMax M2 会先收集 ECharts 的基本信息，包产品概述、发展历程等，并且自动提取关键网站的详细内容

逐个访问相关网站，获取页面上的交互元素，提取相关信息

最后生成一份完整的研究报告：

再反观 KIMI, 生成的都是一些表面文章的内容，不得不说差距实在是太大了

M2 在海外已经卷疯了

• OpenRouter：发布 72h 冲到全球调用第 4，编程分类第 1，把 Claude 挤到第 2;

• HuggingFace Trending：三连冠，日增 Star 1.2k;

• Django 作者 Simon Willison：“200TPS 的打字机，终端里飞起来”

关键是 MiniMax-M2 价格仅为Claude的8%，全球性价比最高模型：$0.3/2.1元 (输入)，$0.3/2.1元(输入)，1.2/8.4 元(输出)，价格显著低于 K2/GLM4.6 等，具有极高性价比！

横向 Benchmark：M2 vs 主流模型（前端语言）

场景	M2	Claude 4.5	GLM-4-0520	Kimi-K2
组件生成	9 min/0 报错	13 min/2 报错	11 min/1 报错	12 min/1 报错
3D 特效	✅ 真 3D 60FPS	❌ 雪花屏	✅ 2D 旋转	✅ 2D 旋转
价格/百万	￥ 8.4	￥ 105	￥ 67	￥ 90
免费额度	14 天不限	无	30 元	10 元

结论：性能 ≈ 顶级，价格=零头，速度=翻倍。

总结 & 羊毛入口

当 AI 能以 8% 成本、2 倍速度、0 报错写完你下周的排期，继续手敲代码就成了可选项。

MiniMax-M2 限时免费的两周，是给所有开发者的一次“技术平权”，赶快用起来吧！

• 免费入口：https://platform.minimax.io

Vue 团队成员真的是太卷了，又搞了个新玩具：markdown-exit——markdown-it 的 TypeScript「重构版」来了！

如果你用过 VitePress、Slidev、或者任何 Vue 系文档站，你一定对 markdown-it 不陌生：它就是把 Markdown 变成 HTML 的那台“发动机”。

问题是，这台发动机是 2014 年的设计，纯 JavaScript 写成，类型靠社区维护，异步插件更是想都别想。

于是，Vue 团队的核心成员 Anthony Fu 在推特上“许愿”：

“我找这东西太久了！缺少异步插件限制了我们太多玩法，真希望 VitePress、Slidev 能用上。”

不到两周，SerKo（@serkodev）直接甩出一个新仓库——markdown-exit。

它到底干了啥？

把 Markdown 转成 HTML，但换了颗**“TypeScript 心脏”**。

能力	markdown-it	markdown-exit
输出 HTML	✅	✅（100% 兼容）
同步插件	✅	✅
异步插件	❌	✅（官方支持）
类型定义	社区 @types	原生自带
现代构建	无	Vite + Vitest + pnpm monorepo
代码高亮	靠插件	异步高亮一句话搞定

对 Vue 生态意味着什么？

• VitePress：以后可以在编译阶段做“异步代码拉取”、“远程片段嵌入”而不用写脏脚本。
• Slidev：幻灯片里直接引用 GitHub 文件、CodePen、CodeSandbox，实时渲染。
• 普通 Vue 项目：服务端渲染（SSR）或边缘函数（Vite SSR / Nuxt）里，再也不用 require('@types/markdown-it') 一把梭。

Anthony Fu 在转发里写：

“等不及想在 VitePress、Slidev 上落地了！”

两分钟上手

# 最新特性版（公测中）
npm i markdown-exit

# 求稳用兼容版
npm i markdown-exit@legacy

// 命名导入，Tree-shaking 友好
import { createMarkdownExit } from 'markdown-exit'

const md = createMarkdownExit()
console.log(md.render('# Hello markdown-exit'))

异步高亮示例（以前做不到）：

md.use(asyncPlugin, async (code, lang) => {
  const html = await fetchHighlighter(lang) // 任意异步操作
  return html
})

迁移零成本

旧项目里全局替换即可：

- import MarkdownIt from 'markdown-it'
+ import MarkdownExit from 'markdown-exit'

所有插件、配置、渲染结果一行不改，直接运行。

时间线 & 路线图

• 现在：v1.0.0-beta 公测，功能已齐，API 锁定中。
• 未来 1 ～ 2 个月：发布正式版 v1.0.0；VitePress、Slidev 官方模板同步切换。
• 长期：探索 AST 级别缓存、WebAssembly 加速、流式渲染等高级玩法。

结语

从 vue/core 到 vite，再到现在的 markdown-exit，Vue 团队及其周边伙伴似乎一直在做同一件事：
把“底层基础设施”重新洗一遍牌，让上层开发者爽到飞起。

所以，下次你要在 Vue 项目里“整点 Markdown”时，不妨试试这颗新心脏——
npm i markdown-exit，然后跟过去的类型报错、异步限制说拜拜吧！

• markdown-exit Github 地址：https://github.com/serkodev/markdown-exit

用过 Electron 的兄弟都懂，好处是“会前端就能写桌面”，坏处嘛，三座大山压得喘不过气：

• 体积巨婴
  空项目打出来 100 M+，每次更新又得 80 M，用户宽带不要钱？

• 内存老虎
  开个“Hello World”常驻 300 M，再开几个窗口，直接 1 G 起步，Mac 用户看着彩虹转圈怀疑人生。

• 启动慢动作
  双击图标 → 图标跳 → 白屏 3 秒 → 终于看见界面，节奏堪比 56 K 猫拨号。

老板还天天催：“两周给我 MVP！”—— 抱着 Electron，就像抱着一只会写代码的胖熊猫，可爱但跑不动。

主角登场：GPUI

Rust 圈最近冒出一个“狠角色”——GPUI。

GPUI，是 Zed 编辑器团队推出的 Rust UI 框架，以 GPU 加速和高效渲染模式悄然崛起。

它不卖广告，纯开源，一句话介绍：直接拿显卡画界面，浏览器啥的全部踢出去。

• 底层用 wgpu，Metal / Vulkan / DX12 想调谁就调谁；
• 上层给前端味道的 DSL，写起来像 React，跑起来却是纯原生；
• 安装包 12 M，内存 50 M，启动 0.4 秒，表格滑到 60 帧不带喘。

说人话：把 Electron 的“胖身子”抽真空，留下一身腱子肉。

亮点：为什么值得换坑？

场景	Electron 现实	GPUI 现实
安装包	100 M+ 是常态	12 M 起步，单文件都能带走
空载内存	一开 300 M，再开几个窗口直奔 1 G	50 M 晃悠，再多窗口也淡定
启动速度	白屏 2~3 秒	肉眼可见 0.4 秒
大数据表格	十万行就卡成 PPT	百万行照样 60 fps，滑到飞起
主题切换	重载 or 重启	一行代码，热切换，深色浅色瞬间完成

外加 60+现成组件：按钮、表格、树、日历、Markdown、穿梭框……皮肤直接照搬 Web 圈最火的 shadcn/ui，设计师不用改稿，开发直接复制粘贴。

五分钟上手：从零到 Hello Window

① 先装 Rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

一路回车即可，30 秒搞定。

② 新建工程

cargo new my-app && cd my-app

③ 把依赖写进 Cargo.toml

[dependencies]
gpui = "0.2"
gpui-component = "0.1"

④ src/main.rs 写几行

use gpui::*;

fn main() {
    App::new().run(|cx: &mut AppContext| {
        Window::new("win", cx)
            .title("我的第一个 GPUI 窗口")
            .build(cx, |cx| {
                Label::new("Hello，GPUI！", cx)
            })
            .unwrap();
    });
}

⑤ 跑！

cargo run

三秒后窗口蹦出来，Hello 世界完成。没有黑框，没有白屏，体验跟原生记事本一样丝滑。

写代码像 React，跑起来像 C++

组件化 + 事件回调，前端同学一看就懂：

Button::new("点我下单", cx)
    .style(ButtonStyle::Primary)
    .on_click(|_, cx| {
        println!("订单已发送");
        notify_user("成交！", cx);
    })

背后是 Rust 的零成本抽象，编译完就是机器码，没有浏览器，没有虚拟机，没有 GC 卡顿，性能直接拉满。

老网页也别扔，一键塞进来

历史项目里还有 React 报表？开 webview 特性就行：

gpui-component = { version = "0.1", features = ["webview"] }

窗口里留一块“浏览器区域”，把旧地址挂进去，零改动复用，妈妈再也不用担心重写代码。

Electron 依然是老大哥，但“胖身子”在 2025 年真的有点跟不上节奏。
新项目、新团队、新想法，不妨给 GPUI 一个机会——试过之后，你可能再也回不去了。

• GPUI 官网：https://www.gpui.rs/
• GPUI Component 官网：https://longbridge.github.io/gpui-component/

就在昨天，JavaScript 工具链领域迎来一则重磅消息：

由 Vite 作者尤雨溪（Evan You）创立的 VoidZero Inc. 宣布完成 1250 万美元 A 轮融资，由全球顶级风投 Accel 领投。

本轮融资将全力加速 Vite + —— 下一代统一 JavaScript 工具链的研发与落地。

从 Vite 到 Vite +：打造下一代前端基础设施

自 2020 年发布以来，Vite 凭借“极致快的冷启动”与“即时热更新”迅速成为前端构建工具的新标杆。

然而，随着项目规模与复杂度指数级增长，社区对更统一、更高性能、更可扩展的工具链需求也日益迫切。

为此，VoidZero 提出 Vite + 计划，旨在用 Rust 重写底层核心，将解析、转换、打包、压缩、测试等关键步骤统一到一个高性能工具链中，实现：

• ⚡ 极致性能：基于 Rust 原生实现，构建速度提升 10 倍以上
• 🧩 统一架构：共享 AST、模块解析与依赖图谱，彻底消除重复解析开销
• 🔌 可插拔：各组件可独立使用，方便定制化集成
• 🌍 跨运行时：不与 Node.js 绑定，支持 Deno、Bun、浏览器等多种环境

核心子项目齐头并进

目前，Vite + 已孵化出多个关键子项目，均取得显著进展：

项目名称	功能定位	性能亮点
Oxc	解析器 / Linter / Formatter / Transformer	比 ESLint 快 50~100 倍
Rolldown	打包器（Rust 版 Rollup）	比 esbuild 等同类工具更快
Vitest	测试运行器	被誉为“功能最完整的 Web 测试方案”

官方数据显示，这些项目合计每周 npm 下载量已突破 3000 万

GitHub 累计星标 12 万 ➕，依赖项目超 620 万，成为业界最具影响力的工具链生态之一。

顶级资本与行业巨头加持

除 Accel 外，本轮融资还吸引了多位开发者工具领域的明星企业家与独角兽公司参与：

• Tom Preston-Werner（GitHub 创始人）
• Eric Simons（StackBlitz 创始人）
• Paul Copplestone（Supabase 联合创始人）
• David Cramer（Sentry 联合创始人）
• Matt Biilmann & Christian Bach（Netlify 联合创始人）
• Sébastien Chopin（NuxtLabs 创始人）
• Johannes Schickling（Prisma 创始人）
• Zeno Rocha（Resend 创始人）

如此豪华的资方阵容，不仅为 VoidZero 提供了充足的资金支持，也为其后续企业级产品、云服务等商业化探索打开了想象空间。

未来路线图：更快、更稳、更智能

根据官方博客，VoidZero 将在 2025-2026 年重点推进以下计划：

• 稳定 Rolldown，并将其设为 Vite 默认打包器
• 发布 由 Rolldown 驱动的 Vite 正式版
• 完善 Oxc 的 Formatter 与 Linter，逐步替代 ESLint + Prettier
• 推出 企业级工具链解决方案：Monorepo 缓存、AI Agent 集成、可视化分析等
• 持续回馈开源社区，保持所有核心项目开源与中立治理

写在最后

从 Vite 到 Vite +，VoidZero 正在用 Rust 与开源的力量重新定义前端开发体验。

1250 万美元 A 轮融资的完成，无疑为这一宏大愿景注入了强劲动力。

可以预见，在不久的将来，一个更快速、更统一、更智能的 JavaScript 工具链将深刻影响每一位开发者的工作流程。

让我们共同期待 Vite + 的下一个里程碑！

• VoidZero 官方博客：https://voidzero.dev/posts/announcing-series-a

就在前几天，字节跳动开源的“大杀器”--Lynx.js 火了。

号称要把 Vue 带进原生世界，让全球 200 万 Vue 开发者直接“零成本”变身 Native 工程师。

Weex 之后，Vue 移动端「空白十年」

严格来说，Vue 官方从未发布过名为 "Vue Native" 的框架。

2017 年阿里 Weex 曾让 Vue 写原生成为现实，但维护力度递减；

2018 年社区出现的**「vue-native-core」**只是基于 React Native 的薄层封装，2021 年便停更。

自此，Vue 开发者想在移动端打出**「原生体验」**这张牌，只能投向第三方方案：

1. NativeScript-Vue
2. Ionic Vue + Capacitor
3. uni-app / uni-appx

老牌选手集体升级——「Vue Native」储备军

就在字节 Lynx 刷屏的同一个月，几条「低调却重磅」的更新悄悄发布：

• NativeScript-Vue 3.0 正式支持 Vite 热重载与 esbuild 构建，启动时间从 10s 级降到 1s 级；全新 @nativescript/tailwind 让原生控件也能用 Tailwind 语法，开发体验直追 Web。

• Ionic Vue 7 带来 Standalone Components，完全摆脱 Angular 影子；配合 Capacitor 5 的 background-runner 插件，可在后台线程跑 JS，卡顿问题大幅缓解。

• uni-app 正式开放 uni-appx —— 把 Vue SFC 编译成 Kotlin/Swift 的原生代码，脱离 WebView，性能对标 Flutter；华为、阿里小程序已率先接入。

换句话说，「Vue 写原生」这条赛道从未消失，只是从「单选题」变成了「多选题」。

黑马入场：字节 Lynx 的「王炸」在哪里？

与上面「WebView → 原生」的渐进路线不同，Lynx 一出生就是原生渲染 + 双线程架构：

1. UI 线程：自研 PrimJS 引擎 + Rspeedy（Rust 版 Rspack）→ 首帧瞬间直出。
2. 后台线程：跑业务逻辑、网络请求，复杂计算不卡界面。
3. 框架中立：模板语法依旧是 HTML/CSS，但渲染端是 iOS/Android 原生控件，性能与 Flutter 同一梯队。
4. 真实战绩：TikTok 搜索、直播、剪映（CapCut）部分页面已用 Lynx 重构，月活 10 亿+ 场景验证。

更关键的是，Lynx 团队公开喊话：

"We'd love to see Vue on Lynx. PRs are welcome!"

于是 GitHub 出现 vue-lynx-prototype，目标只有一个——让 Vue SFC 直接编译成 Lynx 的双线程包。

抢先尝鲜：Vue + Lynx 代码长什么样？

下面给出一段可直接跑通的 Hello World 示例，方便大家感受「Vue 语法 + Lynx 原生渲染」的写法。

注意：<view>、<text>、<image> 为 Lynx 原生标签，会被编译成对应平台的真实组件；

其余语法与标准 Vue 完全一致。

<!-- HelloLynx.vue -->
<script>
// 支持 ESModule，可直接 import 图片、JSON 等静态资源
import lynxLogo from './assets/lynx-logo.png'

export default {
  name: 'HelloLynx',
  data() {
    return {
      title: 'Hello Vue-Lynx',
      msg: '双线程原生渲染，首帧直出！',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
      // 这里运行在后台线程，不会阻塞 UI
      console.log(`[background] count = ${this.count}`)
    }
  }
}
</script>

<template>
  <!-- <view> 等价于原生容器，支持 flex 布局 -->
  <view class="container">
    <!-- <image> 会被编译成 UIImageView / android.widget.ImageView -->
    <image :src="lynxLogo" class="logo" />

    <!-- <text> 对应 UILabel / TextView，只能包裹文本 -->
    <text class="h1">{{ title }}</text>
    <text class="p">{{ msg }}</text>

    <!-- 事件绑定与 Web 一致 -->
    <button class="btn" @click="increment">
      点我：{{ count }}
    </button>
  </view>
</template>

四种技术路线，怎么选？

• NativeScript-Vue
  渲染：真正的 iOS/Android 原生控件
  性能天花板：★★★★（接近原生）
  开发体验：刚接入 Vite，秒级热重载 + Tailwind 支持，"写 Vue 就像写 Web"
  生态/插件：直接调用原生 API，Cordova/Capacitor 插件也能复用
  适合场景：需要 100% 原生 UI 和原生能力，且团队对 NativeScript 无抵触

• Ionic Vue
  渲染：WebView（可叠加 PWA）
  性能天花板：★★★（足够展示类、电商类应用）
  开发体验：最贴近 Web，组件库成熟，一键生成 App/小程序/PWA
  生态/插件：靠 Capacitor 打通相机、蓝牙、推送等原生功能
  适合场景：追求"同一套代码覆盖 Web + 多平台小程序 + App"，对极致性能不敏感

• uni-app / uni-appx
  渲染：默认 WebView，uni-appx 可编译为 Kotlin/Swift 原生代码
  性能天花板：★★★☆（uni-appx 可到 ★★★★）
  开发体验：CLI、云开发、插件市场一条龙，国内文档最友好
  生态/插件：微信、支付宝、百度、QQ、抖音小程序全覆盖
  适合场景：业务主战场在国内，需要一次发布多端小程序，同时 App 也要能上架

• Vue + Lynx（社区原型）
  渲染：真正的双线程原生渲染（iOS/Android）
  性能天花板：★★★★☆（TikTok 亿级验证）
  开发体验：即将对接 Vite/Rspeedy，目前需手动配置；生态几乎为零
  适合场景：从 0 开始的新项目、对首帧和动画极度挑剔、字节系流量场景或愿意共建生态的团队

一句话总结：

• "现在就要" → 选 1 或 3
• "最像 Web" → 选 2
• "性能极致 + 愿意尝鲜" → 冲 4

「Vue Native」真的要来了？

• 如果你今天就要上线，NativeScript-Vue 3 的 Vite 版已是生产可用；uni-appx 则适合国内小程序+App 一起发。
• 如果你追求极致性能且能接受早期生态，Lynx 社区正在招募贡献者：编译器、路由、DevTools、TypeScript 声明……每个 PR 都可能成为官方标准。

也许再过一年，我们不用再讨论「该选哪个框架」——
npm create vue-native@latest 一条命令，
自动生成 Lynx + Vue 双线程模板，
或者 NativeScript-Vue 的 Vite 脚手架，
亦或 uni-appx 的原生工程。

无论哪条路线，「Vue 写原生」不再是空白——Weex 的遗憾，终将在 2025 被填补

写过原生 Canvas 的朋友都懂：

• API 低级到怀疑人生——画个带圆角的矩形就要 20 行起步，缩放、拖拽、层级管理全靠自己实现。
• 节点一多直接 PPT——超过 5000 个元素，页面卡成幻灯片。

于是，我们一边掉头发，一边默念：“有没有一款库，写得少、跑得快、文档还是中文？”

什么是 LeaferJS

LeaferJS 是一款高性能、模块化、开源的 Canvas 2D 渲染引擎，专注于提供高性能、可交互、可缩放矢量图形的绘图能力。

它采用场景图（Scene Graph）架构，支持响应式布局、事件系统、动画、滤镜、遮罩、路径、图像、文本、滚动视图、缩放、拖拽、节点嵌套、分组等丰富功能。

LeaferJS 的核心优势

高效绘图

• 生成图片、短视频、印刷品：支持导出 PNG、JPEG、PDF、SVG 等多种格式，满足印刷级品质需求。
• Flex 自动布局、中心绘制：内置 Flex 布局，支持中心绘制，后端可批量生成图片。
• 渐变、内外阴影、裁剪、遮罩、擦除：支持线性渐变、径向渐变、内外阴影、裁剪、遮罩、擦除等高级绘图功能。

UI 交互

• 开发小游戏、互动应用、组态软件：支持跨平台交互事件、手势，CSS 交互状态、光标。
• 动画、状态、过渡、精灵：支持帧动画、状态过渡、精灵图、箭头、连线等交互元素。

图形编辑

• 开发裁剪、图片、图形编辑器：提供丰富的图形编辑功能，高可定制。
• 标尺、视窗控制、滚动条：支持标尺、视窗控制、滚动条等编辑器必备功能。

性能巨兽

LeaferJS 最最核心的一点就是性能至上，和目前市面上比较流行的 Canvas 库对比：

如何快速上手

# 1. 创建项目
npm create leafer@latest my-canvas
cd my-canvas
npm i
npm run dev

// 2. 写代码（index.ts）
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79',
    cornerRadius: [50, 80, 0, 80],
    draggable: true
})

leafer.add(rect)

浏览器访问 http://localhost:5173——圆角矩形已可拖拽！

想加 1 万个？直接 for 循环，依旧丝滑。

使用场景

• 在线设计工具——海报、名片、电商 banner，导出 4K PDF 秒级完成。
• 数据可视化——物联网组态、拓扑图、百万点折线图，放大 20 倍依旧清晰。
• 在线白板——教学、会议、脑图，无限画布 + 实时协作。
• 无代码搭建——拖拽生成页面，JSON 一键转 Canvas 应用。
• 小游戏/动画——跑酷、拼图、营销活动，帧率稳 60，包体小一半。

优秀案例展示

基于 Leafer + vue3 实现画板。

• Github 地址：https://github.com/WHSnhcZDYRZC/drawingBoard

fly-cut 在线视频剪辑工具。

• Github 地址：https://github.com/x007xyz/flycut

基于 LeaferJS 的贪吃蛇小游戏。

• Github 地址：https://github.com/yh4922/leafer-greedy-snake

一款美观且功能强大的在线设计工具，具备海报设计和图片编辑功能，基于 leafer.js 的开源版。

• Github 地址：https://github.com/more-strive/tuhigh

更多优秀案例，可以移步官网

• 官网地址：https://www.leaferjs.com/

让“国产”成为“首选”

LeaferJS 不是又一个“国产替代”，而是直接把 Canvas 的性能与体验拉到 Next Level。
它让开发者第一次敢在提案里写：“前端百万节点实时交互，没问题。”
如果你受够了原生 Canvas 的笨拙，也踩腻了国外库的深坑，不妨试试 LeaferJS——

• LeaferJS 官网地址：https://www.leaferjs.com/