Nuejs

最近有一個(gè)很火的前端新框架，github 上已經(jīng)有 5k 的star，這勢(shì)頭是真的猛：

我看了一下，這個(gè) Nuejs 框架大體上有幾個(gè)主要的特點(diǎn)：

• 體積非常的小巧，只有 2.3k minzipped
• 代碼量比較少，比較容易上手，代碼少了十倍
• 與Vue.js、React.js或 Svelte 不同，它沒有hooks、effects、props、portals等特殊抽象概念。只需掌握 HTML、CSS 和 JavaScript 基礎(chǔ)知識(shí)你就可以試著去使用它了。

非常的小巧

剛剛說了，Nuejs 與Vue.js、React.js或 Svelte 不同，它沒有hooks、effects、props、portals等特殊抽象概念。只需掌握 HTML、CSS 和 JavaScript 基礎(chǔ)知識(shí)你就可以試著去使用它了。

所以它少了大部分的代碼，整體體積只有2.3k minzipped，大大縮小了項(xiàng)目的體積。

Nuejs 是通過 HTML 模板語法來編寫界面的。如果 React、Vue 是 “純JavaScript”，那么 Nuejs 可以說是 “純HTML”。

Nuejs 生態(tài)？

作者打算將 Nuejs 成為一個(gè)生態(tài)系統(tǒng)的核心，后續(xù)計(jì)劃還會(huì)包括：

• Nue CSS： 用來代替 CSS-in-JS、Tailwind 和 SASS
• Nue MVC： 用來構(gòu)建單頁應(yīng)用
• Nue UI： 一個(gè)組件庫，用來快速編寫頁面
• Nuemark： 一個(gè) markdown 的庫，用來編寫漂亮的 md 內(nèi)容
• Nuekit： 用于用更少的代碼構(gòu)建網(wǎng)站和web應(yīng)用。

作者覺得，如果這個(gè) Nuejs 生態(tài)全部搭建起來，那么 Nuejs 將可能代替 Vite、Next.js 和 Astro 這些熱門的前端框架庫。

簡(jiǎn)單看看，不必學(xué)習(xí)

其實(shí)這個(gè)框架我們現(xiàn)階段完全可以不用學(xué)習(xí)，了解一下就好了。

我們可以看看這個(gè)前端框架長(zhǎng)什么樣子，我們先用 git 把這個(gè)項(xiàng)目給拷貝下來：

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

在 vscode 中可以安裝一下 Nuejs 的插件，這樣的話 .nue 文件里的內(nèi)容才會(huì)有高亮：

我們可以看一下 simple-app 中的代碼，可以看出個(gè)大概：

先看看 index.html：

再看看 app.nue：

我看了一下，整個(gè)文件就像是在寫 HTML 一樣，通過注釋可以看出，還可以在路由跳轉(zhuǎn)的時(shí)候去執(zhí)行一些操作。

每一個(gè)文件最外層的標(biāo)簽上都有 @name，應(yīng)該是通過這個(gè)來給這個(gè)組件命名：

然后可以通過路由回調(diào)中的mountChild去加載對(duì)應(yīng)名稱的組件頁面，并且在跳轉(zhuǎn)的時(shí)候可以進(jìn)行傳參：

并且在跳轉(zhuǎn)目標(biāo)組件中，可以通過constructor進(jìn)行接收參數(shù)：

并且可以看到，組件傳參跟 Vue 很像。