墨林码农专注分享开源项目， 精选开源社区技术干货，分享Github、Gitee上有趣、有价值的项目，一起学习，一起成长。

大家好，我是墨林！

最近又出来一个新的前端框架，叫做Nue.JS。据说它可能会改变你的网络开发方式哦！

简介

Nue是一个让前端开发更加愉快的工具集。官方声称，它对Vue、React和Svelte等生态系统以及Vite、Next.js和Astro等网页开发框架进行了彻底改革。

Nue有很多特点：

使用渐进增强、关注点分离和语义Web设计，能提供更高水准的性能、更好的可扩展性和大幅改进的开发体验。Nue是一个非常小巧的JavaScript库，压缩后仅2.3kb。它没有hooks、effects、props、portals、watchers、provides、injects、suspension等抽象概念。只需要掌握HTML、CSS和JavaScript的基础知识，就能轻松上手。Nue消除了TCP慢启动算法和渐进增强带来的“地狱”。它使用基于HTML的模板语法。Nue具有响应式和异构组件模型，适用于创建各种类型的应用程序。它允许在单个文件中定义多个组件，从而简化依赖管理。Nue简化了工具链，包含了render函数进行服务器端渲染，以及compile函数生成浏览器端组件。在开发环境中，无需复杂的打包工具如Webpack或Vite也能正常运行。安装使用

Nue的安装和使用非常简单：

首先创建一个nue项目：

# 下载项目git clone https://github.com/nuejs/create-nue.git --depth 1# 进入到项目内cd create-nue# 安装依赖npm install# 启动服务npm run start

服务启动成功后，访问http://localhost:8080就ok了。

语法

Nue的语法非常简单明了，基于HTML的模板语法让你轻松上手。你可以控制流、循环等等。还支持自定义语法和组件文件的扩展名为.nue。

基于 HTML 的模板语法

<div>控制流

<b :if="type == 'A'">A</b><b :else-if="type == 'B'">B</b><b :else-if="type == 'C'">C </b><b :else>Not A/B/C</b>事件处理

事件处理方面，你可以定义实例方法来处理事件。Nue还提供了一些方便的快捷方式来处理常见的DOM事件操作功能，比如@submit.prevent来阻止表单提交。

定义实例

<dialog> <button @click="close">Close</button> <script> close() { this.root.close() location.hash = '' } </script></dialog>目标

Nue的目标是打造一个生态系统，解决前端疲劳问题。

它计划发布以下几个项目：

结束语

几个简单的字符，就能创造出欢乐，

几个简单的号码，便能写出奇迹。

一个键盘，就能畅游世界，

一根网线，便能知晓天下。

创作不易，感谢大家的支持。后续也会分享更多的干货和技术资讯，您的阅读就是对小编的支持，再次感谢各位老铁！