开发者中心
  • 简体中文
  • English

基于脚手架开发

# 基座加载子应用流程介绍

详情
  1. 代码编辑器下载 Visual Studio Code 下载地址 (opens new window)
  2. Node.js 版本 >= 14下载地址 (opens new window)，或者用 Node Version Manager(NVM) 用于管理多个Node.js版本的工具下载地址 (opens new window)
  3. pnpm 版本 >= 8下载地址 (opens new window)

# 安装指南

# 登录私有源账号

详情
  1. 登录私有源仓库
npm login --registry=http://139.9.43.67:8081/repository/npm-group/
  1. 并输入账号密码邮箱（账号密码需要跟管理员申请）

  1. 查看是否使用账号登录成功
npm whoami

  1. 登录私有源仓库，进行同上操作使用同一账号登录
npm login --registry=http://139.9.43.67:8081/repository/npm-host/

# 安装 ganwei-app cli

详情
  1. 打开终端控制（请用管理员权限打开）
  2. 执行脚本全局安装脚手架
npm install ganwei-app -g  --registry=http://139.9.43.67:8081/repository/npm-group/

# 生成模板文件

详情
  1. 执行指令，该指令只生成单独项目，如需完整项目请看ganwei-app demo相关内容
ganwei-app create [projectName]
  1. 新建空文件夹，基于当前文件夹，打开终端控制窗口
  2. 执行脚本 ganwei-app create [projectName] ， 将 projectName 替换为自己项目的名字
  3. 将会生成指定模块名的模板文件

生成的模板项目文件结构：

