⚡
iwhere Vue3 UI Components Library
注:该仓库主要记录从 0 搭建一个组件库的方法,包括组件文档的编写
安装 pnpm
npm install pnpm -g
克隆代码到本地
# github
# gitee
安装依赖
# 安装工程依赖(根目录)
pnpm install
# 打包组件库 (根目录)
pnpm build
提交代码
docs/.vitepress/cache
,cache
缓存文件可不提交packages/components/iwhere/dist
,dist
打包文件也可不提交pnpm-lock.yaml
可不提交
工程说明
docs 存放文档 (md 文件)
组件使用说明,sdk 库说明
-
zh
下为存放对应 md 文件,开发组件关注component
文件夹 - 所写 md 文件如需用到图片,图片放于
public/images**
下。 -
.vitepress//i18n/pages/component.json
为文档页面路由映射,需与步骤 1 文件(md)名对应 -
sdk
文档生成,不必写 md 文件,命令执行。可暂时不管 终端进入 docs,执行命令即可生成sdk
md、json 文件npm run copy:sdk
npm run docs:sdk
packages 组件开发
- 所有开发的组件放于
components
下,并于index.ts
文件中导出 -
iwhere
文件夹下component.ts
引入所开发组件并导出。需注意组件名的填写与开发组件时的name
对应defineOptions({name: 'IwhereViewer'})
import { IwhereViewer } from '@iwhere/components'
play 测试(显示)所开发组件
- 在
src/pages
创建自己组件文件夹,此文件夹名即为路由地址,无需配置路由映射表。例:test - 于步骤1文件夹下 创建
index.vue
并引入相应组件即可访问
命令介绍
# 本地开发文档环境 (根目录)
pnpm docs:dev
# 开发文档打包 (根目录)
pnpm docs:build
# 打包组件库 (根目录)
pnpm build
# 发布到 npm,tips: 需要将npm的registry切换到原始的(https://registry.npmjs.org/)并提前登录
pnpm release (根目录)
# 工具命令: 创建要开发的组件,此命令回创建组件的基本文件和添加文档
pnpm gen ComponentName
# 工具命令: 删除组件,会删除与该组件相关的文件和文档
pnpm del ComponentName
快速开始
用法
安装依赖
npm install iwhere
完整引入
如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。
// main.ts
import { createApp } from 'vue'
import 'iwhere/dist/style.css'
import iwhere from 'iwhere'
import App from './App.vue'
createApp(App).use(iwhere).mount('#app')