自研前端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

GoWeb必备理论

GoWeb必备理论

关于goweb，你不得不知道的知识 若是初学者可以借鉴GoWeb查阅本文。 HTTP状态码： 意义 每个状态码都是，http设计者对“网络通讯”中可能出现的情况的假设、预判。他就相当于现实世界的信号灯，就像大家一遇到404，就知道资源找不到了。一遇到500就知道服务器挂了。这种共识，也就是如今万维网的高效率的基础之一。 http状态码是日常开发，修改bug，的居家必备神器。咱们对常见状态码做了分类。 1、必须掌握的状态码 200 ok 最常见的状态码，代表请求完全正确，比如打开网页、调用api啥的。 301 moved permanently 资源永久迁移（例：访问时a.com会被从定项到b.com） 302 Found （部分资源，临时迁移） 400 Bad request（请求出错，参数缺少什么的..） 401 unauthorized（没有登入） 403 forbidden（
前端知识点全解析

前端知识点全解析

作为一名前端高级开发人员，面试不仅考察知识点的记忆，更关注对原理的理解、工程化的思考以及解决复杂问题的能力。本文将从 HTML/CSS、JavaScript、浏览器与网络、框架、工程化、性能优化、算法与设计模式等多个维度，系统梳理前端面试中的核心知识点，并提供深入解析及案例，帮助你在面试中展现出真正的技术深度。 1. HTML & CSS 基础 1.1 语义化 HTML 讲解：语义化 HTML 是指使用具有明确含义的标签（如 <header>、<nav>、<article>、<section>）来描述网页结构，而不是单纯使用 <div> 和 <span&

Claude+Android Studio联动开发：我是如何用AI助手10分钟搞定WebView项目模板的

Claude+Android Studio联动开发：我是如何用AI助手10分钟搞定WebView项目模板的 上周三下午，产品经理突然丢过来一个需求：“下周一要演示一个内嵌H5页面的App原型，能不能先搭个架子？”我看了眼时间，距离下班只剩两小时。要在这么短的时间内从零开始搭建一个完整的Android WebView项目，还要处理好权限声明、Gradle依赖、网络配置这些琐碎但容易出错的部分，换作以前我肯定要加班到深夜。 但这次，我只用了十分钟。 不是因为我手速快，而是因为我找到了一个全新的工作流——让Claude这个AI助手帮我处理那些重复性的配置工作。整个过程就像有个经验丰富的搭档在旁边，你只需要告诉他你想要什么，他就能把代码、配置、甚至最佳实践建议都准备好。 如果你也在Android开发中遇到过类似的情况：每次新建项目都要反复查阅文档，担心漏掉某个关键权限，或者被Gradle版本兼容性问题搞得焦头烂额，那么这篇文章就是为你准备的。我会详细拆解如何通过自然语言指令，让Claude生成一个完整、可运行的WebView模块，并且补充那些官方文档很少提及的组件化实践细节。 1.
论文和文章提示词去AI痕迹：手把手教你把AI写的文章改成“人味儿”，从学生党到博主都能用的去AI痕迹攻略

论文和文章提示词去AI痕迹：手把手教你把AI写的文章改成“人味儿”，从学生党到博主都能用的去AI痕迹攻略

论文和文章提示词去AI痕迹：手把手教你把AI写的文章改成“人味儿”，从学生党到博主都能用的去AI痕迹攻略 本文围绕降低文章 AI 占比展开，针对学生论文、博主文案、公众号内容等场景，分享了去 AI 化实用方法：用口语化表达、替换 AI 专用词、加入个人经历，同时推荐小发猫伪原创等辅助工具。还提供了多场景可直接套用的提示词模板，帮助用户让 AI 生成内容更贴合个人风格。整体以第一人称、生活化语气呈现，结构自然，避免生硬逻辑和专业术语，助力不同需求的用户写出有 “人味儿” 的原创内容。 人工智能专栏介绍     人工智能学习合集专栏是 AI 学习者的实用工具。它像一个全面的 AI 知识库，把提示词设计、AI 创作、智能绘图等多个细分领域的知识整合起来。无论你是刚接触 AI 的新手，还是有一定基础想提升的人，都能在这里找到合适的内容。从最基础的工具操作方法，到背后深层的技术原理，专栏都有讲解，还搭配了实例教程和实战案例。