简介

Nue 是一个简单的React、Next.js、Vite和Astro替代品，专注于极简主义、关注点分离和语义网页设计。

Nue JS 是一个非常小的（压缩后 2.3kb）JavaScript 库，用于构建用户界面。它是Nue工具集的核心。它就像Vue.js、React.js或Svelte，但没有hooks, effects, props, portals, watchers, injects, suspensions或其他不寻常的抽象。学习 HTML、CSS 和 JavaScript 的基础知识，就可以开始了。

优点

更易于维护：当您的代码减少 10 倍时，维护和开发项目所需的人员就会减少。
更容易使用：API方法和配置变量很少。需要学习的内容更少，您需要的“样板”代码也更少，因此您可以更快地行动。
bug 更少：Nue 代码库很小：问题的表面更少，并且 bug 更容易定位。
更快：Nue 更快，因为内部逻辑更简单，并且传输的千字节更少。

React.js 是 109kb 的压缩 JavaScript（压缩后为 35kb），Vue.js 为 97kb（压缩后为 34kb），Nue.js 为 4.7kb（压缩后为 2.2kb）。对于做大致相同的事情，React 和 Vue 比 Nue 的膨胀要大一个数量级。

如何使用

创建Nue项目

# 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"

使用NPM引入Nue

npm install nuejs-core

// 可以直接在js或者ts文件中使用
import { render , parse , compile } from 'nuejs-core'

关键点

Components

Nue 组件是一个可重用的 UI 部分。它们是您的应用程序的构建块。Nue 组件可以完成您对现代 UI 框架的期望。它们可以嵌套在其他组件中，形成树状结构，您可以通过循环组件或有条件地渲染它们来构建控制流

代码示例

Reactive Components

定义组件

编译组件

安装组件

同构组件

Nue 支持两种类型的同构组件：

通用组件在服务器端和客户端上运行相同
混合组件，其中一些部分在服务器上渲染，一些部分在客户端上渲染

同一个组件在不同端中使用

模板语法

Nue 使用基于 HTML 的模板语法，其中模板表达式深受 Vue 的启发。Vue 用户在使用 Nue 进行开发时应该有宾至如归的感觉。

事件处理

修饰符

支持以下修饰符：

prevent防止事件的默认行为发生
stop防止事件进一步传播
selfevent.target仅在元素本身时触发处理程序
once事件最多触发一次
.enter捕获“Enter”和“Return”
.delete捕获“Delete”和“Backspace”键
.esc捕获“Esc”和“Escape”
.space捕获“空格键”、“ ”、“空格键”
.up捕获“向上”和“向上箭头”
.down捕获“Down”和“ArrowDown”
.left捕获“向左”和“向左箭头”
.right捕获“右”和“右箭头”

条件指令和循环

未来计划

打造一个生态系统

Nue CSS: 用于代替CSS-in-JS、Tailwind和SASS的级联样式
Nue MVC: 用户构建单页应用
Nue UI: 用于创建可重用的组件以快速进行UI开发
Nuemark: 一个用于丰富和交互式内容的markdown风格
Nuekit: 用于用更少的代码构建网站和web应用

参考文档

nuejs.org/

Nue-更接近标准Web框架-简介

简介

优点