Vue3 意见收集 是否需要加入微前端架构？

[LengYXin]

Vue3

rc 版本已发布一段时间 WTM 的 Vue3 分离版本已提上日程。

在此收集 一些 基础架构的意见和规则方便后续开发

有什么需求都可以提出来 多多益善

常见的路由&多语言等配置现在都是自动化 根据 路径名称匹配 当然也可以手动设置

UI 集成 Antd

Grid 集成 AgGrid

富文本 集成 Ckeditor

页面目前的结构如下

 ── page
    │  
    │── controller        | 控制器 或者说 store 状态存储
    │   ├── entity.ts     | 实体类
    │   ├── index.ts      | 页面控制器
    │── views
    │   ├── action.vue    | 页面操作& 行数据操作
    │   ├── details.vue   | 详情&预览&编辑表单
    │   ├── filter.vue    | 搜索条件
    │   ├── grid.vue      | 表格
    │── index.vue         | page 入口
    │── locales.ts        | 多语言配置 枚举

基本上都是 Vue3 文件推荐语法 当然默认情况下以 @vue-class-component 的 class 组件为主

比较关键的位置 为

entity.ts 配置

import { $i18n, WTM_EntitiesField } from '@/client'; import { EnumLocaleLabel } from '../locales';

/**

• 页面实体 */ class Entity { ITCode: WTM_EntitiesField = { // form 的 name 属性 解析为 Entity.ITCode name: ['Entity', 'ITCode'], // label 字段描述 label: EnumLocaleLabel.ITCode, // 输入框提示 placeholder: $i18n.toPlaceholder(EnumLocaleLabel.ITCode), // 校验规则 rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.ITCode) }], } Password: WTM_EntitiesField = { name: ['Entity', 'Password'], label: EnumLocaleLabel.Password, placeholder: $i18n.toPlaceholder(EnumLocaleLabel.Password), rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.Password) }], } Email: WTM_EntitiesField = { name: ['Entity', 'Email'], label: EnumLocaleLabel.Email, placeholder: $i18n.toPlaceholder(EnumLocaleLabel.Email), rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.Email) }], } Name: WTM_EntitiesField = { name: ['Entity', 'Name'], label: EnumLocaleLabel.Name, placeholder: $i18n.toPlaceholder(EnumLocaleLabel.Name), rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.Name) }], } Gender: WTM_EntitiesField = { name: ['Entity', 'Gender'], label: EnumLocaleLabel.Sex, placeholder: $i18n.toPlaceholder(EnumLocaleLabel.Sex), // 字段 输入类型 radio表现 单选按钮 valueType: "radio", // 远程数据 request: async () => [ { label: $i18n.t(EnumLocaleLabel.Sex_Male), value: 'Male' }, { label: $i18n.t(EnumLocaleLabel.Sex_Female), value: 'Female' } ], rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.Sex) }], } SelectedGroupCodes: WTM_EntitiesField = { name: 'SelectedGroupCodes', label: EnumLocaleLabel.GroupName, placeholder: $i18n.toPlaceholder(EnumLocaleLabel.GroupName), // 字段 输入类型 radio表现 单选按钮 valueType: "checkbox", // 远程数据 request: async () => Ajax.get('/api/_FrameworkUserBase/GetFrameworkRoles'), rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.GroupName) }], } } export const PageEntity = new Entity()

  
  # 使用实体 WtmField 组件 传入 entityKey
  ```ts
  <template>
  <WtmDetails @finish="onFinish">
  <WtmField entityKey="ITCode" />
  <WtmField entityKey="Password" />
  <WtmField entityKey="Email" />
  <WtmField entityKey="Name" />
  <WtmField entityKey="Gender" />
  </WtmDetails>
  </template>
  <script lang="ts">
  import { Vue, Options, Inject, Provide } from "vue-property-decorator";
  @Options({ components: {} })
  export default class extends Vue {
  @Inject() PageController;
  @Provide() formState = {
  Entity: {
    ITCode: "",
    Password: "",
  },
  };
  onFinish(values) {
  console.log("LENG ~ extends ~ onFinish ~ values", values);
  }
  created() {}
  }
  </script>
  <style lang="less">
  </style>

# 源代码 在 [WalkingTec.Mvvm.Vue3Demo](https://github.com/dotnetcore/WTM/tree/feature/vNext/demo/WalkingTec.Mvvm.Vue3Demo/WalkingTec.Mvvm.Vue3Demo/ClientApp) 中
# 是否需要微前端架构？这是一个问题

[LengYXin]

这里顺便贴一个 React 版本

结构和vue3一致

entity.ts

import { action, observable } from 'mobx';
import React from 'react';
import { EnumLocaleLabel } from '../locales';
/**
 * 页面实体
 * 配置参考 https://procomponents.ant.design/components/field-set/
 */
class Entity {
    /**
     * 当前表单 的值
     * @memberof Entity
     */
    @observable values = {};
    /** 
     * 更改 value
     */
    @action.bound
    onValuesChange(values) {
        console.log("LENG ~ frameworkuser", values)
        this.values = values
    }
    /**
     * ITCode
     * @readonly
     * @memberof Entity
     */
    get ITCode(): React.WTM_EntitiesField {
        const label = React.$i18n.t(EnumLocaleLabel.ITCode)
        return {
            name: ['Entity', 'ITCode'],
            label,
            placeholder: React.$i18n.t(`tips.placeholder.input`, { label }),
            rules: [{ required: true }],
        }
    }
    ...
    /**
     * 角色
     * @readonly
     * @memberof Entity
     */
    get SelectedRolesCodes(): React.WTM_EntitiesField {
        const label = React.$i18n.t(EnumLocaleLabel.RoleName)
        return {
            name: 'SelectedRolesCodes',
            label,
            // valueType: "checkbox",
            request: this.GetFrameworkRoles,
            placeholder: React.$i18n.t(`tips.placeholder.input`, { label }),
            rules: [],
        }
    }
    /**
     * 用户组
     * @readonly
     * @memberof Entity
     */
    get SelectedGroupCodes(): React.WTM_EntitiesField {
        const label = React.$i18n.t(EnumLocaleLabel.GroupName)
        return {
            name: 'SelectedGroupCodes',
            label,
            // valueType: "checkbox",
            request: this.GetFrameworkGroups,
            placeholder: React.$i18n.t(`tips.placeholder.input`, { label }),
            rules: [],
        }
    }
    async GetFrameworkRoles(params, props) {
        return React.Ajax.get<any>('/api/_FrameworkUserBase/GetFrameworkRoles')
    }
    async GetFrameworkGroups(params, props) {
        return React.Ajax.get<any>('/api/_FrameworkUserBase/GetFrameworkGroups')
    }
}
export const PageEntity = new Entity()

使用

class ReadonlyFields extends React.Component {
  componentDidMount() {
    console.log("LENG ~ index ~ componentDidMount ~ componentDidMount", this)
  }
  render() {
    return (

      <React.Fragment>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.ITCode} />
          <React.ant.ProFormField readonly width="md" {...PageEntity.Password} />
        </React.ant.ProForm.Group>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.Name} />
          <React.ant.ProFormField readonly width="md" {...PageEntity.Gender} />
        </React.ant.ProForm.Group>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.Email} />
          <React.ant.ProFormField readonly width="md" {...PageEntity.Address} />
        </React.ant.ProForm.Group>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.CellPhone} />
          <React.ant.ProFormField readonly width="md" {...PageEntity.HomePhone} />
        </React.ant.ProForm.Group>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.ZipCode} />
        </React.ant.ProForm.Group>
        <React.ant.ProFormField readonly {...PageEntity.PhotoId} >
          <React.ant.Upload listType="picture-card" >
            <div>
              <React.icons.PlusOutlined />
            </div>
          </React.ant.Upload>
        </React.ant.ProFormField>
        <React.ant.ProFormField readonly {...PageEntity.SelectedGroupCodes} />
        <React.ant.ProFormField readonly {...PageEntity.SelectedRolesCodes} />
      </React.Fragment>
    )
  }
}

[zxr-cn]

大佬 wtm-vue3版本发布日程有了吗？

[LengYXin]

大佬 wtm-vue3版本发布日程有了吗？

已开发完成，待发布

[strugglesharp]

大佬. 2022年喽. VUE3 望眼欲穿哦

[liuliang-wt]

plus里已经可以生成vue3的项目了

[ZenJune]

plus里已经可以生成vue3的项目了

试用了一下. 看到plus里的layui是有代码生成的, 但下载为vue3时 , 没有了本地代码生成器. 这个代码本地生成器还挺重要的. 大部分情况下,程序员还是喜欢写code first. 而且很多时候,是上不了网的.

[ZenJune]

还有layui,官方已经放弃了. 在WTM项目中是否还有坚持的必要?

[2821840032]

接楼上，layui是我这种后端唯一改前端的方式了

[AtlantisDe]

https://github.com/tabler/tabler 用这个?