基于脚手架开发

# 1 环境准备

使用nvm安装，便于node版本切换（https://github.com/coreybutler/nvm-windows/releases）

nvm v // 查看版本 
nvm root // 查看nvm安装目录
nvm list available  // 展示node版本列表
nvm install 16.14.0  // 安装node
nvm unstall <version> // 卸载指定版本nodejs
nvm ls // 查看当前安装过的node版本列表
nvm use version // version为版本号，切换使用node版本

注意

node版本：16.14.0+
IoTCenter 版本6.1
安装nvm前如果已经安装了node，必须要完全卸载。否则在执行npm执行时，会找不到对应指令（此时也可以使用CMD切换到NVM对应版本NODE目录下执行）

控制面板卸载nodejs
删除node安装目录，可以使用npm config get prefix查看目录
手动删除C盘中遗留文件
删除C盘中遗留的文件在C盘查找 .npmrc与 .node_repl_history是否存在，删除以下如果存在，请逐个删除

C:\Program Files (x86)\Nodejs
C:\Program Files\Nodejs
C:\Users\用户名\AppData\Roaming\npm
C:\Users\用户名\AppData\Roaming\npm-cache
C:\Users\用户名\AppData\Local\npm-cache

将有关node的环境变量删除
在CMD中查看卸载是否成功，最后一定要重启电脑。

npm -v  
node -v

# 2 流程介绍

# 2.1 子应用开发流程

# 2.2 基座加载子应用

# 3 IOT服务部署

部署文档

https://ganweicloud.com/docs/6.1.0/pages/51c451/#%E4%B8%8A%E4%BC%A0%E5%8F%91%E5%B8%83%E5%8C%85%E5%88%B0%E6%9C%8D%E5%8A%A1%E5%99%A8

# 4 脚手架安装

# 4.1 安装步骤

在Git Bash Here (或者VS CODE终端)中输入以下命令，更改npm指向:

npm config set registry http://139.9.43.67:8081/repository/npm-group/

提示

系统默认用户名及密码请联系相关人员获取

# 4.2 登录账号

以上指向是私有库路径，需要输入 npm login进行登录执行脚本：

npm login -registry=http://139.9.43.67:8081/repository/npm-group/

账号：ganweisoft 邮箱：ganweisoft@ganweisoft.com

# 4.3 安装敢为脚手架（控制台cmd为管理员权限下执行该命令）

详情

打开终端控制（请用管理员权限打开）
执行脚本：

npm install ganwei-pc-cli -g

输入ganwei-pc指令查看是否安装成功，如果安装不成功，请使用npm uninstall -g ganwei-pc-cli卸载程序，重新安装；另外，也可以执行npm config get prefix，获取脚手架全局放置位置，里面含有"ganwei-pc"、"ganwei-pc.cmd"2个文件。 ganwei-pc npm uninstall -g ganwei-pc-cli npm config get prefix

说明：如果使用 npm install ganwei-pc-cli 指令安装成功，加-g却不成功，则可能原因有：

安装在C盘无权限，请正常安装D盘目录
配置了环境变量后，没有重启

上述所有指令执行截图：加载子应用

# 4.4 切换镜像源

npm config set registry https://mirrors.cloud.tencent.com/npm/

# 4.5 创建项目

详情

新建空文件夹，基于当前文件夹，打开终端控制窗口：执行脚本：

ganwei-pc create [projectName]

脚手架有可能有多个版本选择，这里我们选择6.1版本进行开发加载子应用项目创建成功

# 5 项目结构说明

详情

├─configuration
   ├─cleanNodeModule               // 清除所有node-module脚本
   ├─gitClone                      // 子应用克隆脚本（克隆至packages）
   ├─moduleConfiguration           // 子应用相关配置（端口、仓库地址配置）
   ├─postInstall.cjs               // 安装内部依赖包脚本
├─packages                         // 所有应用
   └─ganwei-iotcenter-index        // 基座
   └─ganwei-iotcenter-login        // 登录模块
   └─ganwei-iotcenter-template     // 子应用开发模板
├─.gitignore                       // git 提交忽略文件配置
├─package.json                     // 包版本管理文件
├─pnpm-lock.yaml   // 锁定项目所依赖的包的版本
├─pnpm-workspace.yaml  // 定义管理结构多项目
├─.npmrc   //设置依赖包的安装来源
├─init.cjs  // gw-base-versions-config 版本包更新
├─readme

打开package.json 查看执行指令

dev              // 本地启动项目
build            // 打包
download         // 下载子应用
cleanAll         // 删除所有依赖包，需要注意使用指令rimraf --version查看安装情况
updateModule     // 更新内部公用模块包
postinstall      // 安装内部公用模块包
start         // 安装依赖并且启动服务，下载脚手架后首先执行的指令

pnpm dev 相当于执行packages下子应用的全部dev命令

pnpm build 相当于执行packages下子应用的全部build命令

pnpm updateModule 相当于执行packages下子应用的全部updateModule命令

pnpm download xxxx 下载某个子应用（参考下面子应用管理）

pnpm cleanAll 删除所有依赖包，包含子应用依赖包

