iwhere ⚡

Vue3 UI Components Library

注：该仓库主要记录从 0 搭建一个组件库的方法，包括组件文档的编写

安装 pnpm

npm install pnpm -g

克隆代码到本地

# github

# gitee

安装依赖

# 安装工程依赖(根目录)
pnpm install
# 打包组件库 (根目录)
pnpm build

提交代码

1. docs/.vitepress/cache, cache缓存文件可不提交
2. packages/components/iwhere/dist,dist打包文件也可不提交
3. pnpm-lock.yaml 可不提交

工程说明

docs 存放文档 (md 文件)

组件使用说明，sdk 库说明

1. zh下为存放对应 md 文件，开发组件关注component文件夹
2. 所写 md 文件如需用到图片，图片放于 public/images**下。
3. .vitepress//i18n/pages/component.json 为文档页面路由映射，需与步骤 1 文件(md)名对应
4. sdk 文档生成，不必写 md 文件，命令执行。可暂时不管 终端进入 docs,执行命令即可生成sdk md、json 文件
   • npm run copy:sdk
   • npm run docs:sdk

packages 组件开发

1. 所有开发的组件放于components下，并于index.ts文件中导出
2. iwhere文件夹下 component.ts 引入所开发组件并导出。需注意组件名的填写与开发组件时的name对应

   defineOptions({name: 'IwhereViewer'}) import { IwhereViewer } from '@iwhere/components'

play 测试（显示）所开发组件

1. 在src/pages 创建自己组件文件夹，此文件夹名即为路由地址，无需配置路由映射表。例：test
2. 于步骤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')