NUT PROJECT
指南 文档 GitHub

中后台系统前端解决方案 & 微前端框架

从广义的角度来说，NUT 是一个静态站点生成工具。但是他本身提供的诸多特性，更专注于提供一套中后台系统的解决方案，另一方面 NUT 的设计一开始就是为了微前端而生，它也是一个微前端框架。



理念

  • 从 代码构建 到 应用构建
  • 弱化了路由的概念
  • 框架无关的路由，多框架支持（react、vue、regular、markdown...）
  • 基于插件实现的 Enhance / “AOP”
  • 集成 webpack 最佳实践 / 接近零构建配置
  • 支持微前端，每个独立运行的 NUT 应用也是一个子应用（无需额外配置）
  • 内置的加载优化
  • ...
terminal screenshot

提问环节

路由方案更换，如何升级所有工程？

通常路由的代码会编码在仓库中，每次技术选型更换，路由相关代码如何修改？与之相关的还有菜单管理（路由变化->菜单的激活），为此，nut提供了一个基于文件系统、框架无关的路由方案

布局升级，如何升级所有工程？

比如 header、sidebar 等需要统一升级，应该怎么做？nut 的做法和很多静态站点生成工具一样，将 layout 这部分抽象并提取了出来，做到了可升级、可更换，只要修改配置，无需改动任何代码

提供用户使用文档，需要几步？

一个相对完整的应用应该提供一份详细的用户文档

你也可以独立部署一个文档站点，但显然在应用内部的体验会好很多

如果你自己实现，可能需要以下几步：

  1. 添加文档路由和页面
  2. 用 markdown-it / marked 解析 markdown 内容，添加代码高亮
  3. 选择合适的代码高亮主题

用了 nut 之后，你只要书写 markdown 文件即可，他会帮你生成路由、菜单，并且内置了几套不错的代码高亮主题

如何在10秒内对接登录系统？

如果你想要接入登录，你通常需要做这些事情

  1. 阅读接口文档，了解如何接入
  2. 加入登录状态判断、展示用户名、退出登录等逻辑

后端通常会有 Egg 插件之类的形式提供几个登录相关的接口

后端装个 Egg 插件配置下就可以了，为什么前端不呢？

有了nut，安装对应的 nut plugin，稍作配置，就可以帮你接入登录系统

页面如何跨工程复用？

诸如 Koa / Eggjs 可以通过 middleware 给后端添加路由，实现路由的跨工程复用

都说前后端路由是相通的，为什么前端没有复用路由（页面）的方案呢？

工具方法可以通过封装 npm 包的形式跨工程复用，那么一个页面呢？

假如有两个单页应用 A 和 B，分别使用了 vue 和 regular，某个页面想在 A、B 两个工程中复用，该怎么做呢？

nut 通过插件体系解决了这个问题


...

特性 / 优点

  • 接近零构建配置

    无需在工程中保留大量的构建配置文件

  • 标准化的路由、layout、事件系统

    一致的开发体验，更低的维护成本，不熟悉不同工程的路由方案、菜单管理？不存在的

    会新建文件，你就会写单页应用

  • 灵活 & 可扩展的 layout 生态

    业务无关视图的剥离，一键换装

  • 页面的 跨工程 & 跨技术栈 复用

    借鉴后端的 middleware 方案，支持从外部向应用内添加前端路由（页面），无视工程技术栈（regular 或 vue），无缝将新页面对接到 nut 的路由系统中

  • 完善的插件体系

    通常一个完整功能都需要前后端的交互，Egg 提供了插件的生态，前端如果要和后端接口进行交互，势必要出一套对应的插件体系，你可以通过插件定制功能、调用后端接口，并分享给他人

    你可以通过插件来增强你的应用，这种理念可以参考 atom 编辑器的插件体系，普通的 npm包 需要被你引用并调用，但是插件可以主动增强你的应用

  • 内置的文档方案

    会 markdown 语法就可以上手写文档！

    markdown 如何转 html，代码如何高亮等等，这些你都不需要关心

  • 智能的 quicklink 支持

  • 内置 500+ 图标

编辑本页
安装