# 6 子应用开发

# 6.1 模板文件结构

详情

├─build
   ├─enteryJson.js                  //入口文件配置
   ├─vite-addInfo-html.ts           //添加版本信息脚本
   ├─vite-plugin-stats-html.js      //vite打包产物分析插件
├─public 
│  └─static              // 公共静态文件
│      ├─css             // 公共css样式（element样式包）
│      ├─fonts           // 字体库
│      ├─http            // 全局http请求
│      ├─images          // 图片文件
│      ├─js              // 公用js 
│      └─themes          // 主题文件
└─src                    // 项目源代码
    ├─assets             // 静态文件
    │  ├─images          // 图片
    ├─request            // 接口定义
       ├─api             // 接口文件夹
         └─template.js   // 模板接口文
       └─api.js          // api请求统一引用
    └─views              // 多页面
        └─template.vue   // 页面文件
    ├─APP.vue            // 根组件
    ├─hostMap.js         // 端口映射文件
    ├─main.js            // 入口文件
    ├─router.js          // 路由文件
  ......

打开package.json 查看执行指令

dev              // 本地启动项目
build            // 打包

提示

系统默认用户名及密码请联系相关人员获取

# 6.2. 配置菜单

详情

在部署IoTCenter 6.1服务之后，在浏览器输入https://127.0.0.1:44380 使用默认账号密码进行登录，打开运维模块，进行菜单管理配置（如果没有该插件，请在应用商店搜索"菜单管理"进行安装，安装完成在应用商店已安装进行服务重启或者自行手动重启。需要在此强调：每新增一个模块，需要模块重启服务）。

登录成功后，通过应用商店搜索‘模板应用’进行安装;然后右上角重启服务，即可在系统运维模块下看到此配置菜单。示意图如下

如果不能从应用商店进行安装，则需要自行手动新增菜单，步骤如下: 打开运维模块，进行菜单管理配置（如果没有该插件，请在应用商店搜索"菜单管理"进行安装，安装完成在应用商店已安装进行服务重启或者自行手动重启。需要在此强调：每新增一个模块，需要模块重启服务，允许安装多个插件后一次性重启）。依据子应用名称配置，这里以模板页面开发为例

首页路由

本实例配置菜单如下：

上级菜单：设备管理
菜单名称：模板开发
模板ID：Ganweisoft.IoTCenter.Module.Template
组件路径：/Index/jumpIframe/ganwei-iotcenter-template/template

参数说明：

插件Id：填写后台提供的插件包名
显示端：有PC、移动端、桌面版等选项，这里以pc端为例
组件路径：即页面路由路径，配置格式为：/Index/jumpIframe/子应用包名/页面路由名，如实时快照：/Index/jumpIframe/ganwei-iotcenter-system-snapshot/systemSnapshot

首页路由页面路由名：

# 6.3 子应用名称修改

详情

以当前template为例：

根据当前子应用名称（命名规范:ganwei-iotcenter-*）修改package.json中name字段

路由引用更新

入口文件更新（引用全局统一弹窗）

更新基座ganwei-iotcenter-index/configuration/moduleConfiguration.json文件，此文件作用是对子应用本地本地启动服务配置以及实际连接服务的配置。

{
    "addressMapping": {
        "ganwei-iotcenter-index": "http://127.0.0.1:8120",
        "ganwei-iotcenter-login": "http://127.0.0.1:8160",
        "ganwei-iotcenter-template": "http://127.0.0.1:8190"
    },
    "applicationPath": {},
    "proxyTarget": "https://127.0.0.1:44380/"
}

# 6.4 端口配置

根据子应用名称进行端口配置。另外proxyTarget表示要连接IoT服务的地址（根据部署IoT后访问地址写入）。

注意

注意：各子应用端口不能重复

首页路由

# 6.5 代码开发

在packages目录下面找到子应用模板，打开src/views目录，根据子应用功能，创建vue文件首页路由

# 6.6 启动项目

详情

执行脚本：

pnpm start

pnpm install 安装依赖报错

安装依赖报错：

检查node，至少16.14.0版本
是否已经登录内部镜像http://139.9.43.67:8081/repository/npm-group/
如果共有镜像选择的是淘宝镜像，可选择用腾讯镜像安装依赖：https://mirrors.cloud.tencent.com/npm/
删除所有子应用package-lock.json
删除已经安装的依赖包
重新安装依赖

start包含了pnpm install指令，安装过程中可能会存在401提示，则重新更改NPM服务器指向(示例4.1)，并进行登录，如下示图

注意

因为要同时安装私有服务器npm依赖包，项目根目录下需要有.npmrc文件，如果不存在要自行新建。 .npmrc文件内容如下:

registry=https://mirrors.cloud.tencent.com/npm/
@ganwei-pc:registry=http://139.9.43.67:8081/repository/npm-hosted/
@ganwei:registry=http://139.9.43.67:8081/repository/npm-hosted/

提示

系统默认用户名及密码请联系相关人员获取

# 6.7 登录

输入账号密码登录 IoT初始化默认账号密码：

首页路由

注意

