npm

htui-yllkbz-vue
TypeScript icon, indicating that this package has built-in type declarations

0.2.17 • Public • Published

产品架构

  • 字体为思源字体
    • 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.

Readme

Keywords

none

Package Sidebar

Install

npm i htui-yllkbz-vue

Weekly Downloads

67

Version

0.2.17

License

MIT

Unpacked Size

543 kB

Total Files

49

Last publish

Collaborators

  • hutao