产品架构

• 字体为思源字体
  • SourceHanSansCN-Regular 正常字体
  • SourceHanSansCN-Medium 加粗字体
• 代码压缩 compression-webpack-plugin
• 配置文件 baseConfig.json 相关的基本配置数据
• 接口工具 利用Nswage工具依据swagger.json生成
• vue-kst-auth 封装的授权npm包
• vue-router
• Pinia 状态管理
• elementPlus ui库
• axios 尽量使用vue-kst-auth包中暴露的_axios

目录结构

|—— build // 构建过程中版本自动生成插件
|—— public
|—— dist
    |—— component // 执行 yarn run exports 生成的web组件
|—— src
    |—— assets
        |—— them // 主题文件（element-ui自定义主题）
    |—— plugins // 插件
    |—— exports // web组件
    |—— router // 路由
    |—— store
        |—— index.ts // 基本数据
    |—— views
    | App.vue

vue-kst-auth包

• 包含_axios，封装了axios，能够自动获取授权信息、报错拦截弹框
• baseConfig
• 基础数据声明

声明使用示例，更多声明查看包内容

import { ISeverityLevelDto } from "vue-kst-auth";
/** 严重等级 */
const body: ISeverityLevelDto[] | undefined = [];

封装Web Components

按照exports文件下的temp.ce.vue文件来编写web组件，相关引入elementPlus会增加打包后的文件大小，组件不需要elementPlus的情况下将相应代码注释掉或者删除掉。 exports文件下index.ts文件会自动将exports文件下.ce.vue结尾的文件全部打包成web组件

web组件使用 web components

第一种
<script type="module" src="对应地址/component/wc-lib.es.js"></script>
第二种：可以查看有哪些组件可用
    <!-- <script type="module">
        import { wcNameList } from "./component/wc-lib.es.js";
        console.log("组件列表",wcNameList);
    </script> -->
在html中使用：目前需要添加if来渲染，最好传z-index值，不然会出现层级问题
<vite-ts-vue3-temp z-index="" v-if="state.dialogVisible"></vite-ts-vue3-temp>
在Temp.ce.vue中含有获取最高层级代码，z-index不传值的情况下web组件中自动或者最高层级，可能还存在不稳定问题。

项目开始

yarn install

项目运行

yarn run serve

打包

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.