前言
据悉，Nue 源自德语单词 neue，与英语中的“new”同义。你也可以叫它 ’虐.js‘
一位构建开源项目、技术产品和初创公司方面拥有 25 年以上的经验的Tero Piirainen ，来自赫尔辛基的前端开发人员对现在前端的构建方式并不满意。工具复杂，代码难以理解，编译时间长，网站过于臃肿。完成项目需要太多的时间和精力，于是自己创建了一个新轮子Nue JS。 它支持服务器端渲染和客户端响应式组件，设计灵感来自 Vue 2.0 和 Riot.js（Piirainen 本人也是 Riot 的原作者）。现在是 Nue 的唯一开发者。
具体来说，Nue 有三大优势：改善开发者体验；加快项目进度；加快页面加载速度。而其最大的亮点在于，它能将用户界面代码量控制在其他同类方案的十分之一。
作者在卡利奥的工作场所
一、什么是 Nue JS
Nue JS 是一个非常小的（压缩后 2.3kb）JavaScript 库，用于构建用户界面。它是Nue工具集的核心。它就像Vue.js、React.js 或 Svelte，但没有hooks、effects、props、portals、watchers、injects、suspensions等各种抽象元素。学习 HTML、CSS 和 JavaScript 的基础知识，就可以开始了。
1.1 用更少的代码构建用户界面
Nue 的最大好处是您需要更少的代码来完成同样的事情。
例如，这是一个用 Nue 编写的自定义列表框组件：
React 版本有2500 行 JavaScript。即使具有 50-80% 的功能，Nue 版本也小了大约十倍：
编码风格的差异
1.2 “这只是 HTML”
Nue 使用基于 HTML 的模板语法：
<div class="{ type }">
<img src="{ img }">
<aside>
<h3>{ title }</h3>
<p :if="desc">{ desc }</p>
<slot/>
</aside>
</div>
虽然 React 声称“Just JavaScript”，但 Nue 可以被认为是“Just HTML”
1.3 按比例构建
Nue 为前端开发带来新水平的可扩展性的三个原因：
-
关注点分离，易于阅读的代码比“意大利面条代码”更容易扩展。
-
极简主义，小型代码库更容易维护和扩展，并且出现错误的空间更小。一百行代码比一千行代码更容易扩展。
-
人才分离，当人们专注于自己的专业领域时，交付速度会更快：内容创建者专注于内容，UX 开发人员进行交互设计，JS 开发人员在前端后端工作。您的团队技能就会达到最佳平衡：
1.4 解耦样式
由于紧密耦合，Nue 不提倡使用作用域 CSS、Tailwind 或其他 CSS-in-JS 框架。最好将样式与布局和结构分开，因为：
-
更多可重用代码：当样式未硬编码到组件时，同一组件可能会根据页面或上下文而看起来有所不同。
-
没有意大利面条式代码：纯 HTML 或纯 CSS 比混合意大利面条式代码更容易阅读
-
更快的页面加载：通过解耦样式，可以更轻松地从辅助 CSS 中提取主 CSS，并将 HTML 页面保持在关键的 14kb 限制以下。
意大利面条代码是对非结构化且难以维护的源代码的贬义词。意大利面条式代码可能是由多种因素造成的，包括项目需求不稳定、缺乏编程风格规则以及软件工程师的技能和经验不足。
1.5 四种组件
Nue拥有丰富的组件模型，它允许您使用不同类型的组件创建各种应用程序：
-
服务器组件在服务器上呈现。它们可以帮助您构建以内容为中心的网站，无需 JavaScript 即可加载速度更快，并且可以被搜索引擎抓取。
服务器端不需要反应性。没有用户交互，也没有 DOM 更新。没有动态更新或生命周期方法。每次渲染仅渲染给定的数据。如果定义了该方法，则在创建组件时仅constructor调用该方法。
服务器端渲染通过以下render方法进行：
render(template: string, data?: Object, deps?: Array<Component>)
template要渲染的基于 HTML 的 Nue 代码
data模板要使用的数据或数据模型。数据可以包含任意数量的属性和方法
deps更复杂的应用程序中的嵌套/依赖组件的数组
-
反应式组件在客户端上呈现。它们帮助您构建动态岛或单页应用程序。
反应式组件是交互式的：它们响应用户在浏览器上的鼠标和键盘事件。
创建应用程序实例createApp() 方法：
createApp(
component: Component,
data?: object,
deps?: Array<Component>) : App
component要挂载的根组件
data组件的可选数据或数据模型。数据可以包含任意数量的属性和方法
deps更复杂的应用程序中嵌套/依赖组件的可选数组。
-
混合组件 其中一些部分在服务器上渲染，一些部分在客户端上渲染。这些组件可帮助您构建响应式、SEO 友好的组件，例如视频标签或图片库。
-
通用组件 在服务器端和客户端上运行相同
1.6 UI库文件
Nue 允许您在单个文件上定义多个组件。这是将相关组件组合在一起并简化依赖关系管理的好方法。
<!-- shared variables and methods -->
<script>
import { someMethod } from './util.js'
</script>
<!-- first component -->
<article @name="todo">
...
</article>
<!-- second component -->
<div @name="todo-item">
...
</div>
<!-- third component -->
<time @name="cute-date">
...
</time>
1.7 更简单的工具
Nue JS 带有一个简单的render服务器端渲染功能和一个compile为浏览器生成组件的功能。您不需要像Webpack或Vite这样的大型捆绑程序来控制您的开发环境。只需将 Nue 导入到您的项目中即可。
二、入门
1.先决条件
- 熟悉命令行
- 安装Bun或Node
- VSCode 扩展 Visual Studio 用户（可选）
2. 创建方式
2.1 create-nue
create-nue 存储库是熟悉 Nue JS 的最佳方式。获取方式如下：
# clone the repository
git clone https://github.com/nuejs/create-nue.git --depth 1
# cd to your newly created app
cd create-nue
# remove git directory
rm -rf .git
# install dependencies
npm install
# Build demo site and start a HTTP server
npm run start
# Open the demo on the browser
open "http://localhost:8080"
启动命令后，您将在该文件夹下看到一个演示create-nue/www，它在端口 8080 上本地提供。
随着Nue 工具集的进步，create-nue 会不断更新。最终，演示网站是由即将推出的 Web 应用程序构建器 (Nuekit) 生成的，但目前，它只是用于了解 Nue JS 工作原理的示例脚本。
正确的npm create nue 命令即将到来
2.2 npm 安装
通过 npm、pnpm 或 Bun 安装 Nue JS
npm install nuejs-core
安装后，您可以将主要功能导入 JavaScript 或 TypeScript 文件中：
import { render, parse, compile } from 'nuejs-core'
3. 模板语法
3.1 括号将替换为相应组件实例中的属性值
单括号将数据解释为纯文本，而不是 HTML
<h1 @name="hello-nue">
Hello, {names}!
<script> names = 'Nue' </script>
</h1>
3.2 输出 HTML，需要使用双括号
<button @name="html-button">
{{label}}
<script>
label = '<h1>我是H1</h1>'
</script>
</button>
3.3 @click 以@符号开头的属性定义事件处理程序。这些是在用户交互（如单击、按键或鼠标移动）时调用的 JavaScript 函数。
<button @name="button-demo" @click="count++">
Clicked { count } { count == 1 ? 'time' : 'times' }
<script> count = 0 </script>
</button>
3.4 if else 语句
<button @name="if-conter" @click="count++">
<p :if="!count">no click yet</p>
<p :else-if="count == 1">first click</p>
<p :else-if="count ==2 ">nice. anther one</p>
<p :else>clicks: { count }</p>
<script> count = 0 </script>
</button>
3.5 :for 循环
<div @name="simple-loop">
<ul>
<li :for="item in arr">
{item}
</li>
</ul>
<script>
arr = [1, 2, 3]
</script>
</div>
3.6 使用属性渲染子组件
<h3 @name="props-demo">
{ a } + { b } =
<sum :a="a" :b="b" />
<script>
// instance variables
a = 10
b = 100
</script>
</h3>
<!-- nested sum component -->
<span @name="sum">
{ a + b }
</span>
3.7 @mousemove 鼠标追踪
<div @name="mouse-tracking" @mousemove="track" style="height: { h }em">
Position: { x } x { y }
<script>
h = 10
x = 0
y = 0
track(event) {
this.x = event.clientX
this.y = event.clientY
}
</script>
</div>
3.8 form 表单 输入值更改时更新视图
<form @name="input-demo">
<input type="number" :value="a" @change="a = $event.target.value">
<input type="number" :value="b" @change="b = $event.target.value">
<h1>{a} + {b} = {1*a + 1*b} </h1>
<script>
a = 1
b = 2
</script>
</form>
3.9 函数调用
<div @name="simple-fun">
{fun()}
<script>
arr = [1, 2, 3]
fun() {
return '123456'
}
</script>
</div>
三 、未推出
Nue JS 是这个生态的核心组件，其他部分还没完成：
- Nue CSS： Tailwind和其他CSS-in-JS库的基于标准的替代方案 ， 恢复级联样式的力量
- Nue MVC：模型-视图-控制器：将视图与业务逻辑分开。 构建可扩展的单页应用程序
- Nue UI： 小型、基于标准、主题化的 UI 库。Markdown、MDX和Markdoc的丰富、人性化替代品 用于快速 UI 开发的可复用组件
- Nuemark：Markdown 风格带来丰富的内容。恢复内容优先的 Web 开发方法。Headless UI和Shadcn UI的语义替代方案
- Nuekit：使用减少 10 倍的代码构建网站和 Web 应用程序
作者表示，一旦所有子项目完成，Nue 将成为 Vite、Next.js 和 Astro 等项目的重要替代品。
目标是在 2024 年 3 月之前发布所有工具。文章来源：https://www.toymoban.com/news/detail-801659.html
文章来源地址https://www.toymoban.com/news/detail-801659.html
到了这里，关于Nue JS • 介绍的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[从零开发JS应用] 如何在VScode中配置Javascript环境，常见的调试方法有哪些？](https://imgs.yssmx.com/Uploads/2024/02/762332-1.jpg)
