安装

npm install xzh-lib

完整引入

// main.ts
import { createApp } from "vue";
import XzhLib from "xzh-lib";
//引入样式文件
import "xzh-lib/dist/style.css";
import App from "./App.vue";

createApp(App).use(XzhLib);

局部引入

// 引入组件
import { XXX } from "xzh-lib";

//引入组件类型文件
import { XXX_Inf } from "xzh-lib/dist/utils/typings/XXX";

//引入工具类&&常量类
import { Xzh_Methods, Xzh_Constants } from "xzh-lib";

目录结构

.
├─docs # 组件库文档
│ ├─.vitepress
│ │ ├─constants # 常量类
│ │ │ ├─nar # 导航栏配置常量
│ │ │ ├─sidebar # 侧边栏配置常量
│ │ │ └─index.scss # 常量类入口
│ │ ├─theme # 主题样式与插件配置
│ │ │ ├─theme-chalk # 样式主题配置
│ │ │ │ ├─dark # 暗黑主题配置
│ │ │ │ ├─markdown # markdown中组件样式覆盖
│ │ │ │ └─index.scss # 样式配置入口
│ │ │ └─index.ts # 插件全局注册声明
│ │ └─config.ts # vitepress配置
│ ├─components # 组件库
│ │ ├─examples # 组件实例
│ │ │ ├─showCode # 代码预览组件
│ │ │ └─XXX # 具体业务组件
│ │ │ │ └─index.vue
│ │ ├─guide # 文档指南
│ │ └─XXX # 具体业务组件文档
│ │ │ └─index.md
│ ├─public # 静态资源
│ ├─methods # 方法库
│ ├─resource # 资源库
│ ├─standard # 前端规范库
│ └─index.md # vitepress首页
├─packages # 组件包代码
│ ├─components # 组件
│ │ ├─XXX # 具体业务组件实例
│ │ │ ├─src # 具体业务组件代码
│ │ │ │ └─index.vue
│ │ │ └─index.ts # 具体业务组件注册声明
| | ├─defaults.ts 组件全局注册文件
| | ├─index.ts 组件导出入口文件
| | └─types.ts 组件注册类型文件
│ ├─styles # 样式文件
│ │ ├─component # 组件样式
│ │ │ ├─XXX # 具体业务组件样式
│ │ │ │ └─index.scss
│ │ │ └─index.scss # 组件样式入口
│ │ ├─theme # 主题样式配置
│ │ │ ├─dark # 暗黑主题配置
│ │ │ └─index.scss # 主题样式入口
│ │ └─index.scss # 样式文件入口
│ ├─utils # 工具类
│ | ├─constants # 常量类
│ │ │ ├─XXX # 具体业务常量类
│ | | | └─index.ts
│ | | └─index.ts # 常量类入口
│ | ├─methods # 公共方法类
│ │ │ ├─XXX # 具体业务公共方法类
│ | | | └─index.ts
│ | | └─index.ts #  公共方法入口
│ | ├─typings # 组件类型文件
│ │ │ ├─XXX # 具体业务组件类型文件
│ | | | └─index.ts
│ | | └─index.ts # 组件类型文件入口
│ | └─index.ts # 工具类入口
│ ├─index.ts # 主程序入口
│ └─vite-env.d.ts # vite环境类型文件
├──public # 静态资源
├──.gitignore # git忽略文件
├──index.html # 入口页面
├──package.json
├──README.md # 描述文件
├──tsconfig.json # typescript 配置
└──vite.config.ts # vite 配置