Thingsboard UI Customization

Question

我希望能夠自定義UI以符合我們品牌的指導方針。 我對Sass和Angular不是很熟悉。 你能否建議哪些IDE，工具或插件最好在這個特定的項目中修改和測試UI，而不必每次都構建整個項目？

謝謝！

Answer 1

thingsboard UI使用angularjs，反應過來，的WebPack，巴貝爾和... 但所有的UI連接到所有的項目，我無法運行它分離，npm install和npm run build後出現了一些問題。基於ui文件夾中的pom.xml文件，項目首先使用maven構建並在ui文件夾中創建一個jar文件，然後將其作爲前端模塊運行。如果我們不想在每次更改項目時清理安裝maven，一種方法是在pom.xml文件中運行命令。由於該項目並未使用我們全局安裝的npm和節點，它首先在ui文件夾中本地安裝它們的特定版本（nodeVersion：v6.9.1 npmVersion：3.10.8），然後將它們移動到文件夾命名節點並建立與node_modules的鏈接：ln -s node_modules/npm/bin/npm-cli.js npm在此運行命令之後：

node/npm install 
node/npm run build 
node/npm start 

因此您可以編寫腳本文件來一起運行所有這些命令。不要忘記在server.js文件中改變你的tb-gateway forwardHost和forwardPort。腳本文件基於我的操作系統：

#!/usr/bin/env bash 
if [ ! -d node-v6.9.1-linux-x64 ] ; then 
    wget https://nodejs.org/dist/v6.9.1/node-v6.9.1-linux-x64.tar.gz 
    tar -xzvf node-v6.9.1-linux-x64.tar.gz 
    mkdir node 
    mv node-v6.9.1-linux-x64/lib/node_modules node/ 
    mv node-v6.9.1-linux-x64/bin/* node/ 
    cd node 
    ln -s node_modules/npm/bin/npm-cli.js npm 
    cd .. 
fi 
node/npm install 
node/npm run build 
node/npm start 

畢竟這每一個UI項目建設都需要時間。您可以使用webstorm IDE或某些網絡標識打開ui文件夾。