扫一扫分享
Nue 是一个强大的 react、vue、Next.js、Vite 和 Astro 替代品。它可能会改变您的web开发方式。
nue.js是一个非常小的(压缩后 2.3kb)JavaScript 库,用于构建 Web 界面。 它是即将推出的 Nue 生态系统的核心。 它就像 Vue.js、React.js 或 Svelte,但没有hooks, effects, props, portals, watchers, provides, injects, suspension 这些抽象概念。了解 html、css 和 JavaScript 的基础知识,就可以开始了。
用更少的代码构建用户界面,它表示Nue 最大的好处是你需要更少的代码来完成同样的事情:同样一个listBox组件,react需要2537行,vue需要1913行,svelte需要1286行,Nue只需要208行,比react小10倍。
Nue 使用基于 HTML 的模板语法:
<div @name="media-object" class="{ type }">
<img src="{ img }">
<aside>
<h3>{ title }</h3>
<p :if="desc">{ desc }</p>
<slot/>
</aside>
</div>
React 和 JSX 声称是“Just JavaScript”,但 Nue 可以被认为是“Just HTML”
Nue 具有出色扩展性的三个原因:
1、关注点分离,易于理解的代码比“意大利面条代码”更容易扩展。
2、极简主义,一百行代码比一千行代码更容易扩展。
3、人才分离,当 UX 开发人员专注于前端,而 JS/TS 开发人员专注于前端后端时,团队技能就会达到最佳平衡。
解耦样式
Nue不提倡使用 Scoped CSS、样式属性、Tailwind 或其他 CSS-in-JS 体操:
更多可重用代码:当样式未硬编码到组件时,同一组件可能会根据页面或上下文而看起来有所不同。
没有意大利面条式代码:纯 HTML 或纯 CSS 比混合意大利面条式代码更容易阅读
更快的页面加载:通过解耦样式,可以更轻松地从辅助 CSS 中提取主 CSS,并将 HTML 页面保持在关键的14kb 限制以下。
反应式和同构
Nue拥有丰富的组件模型,它允许您使用不同类型的组件创建各种应用程序:
1、服务器组件在服务器上呈现。它们可以帮助您构建以内容为中心的网站,无需 JavaScript 即可加载速度更快,并且可以被搜索引擎抓取。
2、反应式组件在客户端上呈现。它们帮助您构建动态岛或单页应用程序。
3、混合组件部分在服务器端呈现,部分在客户端呈现。这些组件可帮助您构建响应式、seo 友好的组件,例如视频标签或图片库。
4、通用组件在服务器端和客户端上使用相同的方式。
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、UI 库开发:为反应式前端或服务器生成的内容创建可重用组件。
2、渐进式增强:Nue JS 是一个完美的微型库,可通过动态组件或“岛”增强以内容为中心的网站
3、静态网站生成器:只需将其导入您的项目即可准备渲染。不需要捆绑器。
4、单页应用程序:与即将推出的Nue MVC项目一起构建更简单、更具可扩展性的应用程序。
5、Template Nue:是一个用于生成网站和 HTML 电子邮件的通用工具。
手机预览