跟脚手架连接服务相关，具体以目标服务账号密码为准。

# 6.8 打开模板开发页面

登录之后打开模板开发页面效果如下：注意：如果是对接自定义开发API，由于控制器不一致，需要在对应模块（ganwei-iotcenter-template）的根目录，找到vite.config.ts配置文件，对proxy字段进行相应配置，然后重新启动项目。

首页路由

# 6.9. 多语言配置

# 系统安全模式和非安全模式配置

安全模式：只能从应用商店在线安装或升级应用，手动上传或直接放入iotcenter的应用重启后应用会被还原；非应用商店安装的协议、扩展插件不会加载执行。非安全模式：允许从应用商店在线安装、手动上传或直接在iotcenter中替换应用。注意：登录首页后，右上角如果显示为安全模式，需要设置为非安全模式；登录系统，右侧头像-》鼠标悬放-》选择不安全模式，点击确定保存。重启服务，重新登录后即可显示为非安全模式。

# 6.9.1 准备翻译文件

详情

功能说明：所有翻译文件都保存在后台子应用功能插件中，当访问各个页面时，前端根据当前语言，请求后台对应页面翻译文件。详细配置请看中英文开发文档后台插件模板下载

将下载的后台模板插件，解压把back-end目录下的文件拷贝到IoT部署服务publish/plugins目录下,并重启IoT服务（其他插件包也放置在此位置）。或者整个包通过应用商店上传（详情请看包应用插件上传章节），然后进行安装重启，则可以连接上远程环境进行开发。注意：翻译文件名称命名规则：子应用包名.页面路由名.json，且均为小写

# 6.9.2 翻译文件内容格式

# 6.9.3 插件引用

在入口文件中引用翻译插件

import i18n from "gw-base-utils-plus/i18n.js";
app.use(i18n)

翻译插件

import muduleObserve from 'gw-base-utils-plus/moduleObserve'
mixins: [muduleObserve],

# 6.9.4 页面引用

详情

翻译插件

用法：
vue节点引用方式：$t('页面路由名.键名')
js应用方式：this.$t('页面路由名.键名')

# 6.10 主题配置

# 6.10.1 主题文件说明

# 6.10.2 主题文件引用

详情

    {
        src: `/static/themes/default-theme.js`,
        mode: 'dev',
        tag: "script",
        injectTo: "head"
    },

# 6.10.3 主题引用

详情

# 6.10.4 主题切换

可点击这里进行主题切换

# 6.11 公共样式引用

说明：统一风格

# 6.11.1 table表格

# 6.11.2 el-dialog弹窗

详情

公共样式（用法参考el-table、el-dialog弹窗）：分页：@include pagination; 输入框 @include searchInput; 分割线：@include verticalLine; 单行超出省略：@include whiteSpace; 页面主体区域顶部：@include page-header; 页面主体区域：@include page-body;

# 7 子应用打包

根目录下执行pnpm build

子应用打包之后生成assets、static、index.html

# 8 子应用版本记录

每个插件打包后应该知道对应的发布版本，否则会导致项目版本迭代错乱问题，因而基座中集成了自动获取gitee标签版本号作为标头；如果没有这块账号，可以打包后自行手动记录版本。子应用开发完成之后，有版本发行，可记录版本号，以日志预览为例子：

子应用打包之后可看到版本记录：

# 9 子应用部署

将子应用部署到IOT项目目录中ToTCenterWeb/publish/wwwroot目录下查看效果：

# 10 子应用管理（扩展）

需要在根目录下configuration/moduleConfiguration.json中配置applicationPath 仓库配置

执行脚本 pnpm download ganwei-iotcenter-template （此处示例说明，不需要当前环境执行）
即可将子应用下载至packages目录中

# 11 pnpm指令说明（扩展）

pnpm install dayjs -w  安装到全局，npm递归式查找依赖方式，会查到全局
pnpm add dayjs --filter ganwei-iotcenter-template  安装dayjs到子应用ganwei-iotcenter-template中，并且会在子应用dependencies添加依赖
pnpm remove dayjs --filter ganwei-iotcenter-template  跟add相反
pnpm install dayjs -r 安装到每个子应用中，并且会在子应用dependencies添加依赖
pnpm why ganwei-iotcenter-template -r  查看依赖关系
pnpm dev —-filter ganwei-iotcenter-template  在根目录执行子应用指令

# 12 rimraf工具下载（扩展）

工具说明：快速删除比较大的文件夹，如node_moudles 用法：在项目根目录执行

rimraf node_modules

打开cmd窗口,执行指令：

npm install rimraf -g

# 界面结构的显示隐藏（扩展）

在地址后面新增参数，可以隐藏对应的结构板块 isHideHead=true 设置为true则会隐藏head，默认为false isHideMenu=true 设置为true则会隐藏menu，默认为false content=true 设置为true则会隐藏head、menu，默认为false 示例：

https://IP:Port/index.html#/Index/jumpIframe/ganwei-iotcenter-template/template?isHideMenu=true

上次更新: 2024/11/6 15:58:05

← 报警插件开发独立构建开发项目→