新框架又出来了，你还卷的动吗？

以下文章来源于前端实验室 ，作者了不起

前端已经有许多框架了，比如Ract、Vue、Angular、Svelte等等。

但是最近又出来一个新框架,一个号称可能会改变您的网络开发方式的新东西——Nue.JS

Nue.JS

Nue是一个让前端开发变得更加愉快的工具集。官方宣称这是对Vue、React和Svelte等生态系统以及Vite、Next.js和Astro等 Web 开发框架的彻底改革。

特点

• Nue 使用渐进增强、关注点分离和语义 Web 设计来提供新水平的性能、更好的可扩展性和大幅改进的开发体验。

• Nue 是一个非常小的巧JavaScript 库，压缩后 仅2.3kb。

• Nue没有hooks, effects, props, portals, watchers, provides, injects, suspension 这些抽象概念。了解 HTML、CSS 和 JavaScript 的基础知识，就可以轻松上手。

• 消除了 TCP 慢启动算法和渐进增强带来的 “地狱”

• 使用基于 HTML 的模板语法

• 具有响应式和异构组件模型，适合创建各种类型应用程序

• 允许在单个文件中定义多个组件来简化依赖管理

• 简化工具链：包含了 render 函数进行服务器端渲染以及 compile 函数生成浏览器端组件，在开发环境无需复杂打包工具如 Webpack 或 Vite 也能正常运行

安装使用

创建nue

# 下载项目
git clone https://github.com/nuejs/create-nue.git --depth 1

# 进入到项目内
cd create-nue

# 安装依赖
npm install

# 启动服务
npm run start

服务启动成功后就可以访问：http://localhost:8080

nue语法

Nue 使用基于 HTML 的模板语法：

  
  

    
{ title }
    { desc }

    
  

控制流:

A

B

C 

Not A/B/C

循环

  { index }: { item.text }

自定义语法

组件是 HTML 片段，其组件名称在 @name 属性中给出

  
  

    
{ title }
    
{ desc }
  

还可以在组件文件上使用任何您想要的扩展名，使用.nue 扩展名。

事件处理

定义 实例方法

  Close

  

修饰符

Nue 提供了一些方便的快捷方式来处理常见的 DOM 事件操作功能。例如，@submit.prevent

支持以下修饰符：

• prevent防止事件的默认行为发生

• stop防止事件进一步传播

• selfevent.target仅在元素本身时触发处理程序

• once事件最多触发一次

• enter捕获“Enter”和“Return”

• delete捕获“Delete”和“Backspace”键

• esc捕获“Esc”和“Escape”

• space捕获“空格键”、“ ”、“空格键”

• up捕获“向上”和“向上箭头”

• down捕获“Down”和“ArrowDown”

• left捕获“向左”和“向左箭头”

• right捕获“右”和“右箭头”

nue目标

nue目标是打造一个生态系统，是一项工程尝试，旨在为普遍存在的前端疲劳带来长期解决方案。

nue发布计划如下：

• Nuekit: 用于用更少的代码构建网站和web应用

• Nuemark: 一个用于丰富和交互式内容的markdown风格

• Nue CSS: 用于代替CSS-in-JS、Tailwind和SASS的级联样式

• Nue MVC: 用户构建单页应用

• Nue UI: 用于创建可重用的组件以快速进行UI开发