一、唠唠嗑
NueJS 前几个月刚出来的开源项目，目前在GitHub上已经有 4k 多的star了，可谓是吸星之迅速呀。
NueJS 是一个非常小巧 (2.3kb minzipped) 的 JavaScript 库，用于构建 Web 界面。它具有代码量少、易于上手的特点。而且它是即将推出的 Nue 生态系统的核心。与 Vue.js、React.js 或 Svelte 不同，它没有 hooks、effects、props、portals 等特殊抽象概念。「只需掌握 HTML、CSS 和 JavaScript 基础知识你就可以试着去使用它了」。
1、那为什么说它非常小巧呢
因为 NueJS 类似Vue、React或Svelte，但又与他们有所区分，它更简单,没有复杂的Hooks、Props等概念,开发者只需要掌握HTML、CSS和JavaScript基础知识就可以使用。
与 React 相比，NueJS 实现相同功能的代码量仅为后者的十分之一,大大缩小了项目体积，简化了Web前端开发。NueJS 通过HTML模板语法来编写界面,减少了大量冗余代码。
Snipaste_2023-10-21_23-03-30.png
若 React 和 Vue 宣称是“纯JavaScript”，那 NueJs 可以被认为是 “纯HTML”。NueJs 更适合专注于交互设计、无障碍和用户体验的 UI 开发者。
「小插曲：」 Riot.js不知道大家有没有听说过，它也是出自 NueJs 作者之手，是一个 JavaScript 的 MVP 框架，这东西的知名成度因该不用我多说了吧。如果感兴趣的话可以看看这篇文章：Riot.js相关介绍，俺认为对于想了解的话那是够用了，作者还称它对目前的 Web 生态不是很满意，他想从头开始编写一个全新的生态。（吹没吹牛俺不知道，但俺是真服他，要想想这可是他仅仅花一年时间搞出来的呀，还把它开源了，要是俺，别说一年，一辈子俺都搞不出来）好了，言归正传。
作者打算将它成为一个生态系统的核心后续计划还会包括：
- Nue CSS，用于替代CSS-in-JS、Tailwind和SASS的级联样式；
- Nue MVC，用于构建单页应用；
- Nue UI，用于创建可重用的组件以快速进行UI开发；
- Nuemark，一个用于丰富和交互式内容的markdown风格；
- Nuekit，用于用更少的代码构建网站和web应用。
作者还表示，一旦所有子项目完成，Nue 将成为 Vite、Next.js 和 Astro 等项目的重要替代品。
2、特点总结
- 构建用户界面所需代码减少 10 倍
- 无hooks、effects、props、portals 等特殊抽象概念
- 回归语义化、渐进增强的Web设计理念
- 消除了 TCP 慢启动算法和渐进增强带来的 “地狱”
- 使用基于 HTML 的模板语法
- 易扩展性：关注交互设计和用户体验，易于理解且易扩展；支持分离样式以实现代码重用，并提高页面加载速度；具有响应式和异构组件模型，适合创建各种类型应用程序；允许在单个文件中定义多个组件来简化依赖管理
- 简化工具链：包含了
render函数进行服务器端渲染以及compile函数生成浏览器端组件，在开发环境无需复杂打包工具如 Webpack 或 Vite 也能正常运行
「唠唠嗑提炼：」 「写最少的代码，干最多的事。」
二、简单用一下
1、通过git克隆到本地
代码语言：javascript复制git clone https://github.com/nuejs/create-nue.git
2、安装相关依赖
代码语言：javascript复制# 进入项目根目录
cd create-nue
# 安装相关依赖
npm install
# 启动项目
npm run start
# 打开本地地址我这里是“http://127.0.0.1:8080/”
- 启动页面：
Snipaste_2023-10-23_18-24-52.png
3、代码结构
Snipaste_2023-10-23_18-27-37.png
NueJs 项目的主要代码都放在了 src 目录下，并且都是以 .nue结尾的，上面页面的代码文件为layout.nue，VsCode 是无法解析 .nue 文件的，你需要安装拓展插件来辅助解析
Snipaste_2023-10-23_18-31-25.png
3、相关拓展插件
Nue Language Support
Snipaste_2023-10-23_18-35-24.png
4、就目前理解
通过 layout.nue 以及相关文件可以大致理解一下：
- 一个
.nue文件中可以使用多个组件：通过site-header和item-list可以看出
Snipaste_2023-10-23_18-52-28.png
- 组件通过
@name="site-header"的形式命名：在components.nue文件可以看到
Snipaste_2023-10-23_18-53-20.png
- 类似jsx（html js）混合写的概念：在
islands.nue文件可以看到
Snipaste_2023-10-23_18-54-11.png
- 组件具有 prop 的概念，同时状态会被定义在单独的
.data文件中
Snipaste_2023-10-23_18-55-16.png
Snipaste_2023-10-23_18-55-52.png
「个人小提示：」 要就俺而言，没必要学，当然这只是暂时的，谁又知道未来的 Web 动向呢，但若你是技术党，想追求更前沿的技术，那俺真心非常支持你学，要是学明白了也可以向大家分享一下你的学习心得。要是像俺一样是上班族，那你把公司的业务相关的知识学好了，然后再进行一些拓展，就完全够用了，没必要去折腾自己，有那时间不如好好享受享受生活，它不香吗！
往期推荐
前端组长应该如何管理前端团队
2023中国互联网公司Top100排行榜
展开讲讲，从零到一建立前端规范
点个在看支持我吧
