跳到主要内容
版本：Next

前端开发

一、背景​

lmes-cli 搭建工具，为了快速创建lmes外部组件开发模板而开发的工具，减少增删改查等一系列重复工作，提升开发效率。 https://www.npmjs.com/package/lems-cli

安装命令​

yarn add -g lmes-cli
# 或
npm install -g lmes-cli
# 或
pnpm install -g lmes-cli

创建项目​

lmes create my-project
# 或
lmes-cli

启动项目​

cd my-project
yarn dev
# 或
cd my-project
npm run dev

二、安装环境准备​

开发工具​

推荐使用VS-Code

https://code.visualstudio.com/

安装必备的插件​

1.Vue - Official

Vue插件截图

2.Prettier - Code formatter

Prettier插件截图

3.esbenp.prettier-vscode   
4.streetsidesoftware.code-spell-checker
5.dbaeumer.vscode-eslint

Nodejs​

nodeJS >= 20

https://nodejs.cn/download/

npm install -g lmes-cli

安装完成后，运行以下命令查看帮助

lmes-cli -h

命令帮助截图

运行命令快速创建lmes开发模板

lmes-cli create Test

创建模板截图

代码拉取成功，会自动安装所需要的依赖， 等待依赖安装成功后，根据提示运行以下命令，启动服务器

cd [文件夹] 
npm run dev

启动服务器截图1

启动服务器截图2

三、创建组件​

当我们有需求，想要重新创建一个组件时，不需要手动一个个去创建文件和文件夹，只需要通过运行以下命令，即可达到相同的效果，并且支持基础的增删改查。

lmes-cli widget FlowManagement

? 请输入实体名称(例如: Process) Flowdefinition

创建组件截图

重新运行npm run dev即可查看刚才组件的效果

组件效果截图

四、项目目录结构​

|- public
|- script
|- src
|----api 
|----assets //资源
|----cms //cms sdk依赖
|----libs 
|--------Create //创建对象
|--------Base //基础模块
|--------Permission // 权限
|--------Store //公共数据
|--------Language //多语言
|----components //cms sdk依赖
|------BaseDialog //封装的弹窗，样式统一
|------Table//封装的表格，样式统一
|------other...//其他
|----provider //全局注入，element命名空间
|------provider.ts // h
|------provider.vue // render组件
|----utils //工具
|------enum //枚举
|----widgets //组件
|------hook.ts //钩子
|------...
index.html

五、前端组件库information-ui​

在信息化组件开发过程中，根据当前设计稿，抽象出来了一批具备一定扩展性的组件，该组件库，可以满足日常常规组件的开发。

组件库首页截图

组件库示例截图

六、功能扩展​

1. 支持在线生成开发模版CURD​

在线生成模板截图

通过点击添加组件，配置组件名与组件ID，点击确定后，会在本地src/widgets目录下生成一个基础组件，具备增删改查的能力，需要根据接口定义，更改接口字段即可。

配置组件截图1

配置组件截图2

2. 支持配置组件设置及属性​

组件设置截图

通过在代码中配置[widgetName].settings.vue|tsx 配置右侧设置面板，提升开发效率。

设置面板截图

显示效果及输出结果保证与客户端统一

3. 支持本地调试多语言配置，增加可选多语言，提升开发效率​

可以根据自己需要，在代码中更改多语言配置文件

多语言配置截图1

多语言配置截图2

多语言配置截图3

4. 升级表格组件，支持单选功能，优化性能和使用体验​

表格组件截图

兼容checkbox事件，对外输出onChange调用

5. 升级element-plus版本与Vue版本​

{
  "element-plus": "2.6.3",
  "vue": "3.4.27"
}

6. 升级sdk版本，支持最新版本变量监听等​

代码无需改变使用方式，自定适配

7. 优化自动生成menu菜单脚本，适配多场景问题​

8. 支持组件计算属性api，管理组件settings属性和配置​

提高配置组件settings效率，提升组件开发效率与容错

计算属性API截图1

计算属性API截图2

（1）应用场景​

案例：

在setting文件中，比如有个人工看板组件，该组件位置如图：

人工看板组件位置

需要在组件中配置其需要的属性和功能

组件属性配置

通过createComputed函数来创建所需要监听的变量，比如图中的功能分类组件，在代码中如下：

createComputed函数示例1

createComputed函数示例2

createComputed函数示例3

通过在代码中使用进行引用，设置props，最后在代码中直接赋值v-model完成配置，比如图中的widgetMode是一个ref属性，具备响应式能力。

另外在页面端，首先需要设置node属性(必须要设置)，其次需要引入函数getComputedProp，传递刚才配置好的参数widgetMode，完成配置，当右侧属性面板属性变化时，通过以上配置，widgetMode也会跟着变化

页面端配置1

页面端配置2