idea修改thingsboard前端页面,打包成npm,发布到centos运行

本文意在阐述简单修改thingsboard的UI,重新发布npm到centos上运行。
版本介绍:
thingsboard版本:3.2.2
java版本:11

[root@km1 ~]# java --version
openjdk 11.0.12 2021-07-20 LTS
OpenJDK Runtime Environment 18.9 (build 11.0.12+7-LTS)
OpenJDK 64-Bit Server VM 18.9 (build 11.0.12+7-LTS, mixed mode, sharing)

过程简单概述:
1 clone源码到本地(gitee加速clone速度方法)
2 mvn源码安装项目
3 idea修改thingsboard的UI,配置thingsboard.yml和pom.xml后,重新打包npm
3 将新npm放到centos安装运行

具体步骤:
一 先成功运行项目。
1 clone源码到本地:
将git上的thingsboard源码拉取到gitee,用gitee将项目快速拉取到本地
2 mvn源码安装thingsboard项目
到clone下来的thingsboard项目文件夹执行mvn install

#--settings 指定maven的配置文件绝对路径
mvn clean install -DskipTests --settings D:\environmentfile\Maven\apache-maven-3.6.1\conf\settings.xml

点此查看thinsboard视频源码安装教程
3 idea打开本地thingsboard项目,先配置maven,settings->搜索maven,选择本机maven的settings.xml
配置maven
4 配置完maven,等待idea加载完thingsboard,找到thingsboard\application\src\main\resources\thingsboard.yml文件,配置psql的ip信息,端口信息,和psql的用户名和psql用户密码。
psql

注:
1> psql我是在服务器上用docker起了一个,所以我的localhost:5432改成了ip:1885,大家看各自的情况改成自己的ip:port,官网安装psql指南
2> 配置完psql的地址需要去对应的psql创建名为thingsboard数据库,并且为其创建表结构和初始测试数据
①去对应psql数据库创建名为thingsboard的数据库。
创建thingsboard数据库
②使用thingsboard自带的工具初始化此数据库。
初始化数据库

图中步骤详解:
<1>打开①步骤的文件修改ip、端口、psql用户名和密码
<2>右键步骤③的文件,open in Teminal
open in Terminal
<3>此时光标已经来到Teminal,键入install_按下tab补全文件名,按回车,thingsboard开始初始化对应数据库。
<4>初始化完成
初始化success
<5>
如果数据库本来初始化过,或者用过,会初始化不成功:
解决办法:
① 最简单的方法只需要删除thingsboard数据库,重新新建一个thingsboard即可,RDS PostgreSQL中删除数据库时出现“There are 2 other sessions using the database”报错解决办法。
②如果数据库存在很重要的数据不能直接删,尝试此方法:服务器之间,迁移Thingsboard起在docker里面的psql数据库
5 运行项目运行项目
6 使用webstorm单独打开前端ui-ngx页面调试(如有提示,先执行npm install)。
webstorm
二 修改前端UI
1 修改主题颜色
修改主题颜色
2 修改home面板和主题颜色
1>修改home页面
Homej界面
2>修改主题颜色
主题颜色
3>webstorm在4200端口跑出的页面就是这样的:
home展示
4>将前端修改的代码build一下,这样运行在8080端口的页面也会相应被修改,否则我们刚才的home页面修改和主题颜色变化不会作用到8080端口,因为我们整个项目是

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要将 Vue2 项目打包库并发布npm 上,可以按照以下步骤进行操作: 1. 在项目根目录下创建一个名为 `package.json` 的文件,用于描述你的库信息和依赖项。可以使用 `npm init` 命令自动生模板。 2. 安装必要的依赖项,例如 `vue`、`rollup`、`rollup-plugin-babel` 等。其中 `rollup` 是一个 JavaScript 模块打包器,用于将 Vue2 项目打包一个库;`rollup-plugin-babel` 则是用来将 ES6+ 语法转换 ES5 语法。 ```bash npm install vue rollup rollup-plugin-babel --save-dev ``` 3. 在项目根目录下创建一个名为 `src` 的文件夹,用于存放你的源代码。可以在该目录下创建一个 `index.js` 文件,用于导出你的 Vue2 组件或插件。 4. 在项目根目录下创建一个名为 `rollup.config.js` 的文件,用于配置打包参数。具体配置可以参考下面的示例: ```javascript import babel from 'rollup-plugin-babel'; import commonjs from 'rollup-plugin-commonjs'; import resolve from 'rollup-plugin-node-resolve'; import vue from 'rollup-plugin-vue'; export default { input: 'src/index.js', output: { name: 'MyLibrary', file: 'dist/my-library.js', format: 'umd', globals: { vue: 'Vue' } }, plugins: [ vue(), resolve(), commonjs(), babel({ exclude: 'node_modules/**' }) ], external: ['vue'] }; ``` 5. 在 `package.json` 文件中添加 `scripts` 字段,用于定义打包命令和发布命令。例如: ```json "scripts": { "build": "rollup -c", "prepublishOnly": "npm run build" } ``` 上面的配置表示,运行 `npm run build` 命令会执行 `rollup -c` 命令进行打包运行 `npm publish` 命令时会先执行 `npm run build` 命令,然后再执行发布操作。 6. 执行 `npm login` 命令登录 npm 账号,如果没有账号可以先注册一个。 7. 执行 `npm publish` 命令将库发布npm 上。如果发布功,其他人就可以通过 `npm install` 命令安装你的库并使用了。 以上就是将 Vue2 项目打包库并发布npm 上的基本步骤,具体细节可以根据实际情况进行调整。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值