自研前端MVVM框架Lire｜从零造框架到一键脚手架，新手也能轻松上手

优质文章学习记录

— 9 min read

自研前端MVVM框架Lire｜从零造框架到一键脚手架，新手也能轻松上手

文章目录

大家好～ 今天给大家分享一个我从零开发的前端轻量MVVM框架——Lire，从核心逻辑编写、npm包发布，到配套脚手架开发，完整实现“造框架+造生态”的闭环，适合前端新手学习MVVM原理，也能用于轻量项目开发，全程零外部依赖、开箱即用！

一、为什么要自研Lire框架？

作为前端开发者，我们每天都在用Vue、React等成熟框架，但很少有人深入了解其底层原理——比如“响应式数据是怎么实现的？”“模板编译的核心逻辑是什么？”“脚手架为什么能一键创建项目？”

开发Lire的初衷，就是把“黑盒”的框架原理变成“白盒”：用最简单的代码实现MVVM核心能力，同时搭建完整的发布和使用生态，既满足自己对底层原理的探索，也能给新手提供一个“看得见、摸得着”的学习载体，避免只会用框架、不懂其本质的尴尬。

当然，除了学习价值，Lire本身也是一个可用的轻量框架——零外部依赖、打包体积小，适合快速开发小型交互页面，不用为了简单需求引入庞大的成熟框架。

二、Lire框架核心特性（现阶段）

Lire基于原生JS开发，无需任何外部依赖，核心实现了MVVM框架的3大核心能力，兼顾实用性和学习性：

1. 响应式数据绑定

通过Object.defineProperty劫持数据的getter/setter，实现“数据驱动视图”——修改数据，页面自动更新，无需手动操作DOM，和Vue的响应式核心逻辑一致。

// 示例代码import Lire from'@dongxiang678/lire'; window.app =newLire({el:'#app',// 挂载节点data:{message:'Hello Lire！',count:0},template:` <div> <h1>{{ message }}</h1> <p>计数：{{ count }}</p> </div> `});// 修改数据 → 页面自动更新 app.message ='Lire框架真好用！'; app.count =10;

2. 模板编译能力

支持插值表达式（{{ 变量名 }}）和@click事件绑定，核心通过正则匹配模板中的特殊语法，将其编译为可执行的DOM内容，让开发者摆脱繁琐的DOM操作。

3. 事件绑定

支持通过@click绑定自定义方法，处理用户交互（如点击、重置等），方法内部可直接通过this访问响应式数据，语法和Vue高度相似，降低学习和使用成本。

4. 零外部依赖

核心代码仅几百行，打包后体积极小，无需引入axios、vue-router等任何外部依赖，仅依赖浏览器原生API，开箱即用。

5. 配套脚手架支持

开发了配套的create-lire脚手架，实现“一键创建项目、自动安装依赖、快速启动服务”，复刻Vue CLI的使用体验，新手也能轻松上手，不用手动配置任何环境。

三、如何快速使用Lire框架？（新手友好）

Lire已发布到npm仓库，支持两种使用方式，全程无需复杂配置，新手也能1分钟上手。

方式1：通过脚手架一键创建项目（推荐）

无需手动安装依赖、配置文件，脚手架自动帮你搞定所有准备工作：

# 一键创建Lire项目（无需提前安装脚手架） npx @dongxiang678/create-lire 你的项目名 # 进入项目目录cd 你的项目名 # 启动项目（自动启动live-server，默认端口8080）npm run serve

启动后访问http://127.0.0.1:8080，就能看到默认的示例页面，点击按钮可测试响应式和事件绑定功能，无任何报错。

方式2：本地安装，手动引入（适合学习和自定义配置）

# 初始化项目（可选，新版npm可省略）npm init -y # 安装Lire框架npminstall @dongxiang678/lire

创建index.html，引入框架并使用：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>Lire示例</title></head><body><divid="app"></div><scripttype="module">// 引入Lire框架import Lire from'./node_modules/@dongxiang678/lire/dist/lire.js';// 初始化框架 window.app =newLire({el:'#app',data:{title:'Lire框架手动引入示例',content:'从零造框架，从Lire开始～'},template:` <div> <h1>{{ title }}</h1> <p>{{ content }}</p> <button @click="changeContent">修改内容</button> </div> `,methods:{changeContent(){this.content ='你已经学会手动使用Lire框架啦！';}}});</script></body></html>

四、开发历程回顾（踩坑总结）

从0到1开发Lire框架+脚手架，并不是一帆风顺的，也踩了很多前端工程化的坑，分享给同样想自研框架的小伙伴，避免重复踩坑：

  1. npm包发布坑：初期包名被占用，改用@dongxiang678/lire作用域包；遇到2FA权限问题，生成带Bypass 2FA的读写令牌解决；发布后有同步延迟，需等待1-5分钟才能正常安装。
  2. 路径和环境坑：测试时遇到CORS报错（file协议限制），用live-server启动HTTP服务解决；MIME类型报错，排查出是包安装路径错误，用–prefix ./强制指定安装目录。
  3. 脚手架模板坑：初期模板中app变量是模块局部作用域，导致onclick事件找不到app，修改为window.app挂载到全局，同时升级脚手架版本，保障所有用户都能用到修复后的模板。
  4. 原理实现坑：响应式数据初期无法监听数组索引修改，优化Object.defineProperty的劫持逻辑；模板编译时正则匹配不精准，调整正则表达式，兼容多空格、多换行场景。

这些坑看似琐碎，但都是前端工程化和框架开发的核心知识点——踩过这些坑，才真正理解“为什么成熟框架要这么设计”“工程化配置的意义是什么”。

五、Lire框架后续迭代计划

