基于脚手架开发
# 1 环境准备
node版本:16.14.0(https://nodejs.org/dist/v16.14.0/) 后台版本: 6.1.0 知识储备:pnpm+vite+vue3+element-plus
# 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
输入账号密码邮箱:
邮箱:ganweisoft@ganweisoft.com
# 4.3 安装敢为脚手架(控制台cmd为管理员权限下执行该命令)
详情
- 打开终端控制(请用管理员权限打开)
- 执行脚本:
npm install ganwei-cli -g
输入ganwei
指令查看是否安装成功,如果安装不成功,请使用npm uninstall -g ganwei-cli
卸载程序,重新安装;另外,也可以执行npm config get prefix
,获取脚手架全局放置位置,里面含有"ganwei"、"ganwei.cmd"2个文件。
ganwei
npm uninstall -g ganwei-cli
npm config get prefix
说明:如果 使用 npm install ganwei-cli
指令安装成功,加-g却不成功,则可能原因有:(1)安装在C盘无权限,请正常安装D盘目录 (2)配置了环境变量后,没有重启
上述所有指令执行截图:
# 4.4 切换镜像源
npm config set registry https://mirrors.cloud.tencent.com/npm/
# 4.5 创建项目
详情
新建空文件夹,基于当前文件夹,打开终端控制窗口:执行脚本:
ganwei create [projectName]
脚手架有可能有多个版本选择,这里我们选择6.1版本进行开发 项目创建成功
# 5 项目结构说明
详情
├─configuration
├─cleanNodeModule // 清除所有node-module
├─gitClone // 子应用克隆脚本(克隆至packages)
├─moduleConfiguration // 子应用相关配置(端口、仓库地址配置)
├─packages // 所有应用
└─ganwei-iotcenter-index // 基座
└─ganwei-iotcenter-login // 登录模块
└─ganwei-iotcenter-template // 子应用开发模板
├─.gitignore // git 提交忽略文件配置
├─package.json // 包版本管理文件
├─pnpm-lock.yaml
├─pnpm-workspace.yaml
├─readme
打开package.json 查看执行指令
dev // 本地启动项目
build // 打包
updateModule // 更新内部公用模块包
download // 下载子应用
cleanAll // 删除所有依赖包
public // 设置公共镜像
pnpm dev 相当于执行packages下子应用的全部dev命令
pnpm build 相当于执行packages下子应用的全部build命令
pnpm updateModule 相当于执行packages下子应用的全部updateModule命令
pnpm download xxxx 下载某个子应用(参考下面子应用管理)
pnpm cleanAll 删除所有依赖包,包含子应用依赖包
pnpm public 设置公共镜像
# 6 子应用开发
# 6.1 模板文件结构
详情
├─build
├─enteryJson.js //入口文件配置
├─postInstall.cjs //安装内部依赖包脚本
├─vite-addInfo-html.ts //添加版本信息脚本
├─public
│ └─static // 公共静态文件
│ ├─css // 公共css样式(element样式包)
│ ├─font // 字体库
│ ├─http // 全局http请求
│ ├─images // 图片文件
│ ├─js // 公用js
│ └─themes // 主题文件
└─src // 项目源代码
├─assets // 静态文件
│ ├─images // 图片
├─request // 接口定义
└─views // 多页面
└─template.vue // 页面文件
├─APP.vue // 根组件
├─hostMap.js // 端口映射文件
├─main.js // 入口文件
├─router.js // 路由文件
......
打开package.json 查看执行指令
dev // 本地启动项目
build // 打包
updateModule // 更新内部公用模块包
postinstall // 安装共有依赖之后安装内部依赖包
提示
系统默认用户名及密码请联系相关人员获取
# 6.2. 配置菜单
详情
在部署IoTCenter 6.1服务之后,在浏览器输入https://127.0.0.1:44380 使用默认账号密码进行登录,打开运维模块,进行菜单管理配置(如果没有该插件,请在应用商店搜索"菜单管理"进行安装,安装完成在应用商店已安装进行服务重启或者自行手动重启。需要在此强调:每新增一个模块,需要模块重启服务)。
依据子应用名称配置,这里以模板页面开发为例
参数说明: 插件Id:填写后台提供的插件包名 显示端:有PC、移动端、桌面版等选项,这里以pc端为例 组件路径:即页面路由路径,配置格式为:/Index/jumpIframe/子应用包名/页面路由名,如实时快照:/Index/jumpIframe/ganwei-iotcenter-system-snapshot/systemSnapshot 子应用包名:根据子应用功能自定义命名
页面路由名:
# 6.3 子应用名称修改
根据当前子应用名称进行修改
# 6.4 端口配置
根据子应用名称进行端口配置
注意
注意:各子应用端口不能重复
# 6.5 代码开发
在packages目录下面找到子应用模板,打开src/views目录,根据子应用功能,创建vue文件
# 6.6 启动项目
详情
执行脚本:
1:pnpm install
2:pnpm dev
warning pnpm install 安装依赖报错
- 检查node版本是否为16.14.0
- 是否已经登录内部镜像http://139.9.43.67:8081/repository/npm-group/
- 如果共有镜像选择的是淘宝镜像,可选择用腾讯镜像安装依赖:https://mirrors.cloud.tencent.com/npm/
- 删除所有子应用package-lock.json
- 删除已经安装的依赖包
- 重新安装依赖
提示
系统默认用户名及密码请联系相关人员获取
# 6.7 登录
输入账号密码登录 IoT初始化默认账号密码:
# 6.8 打开模板开发页面
登录之后打开模板开发页面
# 6.9. 多语言配置
# 6.9.1 准备翻译文件
详情
功能说明:所有翻译文件都保存在后台子应用功能插件中,当访问各个页面时,前端根据当前语言,请求后台对应页面翻译文件。详细配置请看中英文开发文档 后台插件模板下载
将下载的后台模板插件,解压放进publish/plugins 注意:翻译文件名称命名规则:子应用包名.页面路由名.json,且均为小写
# 6.9.2 设置系统安全模式
如果当前系统为安全模式,需要设置为非安全模式,重启服务 登录系统,打开应用商店-->已安装-->点击设置 ,选择不安全模式,点击确定保存 重启服务,显示非安全模式即可
# 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 子应用版本记录
子应用开发完成之后,有版本发行,可记录版本号,以日志预览为例子:
子应用打包之后可看到版本记录:
# 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