4.7k star！前端又出新框架了，你还学的动吗？

大家好，我是开源君！

最近又出来一个新的前端框架，叫做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 class="{ type }">
  <img src="{ img }">
  <aside>
    <h3>{ title }</h3>
    <p :if="desc">{ desc }</p>
    <slot/>
  </aside>
</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的目标是打造一个生态系统，解决前端疲劳问题。

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

更多项目细节，感兴趣的小伙伴可以自行去项目地址探索~

项目地址：
https://github.com/nuejs/nue