ganwei-app clean: 快速删除所有依赖：node_modules，packages/*/node_modules

# ganwei-app demo

详情

该指令会生成完整项目，可直接运行使用

  1. 打开终端控制窗口
  2. 指令生成直接安装运行的完整app项目demo

ganwei-app demo

生成的demo项目文件结构如下：

  1. 进入项目根目录
cd ganwei-app
  1. 开发运行请看下面5.5. 启动项目

# 基座来源以及指令说明

详情 通过命令下载外框 需要拥有仓库权限才可下载 
git clone https://gitee.com/shend/ganwei-app.git -b 6.1

下载后视图如下：

注意: 如果未拥有仓库权限，通过ganwei-app demo下载demo也是拥有完整基座功能。

# package.json 常用指令

详情

指令列表如下:

  1. 开发环境下运行所有模块
pnpm dev
  1. 将所有模块打包为可部署应用
pnpm build
  1. 自动下载文件 modulesConfiguration/modulesConfiguration.json 中配置的所有模块仓库(需要用用仓库权限)
pnpm download
  1. 将 moduleConfiguration 目录下各个公共文件分发到所有模块自引用中，同时记录所有模块分配使用的端口号
node ./moduleConfiguration/copyFile.js

注意

执行以上指令预先确保第三方依赖都正确安装(node_modules)，而需要安装则要正确的源路径

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

切换完成后，可以使用

npm get config registry

指令查看指向结果，是否指向腾讯源地址。

# 子应用开发

# 配置菜单

详情 在部署IoTCenter 6.1服务之后，在浏览器输入https://127.0.0.1:44380 进行登录，打开运维模块，进行菜单管理配置。 可参考如下图配置菜单：

参数说明：

  1. 插件Id:填写后台提供的插件包名（没有，可以仿照其它从应用商店安装的APP菜单ID填写）。
  2. 显示端：有PC、移动端、桌面版等选项，这里app端为例。
  3. 组件路径：即页面路由路径，配置格式为：/Index/jumpIframe/子应用包名/页面路由名。
  4. 子应用包名：根据子应用功能自定义命名。
  5. 是否底部菜单： 菜单显示在首页还是底部导航栏，如果只有一个模块建议选择是方便开发

# 子应用名称修改

详情 1. 修改子模块下 package.json，main.js 中的模块名称

  1. 端口配置
    在安装依赖后会自动生成模块对应地址保存在 addressMapping.json中，若出现端口冲突可更改端口配置
    注意：子模块应用端口不能重复

  1. 代码开发
    在packages 目录下面找到子应用模板，打开 src/views 目录，根据子应用功能，创建 vue 文件。

# 启动项目

详情 1. 输入pnpm install ，为所有模块（packages目录下所有文件夹）安装依赖

需要检查几点:

  1. 是否已经按照前面章节进行登录
  2. 源地址指向是否对应腾讯源
  3. 根目录是否存在.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/
  1. 输入命令，生成微前端配置文件
    在 packages 目录下，各个子应用.eny.development.local文件对应配置连接服务地址以及端口。 同时可以根据实际服务地址修改/moduleconfiguration/.env.ocal.config文件内容。再执行此指令，重新给与各个子应用服务地址。最后输入 pnpm dev，运行成功会自动打开浏览器访问登录页
node ./moduleConfiguration/copyFile.js

  1. 输入命令，运行成功会自动打开浏览器访问登录页
 pnpm dev

# 登录

详情 输入账号密码登录: 登录后会自动跳转到首页，并看到在 5.1. 中配置的菜单

点击跳转到模板页面

# 多语言翻译

详情 1. 翻译文件需参照一下约定： 翻译文件为静态json文件，保存在 public/static/language/xx/yyy.json 其中 xx 为语言类型，yyy 为路由（ router.js ）中配置的页面组件名

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

(3) 在页面中使用

# 子模块打包

详情
  1. 在项目根目录下执行
pnpm build
  1. 会在根目录下生成 dist 文件夹，里面会有所有模块的打包应用

# 子应用部署

详情 将子应用部署到IOT项目IoTCenterWeb/publish/wwwroot/APP 目录下

# 新版本功能说明

# 项目文件结构

# 多语言翻译

详情
  1. 参考 多语言翻译
  2. 在路由加载时会根据请求页面加载翻译文件

# 事件总线

详情

主要用于模块之间的相互调用以及通信

# 主题切换

详情
  1. 触发主题切换

可以通过手动调用全局注入的 MFEManager.setTheme 来触发主题文件的更新

  1. 监听主题切换 可以监听 changeTheme ，获取切换的主题，在回调中处理其余操作，加载更多样式文件

# 调用二维码识别

传入当前 window 上下文，以及回调获取二维码扫描结果 内部实现借助于事件总线，触发调用扫码 open-qrcode 以及结果响应事件 app-qrcode-result

# 控制模块跳转

详情

通过调用基座路由实现跨模块跳转

开发环境下，基座通过映射文件 hostMap.js 查询跳转模块对应的 IP 地址

打包环境下，直接访问 IP:PORT/ganwei-app-*** 获取页面

# JSX支持

详情
  1. babelrc（babel配置文件）

  1. xxx.vue

# TS 支持

详情 参考链接： 
https://www.typescriptlang.org/docs/handbook/intro.html
https://wangdoc.com/typescript/
  1. vite.base.config.(ts|js)

在vite中配置支持自动寻找 .ts 拓展名文件

  1. tsconfig.json

新增 TS 配置文件，添加自定义类型解析、导入路径别名（vscode才能支持跳转，类型提示）

  1. env.d.ts .vue 文件需要配置 TS 解析，declare module '*.vue'

挂载在 Vue 全局变量类型提示，interface ComponentCustomProperties 须在这里进行拓展

  1. 将所有导入 js/ts 文件的文件拓展名去掉，避免引用错误

# Enums

详情 TS 支持使用枚举值，可以通过枚举值避免不明意义的魔法值。 如 使用1，2，3标识各种状态，既不直观，多个文件需要修改时又不方便定位 通过使用枚举值能够避免此问题

如何定义枚举：

如何使用：

# Models

详情

在前后端对接开发中可以先定义好接口请求参数、响应模型，方便开发以及提供类型提示

以下方法从 @ganwei/gw-app-ts 导出

  1. @Entity 类装饰器 功能：实例化类时传入对象，并进行格式化生成实例

  1. @Type(class, isArray=false) 类成员装饰器 功能：格式化实例时指定类型

  1. @Default(value) 类成员装饰器 功能： 格式化实例，若为提供初始值则使用默认值

  1. @Map((instance) => any) 类成员装饰器 功能：格式化实例，为类成员提供映射操作

# Request

详情

在该文件夹中定义了模块开发中需要使用到的接口，请求参数、响应模型 同时使用了 TS 提供的装饰器功能实现对接口请求、响应之前进行额外处理，如格式化数据类型等

# Service

详情

装饰器只能使用于 class 中，无法在函数、变量单独使用 https://wangdoc.com/typescript/decorator

  1. @Service(baseService) 类装饰器 功能：当存在多个Service时能够使用同一个单例BaseService父类，实例化多个Service时不会重复实例化BaseService

  1. @Get(url)，@Post(url), @Delete(url), @PostForm(url) , @Put(url) 类方法装饰器 功能：拦截请求，在请求前后进行额外处理，只有使用这些装饰器后，其他装饰器才会生效

  1. @ResponseType（class, isArray） 类方法装饰器 第一个参数为需实例化的类，第二个参数为响应数据是否为数组，由于 js 并不支持为数组指定类型所以需要此参数 功能：对接口返回数据类型指定并进行类型格式化

  1. @RequestType(class, isArray = false) 类方法装饰器 第一个参数为需实例化的类，第二个参数为响应数据是否为数组，由于 js 并不支持为数组指定类型所以需要此参数 功能：对接口请求参数数据类型指定并进行类型格式化

上次更新: 2024/10/11 14:01:13

← 模板引擎→

目录