在舊站時期的時候
有發表了一篇Node-RED + uibuilder + vue顯示網頁的教學
隨著Node-RED更新
uibuilder主版本其實也早就更新到2
是時候要升級一下教學了
uibuilder的github、官方文件
先安裝uibuilder
在Node-RED環境資料夾下：
$npm install node-red-contrib-uibuilder官方文件中定義常數對應的路徑：
| 參數名 | 預設位置 |
|---|---|
| uibRoot | ~/.node-red/uibuilder |
| userDir | ~/.node-red |
～/.node-red也可以替換成你目前的Node-RED環境資料夾
（如果要以其它資料夾啟動Node-RED，終端機的命令如下：
$node-red --userDir DIR接下來，就是與1.x.x版本不一樣的地方了
url path讀取的路徑以以下的優先權決定：
- <uibRoot>/<instanceName>/dest/
- <uibRoot>/<instanceName>/src/
- <userDir>/node_modules/node-red-contrib-uibuilder/nodes/dest/
- <userDir>/node_modules/node-red-contrib-uibuilder/nodes/src/
<instanceName>為在uibuilder節點中的url path
如我的範例路徑為vue
<instanceName>就會是vue
這一版本的變更，讓我們不用再設定東西就可以在我們的網頁使用npm modules了
而且uibuilder預設的網頁框架為vue
.node-red資料夾的node_modules資料夾會對應於../uibuilder/vendor/modulename/
在官方的html範例中是這樣的
<script src=”../uibuilder/vendor/socket.io/socket.io.js”></script>
如果是從1.x.x版本升級的人
除了要改動html import模組路徑外
vue在mounted記得加上
uibuilder.start()以上請參考～
沒有留言:
張貼留言