卷不动,真滴卷不动,前端再出新轮子 nue.js

一、唠唠嗑

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模板语法来编写界面,减少了大量冗余代码。

若 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克隆到本地

cmd 复制代码
git clone https://github.com/nuejs/create-nue.git

2、安装相关依赖

cmd 复制代码
# 进入项目根目录
cd create-nue
# 安装相关依赖
npm install
# 启动项目
npm run start
# 打开本地地址我这里是"http://127.0.0.1:8080/"
​
  • 启动页面:

3、代码结构

NueJs 项目的主要代码都放在了 src 目录下,并且都是以 .nue结尾的,上面页面的代码文件为layout.nue,VsCode 是无法解析 .nue 文件的,你需要安装拓展插件来辅助解析

3、相关拓展插件

Nue Language Support

4、就目前理解

通过 layout.nue 以及相关文件可以大致理解一下:

  • 一个.nue文件中可以使用多个组件:通过 site-headeritem-list 可以看出
  • 组件通过 @name="site-header" 的形式命名:在 components.nue 文件可以看到
  • 类似jsx(html + js)混合写的概念:在 islands.nue 文件可以看到
  • 组件具有 prop 的概念,同时状态会被定义在单独的 .data文件中

个人小提示: 要就俺而言,没必要学,当然这只是暂时的,谁又知道未来的 Web 动向呢,但若你是技术党,想追求更前沿的技术,那俺真心非常支持你学,要是学明白了也可以向大家分享一下你的学习心得。要是像俺一样是上班族,那你把公司的业务相关的知识学好了,然后再进行一些拓展,就完全够用了,没必要去折腾自己,有那时间不如好好享受享受生活,它不香吗!

相关推荐
黄尚圈圈22 分钟前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
浮华似水1 小时前
简洁之道 - React Hook Form
前端
正小安3 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
_.Switch5 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光5 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   5 小时前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   5 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web5 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常5 小时前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
莹雨潇潇6 小时前
Docker 快速入门(Ubuntu版)
java·前端·docker·容器