基于 Vue3 + Vite + TS 的UI组件库

开发环境

-- vue : 3.2.45
-- vite : 4.0.0
-- typescript : 4.9.3

项目结构

├── packages $~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 组件库文件夹
$~~~~~~~~~$├── public $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 组件库公共资源文件夹
$~~~~~~~~~~~~~~~~~~$├── css $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // css样式文件夹
$~~~~~~~~~~~~~~~~~~~~~~~~~~~$├── prism.css $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 代码高亮样式
$~~~~~~~~~$├── Button $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 单组件文件夹
$~~~~~~~~~~~~~~~~~~$├── src $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // vue文件夹
$~~~~~~~~~~~~~~~~~~~~~~~~~~~$├── index.vue $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 组件主体
$~~~~~~~~~~~~~~~~~~$├── docs $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 组件说明文件夹

$~~~~~~~~~~~~~~~~~~~~~~~~~~~$├── demo.vue $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 示例
$~~~~~~~~~~~~~~~~~~~~~~~~~~~$├── Preview.vue $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 展示示例源代码
$~~~~~~~~~~~~~~~~~~~~~~~~~~~$├── README.md $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 说明文件（已通过插件转vue类型）
$~~~~~~~~~~~~~~~~~~~~~~~~~~~$└── README.d.ts $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 说明文件类型声明
$~~~~~~~~~~~~~~~~~~$├── less $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 样式文件夹
$~~~~~~~~~~~~~~~~~~~~~~~~~~~$├── index.less $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 样式文件
$~~~~~~~~~~~~~~~~~~$├── index.ts $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 导出组件
$~~~~~~~~~$├── index.ts $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 组件汇总导出
$~~~~~~~~~$├── list.json $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 组件列表
├── examples $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 组件库示例
$~~~~~~~~~$├── assets $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 资源
$~~~~~~~~~$├── routes $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 路由文件夹
$~~~~~~~~~~~~~~~~~~$├── index.ts $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 路由
$~~~~~~~~~$├── App.vue

$~~~~~~~~~$├── main.ts

├── build $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 打包配置文件夹
$~~~~~~~~~$├── vite.base.config.ts $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 基础配置
$~~~~~~~~~$├── vite.doc.config.ts

$~~~~~~~~~$├── vite.lib.config.ts
├── public $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // 公共资源
├── script $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // js文件
├── index.html

├── package.json
├── package-lock.json
├── tsconfig.json $~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$ // TS配置文件
├── README.md
├── .gitignore
├── .npmignore