information-standard-tpl

安装环境

安装nodeJs环境,下载 nodejs，安装完成后，

node - v

安装 yarn

npm install -g yarn

安装依赖

yarn

运行

npm run dev
// or
yarn dev

编译

npm run build

目录结构

|- public
|- script
|- src
|----api //暂时废弃
|----assets //资源
|----cms //cms sdk依赖
|----components //cms sdk依赖
|------BaseDialog //封装的弹窗，样式统一
|------Table//封装的表格，样式统一
|------other...//其他
|----provider //全局注入，element命名空间
|------provider.ts // h
|------provider.vue // render组件
|----utils //工具
|------enum //枚举
|----widgets //组件
|------hook.ts //钩子
|------...
index.html

功能

命名空间

element-plus采用sass的$namespace来解决css样式冲突问题

$namespace = 'cs'

element-plus 组件的样式从 el-xx 替换成 cs-xx，使用时，仍然使用

element-plus 自动按需引入，无需手动引入，无需全局安装

！！！注意

使用 ElMessage 和 ElMessageBox 时，需要手动引入

import { ElMessage, ElMessageBox } from 'element-plus'

权限

在/src/widgets/hook.ts 中引入权限控制 hook

import { usePermission } from '@/libs/Permission/Permission'
import { permissionCodes } from '../enum'

usePermission(props, permissionCodes)

...
defineComponent({
  directives: {
    permission: vPermission,
  },
})

 <IconButton
 //权限控制
  v-permission="workSection-add"
  icon="add-p"
  onClick={onAddProcess}
  type="primary"
>
  添加MyEntityName
</IconButton>

路由地址

路由地址统一由 package.json 中的 name 和/widgets/[组件名]拼接而成
如：

https://localhost:8001/#/base/PersonnelQualification

统一使用BaseDialog和Table来开发

弹窗例子

<BaseDialog
  :title="t('编辑人员资质')"
  v-model="visible"
  class="person-dialog"
  @close="visible = false"
  @confirm="onConfirm"
>
      <el-form
        label-width="113px"
        :inline="true"
        :model="formData"
        label-position="left"
      >
        <el-form-item :label="t('人员ID')" class="person-item">
          <el-input
            v-model="formData.user"
            :placeholder="t('请输入人员ID')"
            class="person-input"
            disabled
            clearable
          />
        </el-form-item>
        ...
      </el-form>
    </BaseDialog>

Table 表格组件

<div class="table-content">
    <Table
    :dataSource="dataSource"
    :columns="columns"
    :total="total"
    :pageSize="MaxResultCount"
    :isChecked="true"
    @sort="onSort"
    @page="onPageChange"
    >
    <template #printTime="{ row }">
        <span>{{ dayjs(row.printTime).format('YYYY-MM-DD HH:MM:ss') }}</span>
    </template>
    <template #action="{ row }">
        <el-button @click="onEdit(row)" class="btn-edit" type="info">{{
        t('修改')
        }}</el-button>
    </template>
    </Table>
</div>

...

<script>
const columns = [
  {
    title: '序号',
    type: 'seq',
    width: '60',
  },
  {
    title: '人员ID',
    field: 'personID',
  },
  {
    title: '人员姓名',
    field: 'name',
  },
  {
    title: '资质工序码',
    field: 'qualification',
  },
  {
    title: '卡号',
    field: 'cardNumber',
  },
  {
    title: '操作',
    field: 'action',
    width: '100',
  },
]
</script>

分支命名

开发：feature/xx
稳定：release/xx

问题

如遇到问题，把问题抛到群里，大家一起想办法解决，不要一个人闷着。

微前端配置

single-spa
待补充...

资源整合平台

解决开发效率和项目资源浪费等问题
待补充...
方案待更新...