Nuejs

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

我看了一下，這個 Nuejs 框架大體上有幾個主要的特點：

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

非常的小巧

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

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

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

Nuejs 生態(tài)？

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

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

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

簡單看看，不必學習

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

我們可以看看這個前端框架長什么樣子，我們先用 git 把這個項目給拷貝下來：

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

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

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

先看看 index.html：

再看看 app.nue：

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

每一個文件最外層的標簽上都有 @name，應該是通過這個來給這個組件命名：

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

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

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