【亲测免费】 Node-RED Dashboard 2.0 安装与配置指南

1. 项目基础介绍

Node-RED Dashboard 2.0 是一个用于 Node-RED 的开源项目，旨在帮助用户快速创建数据驱动的仪表盘和数据可视化界面。该项目提供了一组易于使用的节点，使用户能够轻松构建自定义的用户界面和数据可视化。Node-RED Dashboard 2.0 是 Node-RED Dashboard 1.0 的升级版，基于现代技术栈重新构建，提供了更好的性能和更多的功能。

主要编程语言

• JavaScript
• HTML
• CSS

2. 项目使用的关键技术和框架

• Node-RED: 一个基于流的编程工具，用于连接硬件设备、API 和在线服务。
• Vue.js: 用于构建用户界面的渐进式 JavaScript 框架。
• Cypress: 用于前端测试的现代工具。
• Markdown & Mermaid: 用于创建富文本和动态图表的工具。

3. 项目安装和配置的准备工作和详细步骤

准备工作

1. 安装 Node.js: 确保你的系统上已经安装了 Node.js（版本 12 或更高）。你可以从 Node.js 官网 下载并安装。
2. 安装 Node-RED: 如果你还没有安装 Node-RED，可以通过以下命令安装：

   npm install -g node-red
   

安装步骤

1. 启动 Node-RED: 打开终端并运行以下命令启动 Node-RED：

   node-red
   

   这将启动 Node-RED 并在默认浏览器中打开 Node-RED 编辑器。

2. 安装 Node-RED Dashboard 2.0: 在 Node-RED 编辑器中，点击右上角的菜单按钮，选择“管理面板”（Manage Palette）。

3. 切换到“安装”选项卡: 在“管理面板”中，切换到“安装”选项卡。

4. 搜索并安装 Node-RED Dashboard 2.0: 在搜索框中输入 @flowfuse/node-red-dashboard，然后点击“安装”按钮。

5. 等待安装完成: 安装过程可能需要几分钟时间，请耐心等待。

6. 验证安装: 安装完成后，你可以在 Node-RED 编辑器的左侧节点面板中看到新的 Dashboard 节点。

配置步骤

1. 创建一个新的 Dashboard 页面: 在 Node-RED 编辑器中，拖动一个 ui_dashboard 节点到工作区，并将其连接到你的数据流。

2. 配置 Dashboard 节点: 双击 ui_dashboard 节点，配置页面的标题、布局和其他属性。

3. 添加其他 Dashboard 组件: 你可以添加其他 Dashboard 组件，如 ui_chart、ui_gauge 等，以构建你的数据可视化界面。

4. 部署更改: 完成配置后，点击右上角的“部署”按钮，保存并应用你的更改。

5. 访问 Dashboard: 打开浏览器，访问 http://localhost:1880/ui，你将看到你刚刚创建的 Dashboard 页面。

总结

通过以上步骤，你已经成功安装并配置了 Node-RED Dashboard 2.0。现在你可以开始构建自己的数据驱动仪表盘和数据可视化界面了。如果你有任何问题或需要进一步的帮助，可以参考项目的 GitHub 仓库 或访问 Node-RED 官方文档。