目前Lire已经实现了MVVM框架的核心能力，后续会逐步迭代优化，向更实用、更完善的方向发展，优先级如下：

  1. 短期迭代（1-2天）：新增v-model双向绑定（适配输入框）、v-for列表渲染、v-if/v-else条件渲染，完善模板语法，提升实用性。
  2. 中期迭代（1周左右）：实现简单的组件系统（支持自定义组件）、前端路由（基于hashchange）、生命周期钩子（mounted/updated）。
  3. 长期迭代（工程化完善）：支持TypeScript、优化打包配置（生成UMD格式，适配更多引入方式）、新增全局状态管理，逐步向成熟框架靠拢。

六、适合谁使用/学习Lire？

  1. 前端新手：想深入理解MVVM框架原理（响应式、模板编译），但觉得Vue/React源码太复杂，Lire代码简洁、逻辑清晰，是绝佳的学习载体。
  2. 需要开发轻量项目的开发者：开发小型静态交互页面（如个人简历、计算器、待办清单），不需要成熟框架的庞大功能，Lire零依赖、体积小，能提升开发效率。
  3. 想尝试自研框架的开发者：可以参考Lire的开发思路、npm发布流程、脚手架开发逻辑，快速上手“造框架”，少踩坑。

七、最后想说的话

开发Lire的过程，是从“用框架的消费者”到“造框架的生产者”的思维跃迁——以前用Vue CLI创建项目，觉得一切都是理所当然，直到自己开发脚手架，才明白每一个“一键操作”背后，都是工程化逻辑的支撑；以前用响应式数据，觉得是框架的“魔法”，直到自己用Object.defineProperty实现，才懂其底层原理。

Lire目前虽然简单，但它完整实现了“框架开发→npm发布→脚手架配套→用户使用”的闭环，对于个人成长而言，是一次极具价值的实践。

如果你也对框架原理感兴趣，或者需要一个轻量的前端框架，欢迎尝试Lire框架，也欢迎提出宝贵的意见和建议，一起迭代优化！

相关地址

✨ 从零造框架，不是为了替代成熟框架，而是为了读懂框架、提升自己——愿每一个前端开发者，都能从“会用”到“懂原理”，再到“能创造”！

Read more

OpenClaw实战系列01：OpenClaw接入飞书机器人全接入指南 + Ollama本地大模型

文章目录 * 引言 * 第一步：环境准备与核心思想 * 第二步：部署Ollama——把大模型“养”在本地 * 1. 安装 Ollama * 2. 拉取并运行模型 * 3. 确认API可用性 * 第三步：安装OpenClaw——AI大脑的“躯干” * 1. 安装Node.js * 2. 一键安装 OpenClaw * 3. 验证安装 * 第四步：打通飞书——创建并配置机器人 * 1. 创建飞书应用 * 2. 配置机器人能力 * 3. 发布应用 * 第五步：OpenClaw与飞书“握手” * 方法一：使用 onboard 向导重新配置（推荐最新版） * 方法二：手动添加渠道 * 批准配对 * 第六步：实战测试与玩法拓展

3步实现Stable Diffusion本地部署与性能优化指南

3步实现Stable Diffusion本地部署与性能优化指南 【免费下载链接】stable-diffusion-webui-reForge 项目地址: https://gitcode.com/gh_mirrors/st/stable-diffusion-webui-reForge Stable Diffusion WebUI Forge/reForge是一款基于Gradio(开源Web界面框架)构建的AI绘画工具，通过模块化架构设计和推理加速技术，帮助用户在本地高效部署专业级图像生成系统。本文将从核心价值解析、环境准备、多场景启动方案到进阶优化技巧，全面指导您完成从部署到调优的全流程。 核心价值解析：为何选择reForge架构？ ⚡️ 推理引擎深度优化 采用自研的K-Diffusion采样算法优化实现，相比传统扩散模型推理速度提升40%，在保持图像质量的同时将生成时间从平均60秒压缩至35秒以内。通过动态阈值调整和混合精度计算，在消费级GPU上也能流畅运行512x512分辨率图像生成。 🔧 模块化插件生态 创新的插件架构支持ControlNet、LoRA等扩展功能即

Llama-3.2V-11B-cot一文详解：bf16显存优化与流式输出实现原理

Llama-3.2V-11B-cot一文详解：bf16显存优化与流式输出实现原理 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。该工具针对双卡RTX 4090环境进行了深度优化，解决了视觉权重加载等关键问题，支持Chain of Thought(CoT)逻辑推演和流式输出功能。 1.1 核心特性 * 新手友好设计：提供开箱即用的优化配置，无需复杂设置 * 双卡自动分配：智能拆分模型到两张显卡，充分利用硬件资源 * bf16显存优化：采用半精度计算大幅降低显存占用 * 流式推理展示：实时显示模型思考过程，提升交互体验 * 现代化界面：基于Streamlit构建直观易用的聊天式界面 2. bf16显存优化原理 2.1 半精度计算的优势 传统深度学习模型通常使用fp32(单精度浮点数)进行计算，但这会带来较大的显存开销。bf16(Brain Floating Point)是一种16位浮点数格式，相比fp32可以： * 减少50%的显存占用
Springboot 整合 Java DL4J 打造自然语言处理之智能写作助手

Springboot 整合 Java DL4J 打造自然语言处理之智能写作助手

🧑 博主简介：ZEEKLOG博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c=1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编程，高并发设计，Springboot和微服务，熟悉Linux，ESXI虚拟化以及云原生Docker和K8s，热衷于探索科技的边界，并将理论知识转化为实际应用。保持对新技术的好奇心，乐于分享所学，希望通过我的实践经历和见解，启发他人的创新思维。在这里，我希望能与志同道合的朋友交流探讨，共同进步，一起在技术的世界里不断学习成长。