制造麻烦 or 解决问题？前端又出新框架啦！你还学得动吗？

Hello，大家好，我是 Sunday。

前端又上线了一个全新的框架，叫做 nue.js ，号称可以取代 Vue、React、Next、Vite，并且可以改变目前前端的开发方式：

这个框架是在 2023-09-13 日进行的第一次提交。我在 21 号看到它的时候，已经有了 2300 的 star。

最近又听到朋友提起了它，所以专门到 github 上看了一眼，发现已经有了 3700 的 star 了，这个速度可以说非常恐怖了。

再加上它这么高调的宣传文案，所以咱们今天就来看看这个 nue.js 它到底为前端带来了什么样的全新体验。

什么是 nue.js？

NueJS 是一个非常小的（压缩后 2.3kb）JavaScript 库，用于构建 Web 界面。它是即将推出的 Nue 生态系统的核心。

它就像 Vue.js、React.js 或 Svelte，但没有hooks, effects, props, portals, watchers, provides, injects, suspension 这些抽象概念。

了解 HTML、CSS 和 JavaScript 的基础知识，就可以开始了。

它带来了哪些改变？

nue.js 期望通过更少的代码来完成相同的功能。官方给出了对应的代码量对比。

在相同的功能下：

react 需要 2537 行代码：

Vue 需要 1913 行代码：

Svelte 需要 1286 行代码：

而 nue 只需要 208 行代码，比 react 少了 10 倍：

那么下面，咱们就通过一个 demo 来看看 nue.js 究竟是怎么使用的。

创建项目

我们可以通过一种简单的方式，来快速获取 nue.js 的基础项目：

bash 复制代码

# clone the repository
git clone https://github.com/nuejs/create-nue.git

# cd to your newly created app
cd create-nue

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

这样你可以看到一个基本的运行页面

代码结构

项目运行起来之后，接下来咱们来看下它的代码结构。

nue 的项目代码都被放到了 src 文件夹里面，并且以 .nue 结尾。

我们目前看到的页面效果就是 layout.nue 文件:

解决代码可读性问题

默认情况下，VSCode 是无法解析 .nue 文件的，所以会导致，我们看到的代码是这样的，没有任何的色彩：

想要解决这个问题，可以安装专门的插件 Nue Language Support，这样可以使 VSCode 具备解析的能力

阅读代码-组件定义

根据我们之前的开发经验，可以看出 layout.nue 中代码主要由两个组件组成：

第一是：site-header
第二是：item-list

这两个组件都被定义在 components.nue 文件中

那么接下来，我们来观察看 components.nue 文件的代码：

通过这个代码我们可以发现，在 nue 中，通过 @name="component-name" 的这种方式来定义组件。多个组件是可以直接被写入到一个 .nue 文件中的。

阅读代码-组件逻辑

在 item-list 组件中定义了 循环逻辑 咱们可以来看一下。

这个循环逻辑由两部分组成：

第一是：:for 这里咱们姑且把它叫做指令

css 复制代码

<li :for="el in data">
  <h3>{ el.name }</h3>
  <p>{ el.desc }</p>
</li>

第二是：script 代码内容，这里定义了 data 的数据来源

xml 复制代码

<script>
  constructor({ items }) {
    this.data = items.map(el => {
      const [name, desc] = Object.entries(el)[0]
      return { name, desc }
    })
  }
</script>

由此可见，data 的数据其实是由 items 生成的。那么这个 items 又是从何而来的呢？

阅读代码-数据定义

咱们返回 layout.nue 文件，查看 item-list 的使用，可以发现在 item-list 中有一个 props 的概念：

它指定 items 其实是 projects。而 projects 则是被定义在 content.data 文件中的。也就是说：.data 文件就是 nue 中定义状态（数据）的地方

代码逻辑总结

那么根据以上内容，咱们可以知道。在 nue 中：

多个组件可以定义在一个 .nue 文件中
组件通过 @name="component-name" 进行命名
nue 中具备类似指令的概念 :for，同时类似 jsx（html+js混写）的概念 script 标签内代码
组件具备 prop 的概念，同时状态会被定义在单独的 .data 文件中

个人对 NueJS 的看法

截止到目前，咱们对 nue.js 的一些简单了解。其实可以看出 nue.js 中是借鉴了一些 vue 或者 react 语法风格的。

同时 nue.js 把数据和视图进行了更加深度的分离，只不过这样的一种分离可能会导致在实际的项目开发中出现：来回切换视图和数据文件的情况。

并且，根据 nue.js 提供的示例代码，并没有看出它比 vue 或者 react 简单的地方，当然这也有可能是因为我对 nue.js 理解的还比较浅的原因导致的。

对于目前的前端而言，各种框架一直都是层出不穷的：Vue、React、Svelte 等等。 NueJS 想要在国内占据一席之地，甚至是吃掉一部分 Vue 或者 React 的市场，估计还有很长的路要走~~~