猿创征文Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建
Posted 程序员优雅哥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了猿创征文Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建相关的知识，希望对你有一定的参考价值。
本系列已更新文章：
分享一个实用的 vite + vue3 组件库脚手架工具，提升开发效率
开箱即用 yyg-cli 脚手架：快速创建 vue3 组件库和vue3 全家桶项目
Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root
Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包
Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境
前面完成了组件库的开发环境搭建和 example，咱们可以在 example 中通过业务驱动组件的开发和完善。但组件库开发的目的是给其他开发人员使用，这时候就需要通过文档来展示组件库的使用以及各个组件的 API、方法、插槽等。本文在前面文章的基础上继续实现组件库文档的开发和构建。组价库的文档咱们使用 vitepress 来实现，在之前的文章《vitepress搭建组件库文档》已经详细介绍了 vitepress 1.0 的使用，该文章中谈到的内容本文就快速略过。
1 搭建组件库文档环境
1.1 初始化工程
前面在工程根目录创建 docs 目录，在命令行中进入 docs 目录，使用 pnpm 初始化：
pnpm init
安装 vitepress 为开发依赖：
pnpm install vitepress -D
修改 package.json 文件的 name，并添加 scripts：
"name": "@yyg-demo-ui/docs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
"dev": "vitepress dev",
"build": "vitepress build",
"serve": "vitepress serve"
,
"keywords": [],
"author": "程序员优雅哥",
"license": "ISC",
"devDependencies":
"vitepress": "1.0.0-alpha.28"
1.2 创建目录及文件
在 docs 目录下创建 .vitepress、public、components、demos、guide，分别存放 vitepress 配置文件、公共资源目录、组件文档描述、文档中的 demo、组价库的其他说明文档。放一个 logo.png 图片到 public 目录下。
继续在 docs 目录下依次创建下列文件：
- 组件库首页 index.md：
---
layout: home
title: YYG-DEMO-UI
editLink: true
lastUpdated: true
hero:
name: yyg-demo-ui
text: YYG Vue3企业级中后台组件库
tagline: 组件库描述 / SLOGAN
image:
src: /logo.png
alt: yyg-admin-ui
actions:
- theme: brand
text: 快速开始
link: /guide/
- theme: alt
text: 组件
link: /components/foo
features:
- icon: 🔨
title: 功能/特点 1
details: 功能/特点 1 具体描述信息。
- icon: 🧩
title: 功能/特点 2
details: 功能/特点 2 具体描述信息。
- icon: ✈️
title: 功能/特点 3。
details: 功能/特点 3 具体描述信息。
---
- 组件库菜单 components.ts ：
export const components = [
text: 'Foo 组件示例', link: '/components/foo'
] // end
在 guide 目录下分别创建 index.md 和 quickstart.md：
- guide/index.md：
# 组件库介绍
yyg-demo-ui YYG Vue3企业级中后台组件库
- guide/quickstart.md：
# 快速开始
xxxxxx
## 用法
全局安装组件库
在 components 目录下创建示例组件的说明文档 foo.md：
# Foo 组件示例
1.3 添加插件并配置 vitepress
- 安装 vitepress 中预览组件的插件：
pnpm add @vitepress-demo-preview/component @vitepress-demo-preview/plugin
- 在 .vitepress 目录下创建 config.ts：
import DefaultTheme, defineConfig from 'vitepress'
import componentPreview, containerPreview from '@vitepress-demo-preview/plugin'
import components from '../components'
const nav: DefaultTheme.NavItem[] = [
text: '指南', link: '/guide/' ,
text: '组件', link: '/components/foo'
]
const sidebar: DefaultTheme.Sidebar =
'/guide': [
text: '指南',
items: [
text: '组件库介绍', link: '/guide/' ,
text: '快速开始', link: '/guide/quickstart' ,
]
],
'/components': [
items: [
...components
]
]
export default defineConfig(
title: 'yyg-admin-ui',
description: 'YYG Vue3企业级中后台组件库',
lang: 'cn-ZH',
base: '/',
lastUpdated: true,
themeConfig:
logo: '/logo.png',
siteTitle: 'yyg-admin-ui',
outline: 3,
socialLinks: [
icon: 'github', link: 'https://github.com/vuejs/vitepress'
],
nav,
sidebar
,
markdown:
theme:
light: 'vitesse-light',
dark: 'vitesse-dark'
,
lineNumbers: true,
config(md)
md.use(componentPreview)
md.use(containerPreview)
)
- 在 .vitepress 目录下创建 theme 目录，并在 theme 中创建 index.ts
import DefaultTheme from 'vitepress/theme'
import AntDesignContainer from '@vitepress-demo-preview/component'
import '@vitepress-demo-preview/component/dist/style.css'
import EnhanceAppContext from 'vitepress'
export default
...DefaultTheme,
enhanceApp(ctx: EnhanceAppContext)
ctx.app.component('demo-preview', AntDesignContainer)
此时组件库的文档结构就搭建好了，可以在 docs 目录下执行 pnpm run dev，测试服务是否能正常启动，页面是否正常显示。
2 编写组件的文档
上一步已经引入了用于展示组件 demo 的插件，这一步就简单了。
2.1 安装 element plus 和组件库
- 在 docs 目录下安装依赖：
pnpm install element-plus
pnpm install @yyg-demo-ui/yyg-demo-ui
- 在 .vitepress/theme/index.ts 中引入组件库：
...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import YygDemoUi from '@yyg-demo-ui/yyg-demo-ui'
...
export default
...DefaultTheme,
enhanceApp(ctx: EnhanceAppContext)
ctx.app.use(ElementPlus)
ctx.app.use(YygDemoUi)
ctx.app.component('demo-preview', AntDesignContainer)
2.2 编写demo
在 docs/demos 目录下创建子目录 foo，在 foo 目录下创建两个组件：
foo-1.vue：
<template>
<el-button type="primary">测试按钮</el-button>
</template>
foo-2.vue：
<template>
<yyg-foo :msg="msg"></yyg-foo>
</template>
<script lang="ts" setup>
import ref from 'vue'
const msg = ref('hello custom component')
</script>
2.3 vite 配置文件
在 docs 目录下创建 vite 的配置文件 vite.config.ts，该文件主要配置开发端口和 jsx 插件：
import defineConfig from 'vite'
import VueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig(
plugins: [
VueJsx()
],
server:
port: 3100
)
2.4 在组件库文档中展示 demo
在 docs/components/foo.md 文件中展示上面两个 demo：
# Foo 组件示例
第一个示例：
<preview path="../demos/foo/foo-1.vue" title="基本使用" description="测试使用 Element Plus 组件"></preview>
第二个示例：
<preview path="../demos/foo/foo-2.vue" title="基本使用" description="测试使用自定义组件库组件"></preview>
## 组件介绍
3 运行组件库文档
3.1 本地开发
pnpm run dev
访问 http://localhost:3100/components/foo.html，可以看到 foo 组件的说明文档：
3.2 打包构建
- 打包组件库文档：
pnpm run build
打包后的文档位于：docs/.vitepress/dist 中。
- 预览打包后的结果：
pnpm run serve
预览的效果与本地启动服务的效果一致。
到此咱们已经完成了组件库文档的开发环境搭建和打包构建，下一篇文章将分享加速器 —— 创建新组建的脚手架 cli 的开发。
感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，程序员优雅哥会持续与大家分享更多干货
猿创征文 | 国产数据库实战之使用Docker部署TiDB集群
猿创征文 | 国产数据库实战之使用Docker部署TiDB集群
- 一、TiDB介绍
- 二、检查本地环境
- 三、下载tidb-docker-compose
- 四、访问TiDB集群
- 五、创建测试数据库
- 六、访问TiDB集群的Grafana 监控
- 七、集群数据可视化查看
- 八、访问Spark Web UI
- 九、使用phpmyadmin查看TiDB版本
一、TiDB介绍
1.TiDB简介
TiDB 是 PingCAP 公司自主设计、研发的开源分布式关系型数据库，是一款同时支持在线事务处理与在线分析处理 (Hybrid Transactional and Analytical Processing, HTAP) 的融合型分布式数据库产品。
2.TiDB特性
- 一键水平扩容或者缩容
得益于 TiDB 存储计算分离的架构的设计，可按需对计算、存储分别进行在线扩容或者缩容，扩容或者缩容过程中对应用运维人员透明。
- 金融级高可用
数据采用多副本存储，数据副本通过 Multi-Raft 协议同步事务日志，多数派写入成功事务才能提交，确保数据强一致性且少数副本发生故障时不影响数据的可用性。可按需配置副本地理位置、副本数量等策略满足不同容灾级别的要求。
- 实时 HTAP
提供行存储引擎 TiKV、列存储引擎 TiFlash 两款存储引擎，TiFlash 通过 Multi-Raft Learner 协议实时从 TiKV 复制数据，确保行存储引擎 TiKV 和列存储引擎 TiFlash 之间的数据强一致。TiKV、TiFlash 可按需部署在不同的机器，解决 HTAP 资源隔离的问题。
- 云原生的分布式数据库
专为云而设计的分布式数据库，通过 TiDB Operator 可在公有云、私有云、混合云中实现部署工具化、自动化。
- 兼容 MySQL 5.7 协议和 MySQL 生态
兼容 MySQL 5.7 协议、MySQL 常用的功能、MySQL 生态，应用无需或者修改少量代码即可从 MySQL 迁移到 TiDB。提供丰富的数据迁移工具帮助应用便捷完成数据迁移。
3.TiDB集群整体架构
4.TiDB集群各部分介绍
- TiDB Server：
SQL 层，对外暴露 MySQL 协议的连接 endpoint，负责接受客户端的连接，执行 SQL 解析和优化，最终生成分布式执行计划。TiDB 层本身是无状态的，实践中可以启动多个 TiDB 实例，通过负载均衡组件（如 LVS、HAProxy 或 F5）对外提供统一的接入地址，客户端的连接可以均匀地分摊在多个 TiDB 实例上以达到负载均衡的效果。TiDB Server 本身并不存储数据，只是解析 SQL，将实际的数据读取请求转发给底层的存储节点 TiKV（或 TiFlash）。
- PD (Placement Driver) Server：
整个 TiDB 集群的元信息管理模块，负责存储每个 TiKV 节点实时的数据分布情况和集群的整体拓扑结构，提供 TiDB Dashboard 管控界面，并为分布式事务分配事务 ID。PD 不仅存储元信息，同时还会根据 TiKV 节点实时上报的数据分布状态，下发数据调度命令给具体的 TiKV 节点，可以说是整个集群的“大脑”。此外，PD 本身也是由至少 3 个节点构成，拥有高可用的能力。建议部署奇数个 PD 节点。
- 存储节点
1.TiKV Server：负责存储数据，从外部看 TiKV 是一个分布式的提供事务的 Key-Value 存储引擎。存储数据的基本单位是 Region，每个 Region 负责存储一个 Key Range（从 StartKey 到 EndKey 的左闭右开区间）的数据，每个 TiKV 节点会负责多个 Region。TiKV 的 API 在 KV 键值对层面提供对分布式事务的原生支持，默认提供了 SI (Snapshot Isolation) 的隔离级别，这也是 TiDB 在 SQL 层面支持分布式事务的核心。TiDB 的 SQL 层做完 SQL 解析后，会将 SQL 的执行计划转换为对 TiKV API 的实际调用。所以，数据都存储在 TiKV 中。另外，TiKV 中的数据都会自动维护多副本（默认为三副本），天然支持高可用和自动故障转移。
2.TiFlash：TiFlash 是一类特殊的存储节点。和普通 TiKV 节点不一样的是，在 TiFlash 内部，数据是以列式的形式进行存储，主要的功能是为分析型的场景加速。
5.本次TiDB集群组件
本次TiDB集群默认部署组件：3 个 PD，3 个 TiKV，1 个 TiDB 和监控组件 Prometheus，Pushgateway，Grafana 以及 tidb-vision等。
二、检查本地环境
1.检查docker状态
[root@server ~]# systemctl status docker
● docker.service - Docker Application Container Engine
Loaded: loaded (/usr/lib/systemd/system/docker.service; enabled; vendor preset: disabled)
Active: active (running) since Mon 2022-10-10 22:55:04 CST; 5min ago
Docs: https://docs.docker.com
Main PID: 10218 (dockerd)
Tasks: 16
Memory: 115.0M
CGroup: /system.slice/docker.service
└─10218 /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
Oct 10 22:54:52 192.168.3.240 dockerd[10218]: time="2022-10-10T22:54:52.997828575+08:00" level=info msg="ccResolverWrapper: sending update to cc: ...dule=grpc
Oct 10 22:54:52 192.168.3.240 dockerd[10218]: time="2022-10-10T22:54:52.997860425+08:00" level=info msg="ClientConn switching balancer to \\"pick_f...dule=grpc
Oct 10 22:54:54 192.168.3.240 dockerd[10218]: time="2022-10-10T22:54:54.645100072+08:00" level=info msg="[graphdriver] using prior storage driver: overlay2"
Oct 10 22:54:59 192.168.3.240 dockerd[10218]: time="2022-10-10T22:54:59.834619854+08:00" level=info msg="Loading containers: start."
Oct 10 22:55:02 192.168.3.240 dockerd[10218]: time="2022-10-10T22:55:02.643646144+08:00" level=info msg="Default bridge (docker0) is assigned with... address"
Oct 10 22:55:02 192.168.3.240 dockerd[10218]: time="2022-10-10T22:55:02.914993511+08:00" level=info msg="Loading containers: done."
Oct 10 22:55:03 192.168.3.240 dockerd[10218]: time="2022-10-10T22:55:03.832847548+08:00" level=info msg="Docker daemon" commit=e42327a graphdriver...=20.10.18
Oct 10 22:55:03 192.168.3.240 dockerd[10218]: time="2022-10-10T22:55:03.832929345+08:00" level=info msg="Daemon has completed initialization"
Oct 10 22:55:04 192.168.3.240 systemd[1]: Started Docker Application Container Engine.
Oct 10 22:55:04 192.168.3.240 dockerd[10218]: time="2022-10-10T22:55:04.289729613+08:00" level=info msg="API listen on /var/run/docker.sock"
Hint: Some lines were ellipsized, use -l to show in full.
2.检查docker版本
[root@server ~]# docker version
Client: Docker Engine - Community
Version: 20.10.18
API version: 1.41
Go version: go1.18.6
Git commit: b40c2f6
Built: Thu Sep 8 23:14:08 2022
OS/Arch: linux/amd64
Context: default
Experimental: true
Server: Docker Engine - Community
Engine:
Version: 20.10.18
API version: 1.41 (minimum version 1.12)
Go version: go1.18.6
Git commit: e42327a
Built: Thu Sep 8 23:12:21 2022
OS/Arch: linux/amd64
Experimental: false
containerd:
Version: 1.6.8
GitCommit: 9cd3357b7fd7218e4aec3eae239db1f68a5a6ec6
runc:
Version: 1.1.4
GitCommit: v1.1.4-0-g5fd4c4d
docker-init:
Version: 0.19.0
GitCommit: de40ad0
[root@192 ~]#
3.检查docker-compose版本
[root@server ~]# docker-compose version
docker-compose version 1.25.0, build 0a186604
docker-py version: 4.1.0
CPython version: 3.7.4
OpenSSL version: OpenSSL 1.1.0l 10 Sep 2019
三、下载tidb-docker-compose
1.下载tidb-docker-compose
git clone https://github.com/pingcap/tidb-docker-compose.git
2.检查文件
[root@server tidb-docker-compose-master]# pwd
/data/TiDB/tidb-docker-compose-master
[root@server tidb-docker-compose-master]# ll
total 64
drwxr-xr-x 3 root root 60 Jul 11 14:28 compose
drwxr-xr-x 4 root root 4096 Jul 11 14:28 config
drwxr-xr-x 3 root root 59 Jul 11 14:28 dashboard-installer
drwxr-xr-x 3 root root 19 Jul 11 14:28 docker
-rw-r--r-- 1 root root 11343 Jul 11 14:28 docker-compose-binlog.yml
-rw-r--r-- 1 root root 292 Jul 11 14:28 docker-compose-test.yml
-rw-r--r-- 1 root root 1566 Jul 11 14:28 docker-compose-tiflash-nightly.yml
-rw-r--r-- 1 root root 5445 Jul 11 14:28 docker-compose.yml
-rw-r--r-- 1 root root 4736 Jul 11 14:28 docker-swarm.yml
-rw-r--r-- 1 root root 11294 Jul 11 14:28 LICENSE
drwxr-xr-x 2 root root 24 Jul 11 14:28 pd
-rw-r--r-- 1 root root 11443 Jul 11 14:28 README.md
drwxr-xr-x 2 root root 24 Jul 11 14:28 tidb
drwxr-xr-x 2 root root 24 Jul 11 14:28 tidb-binlog
drwxr-xr-x 2 root root 24 Jul 11 14:28 tidb-vision
drwxr-xr-x 2 root root 24 Jul 11 14:28 tikv
drwxr-xr-x 6 root root 95 Jul 11 14:28 tispark
drwxr-xr-x 2 root root 29 Jul 11 14:28 tools
3.查看docker-compose.yml文件
[root@server tidb-docker-compose-master]# cat docker-compose.yml
version: '2.1'
services:
pd0:
image: pingcap/pd:latest
ports:
- "2379"
volumes:
- ./config/pd.toml:/pd.toml:ro
- ./data:/data
- ./logs:/logs
command:
- --name=pd0
- --client-urls=http://0.0.0.0:2379
- --peer-urls=http://0.0.0.0:2380
- --advertise-client-urls=http://pd0:2379
- --advertise-peer-urls=http://pd0:2380
- --initial-cluster=pd0=http://pd0:2380,pd1=http://pd1:2380,pd2=http://pd2:2380
- --data-dir=/data/pd0
- --config=/pd.toml
- --log-file=/logs/pd0.log
restart: on-failure
pd1:
image: pingcap/pd:latest
ports:
- "2379"
volumes:
- ./config/pd.toml:/pd.toml:ro
- ./data:/data
- ./logs:/logs
command:
- --name=pd1
- --client-urls=http://0.0.0.0:2379
- --peer-urls=http://0.0.0.0:2380
- --advertise-client-urls=http://pd1:2379
- --advertise-peer-urls=http://pd1:2380
- --initial-cluster=pd0=http://pd0:2380,pd1=http://pd1:2380,pd2=http://pd2:2380
- --data-dir=/data/pd1
- --config=/pd.toml
- --log-file=/logs/pd1.log
restart: on-failure
pd2:
image: pingcap/pd:latest
ports:
- "2379"
volumes:
- ./config/pd.toml:/pd.toml:ro
- ./data:/data
- ./logs:/logs
command:
- --name=pd2
- --client-urls=http://0.0.0.0:2379
- --peer-urls=http://0.0.0.0:2380
- --advertise-client-urls=http://pd2:2379
- --advertise-peer-urls=http://pd2:2380
- --initial-cluster=pd0=http://pd0:2380,pd1=http://pd1:2380,pd2=http://pd2:2380
- --data-dir=/data/pd2
- --config=/pd.toml
- --log-file=/logs/pd2.log
restart: on-failure
tikv0:
image: pingcap/tikv:latest
volumes:
- ./config/tikv.toml:/tikv.toml:ro
- ./data:/data
- ./logs:/logs
command:
- --addr=0.0.0.0:20160
- --advertise-addr=tikv0:20160
- --data-dir=/data/tikv0
- --pd=pd0:2379,pd1:2379,pd2:2379
- --config=/tikv.toml
- --log-file=/logs/tikv0.log
depends_on:
- "pd0"
- "pd1"
- "pd2"
restart: on-failure
tikv1:
image: pingcap/tikv:latest
volumes:
- ./config/tikv.toml:/tikv.toml:ro
- ./data:/data
- ./logs:/logs
command:
- --addr=0.0.0.0:20160
- --advertise-addr=tikv1:20160
- --data-dir=/data/tikv1
- --pd=pd0:2379,pd1:2379,pd2:2379
- --config=/tikv.toml
- --log-file=/logs/tikv1.log
depends_on:
- "pd0"
- "pd1"
- "pd2"
restart: on-failure
tikv2:
image: pingcap/tikv:latest
volumes:
- ./config/tikv.toml:/tikv.toml:ro
- ./data:/data
- ./logs:/logs
command:
- --addr=0.0.0.0:20160
- --advertise-addr=tikv2:20160
- --data-dir=/data/tikv2
- --pd=pd0:2379,pd1:2379,pd2:2379
- --config=/tikv.toml
- --log-file=/logs/tikv2.log
depends_on:
- "pd0"
- "pd1"
- "pd2"
restart: on-failure
tidb:
image: pingcap/tidb:latest
ports:
- "4000:4000"
- "10080:10080"
volumes:
- ./config/tidb.toml:/tidb.toml:ro
- ./logs:/logs
command:
- --store=tikv
- --path=pd0:2379,pd1:2379,pd2:2379
- --config=/tidb.toml
- --log-file=/logs/tidb.log
- --advertise-address=tidb
depends_on:
- "tikv0"
- "tikv1"
- "tikv2"
restart: on-failure
tispark-master:
image: pingcap/tispark:v2.1.1
command:
- /opt/spark/sbin/start-master.sh
volumes:
- ./config/spark-defaults.conf:/opt/spark/conf/spark-defaults.conf:ro
environment:
SPARK_MASTER_PORT: 7077
SPARK_MASTER_WEBUI_PORT: 8080
ports:
- "7077:7077"
- "8080:8080"
depends_on:
- "tikv0"
- "tikv1"
- "tikv2"
restart: on-failure
tispark-slave0:
image: pingcap/tispark:v2.1.1
command:
- /opt/spark/sbin/start-slave.sh
- spark://tispark-master:7077
volumes:
- ./config/spark-defaults.conf:/opt/spark/conf/spark-defaults.conf:ro
environment:
SPARK_WORKER_WEBUI_PORT: 38081
ports:
- "38081:38081"
depends_on:
- tispark-master
restart: on-failure
tidb-vision:
image: pingcap/tidb-vision:latest
environment:
PD_ENDPOINT: pd0:2379
ports:
- "8010:8010"
restart: on-failure
# monitors
pushgateway:
image: prom/pushgateway:v0.3.1
command:
- --log.level=error
restart: on-failure
prometheus:
user: root
image: prom/prometheus:v2.2.1
command:
- --log.level=error
- --storage.tsdb.path=/data/prometheus
- --config.file=/etc/prometheus/prometheus.yml
ports:
- "9090:9090"
volumes:
- ./config/prometheus.yml:/etc/prometheus/prometheus.yml:ro
- ./config/pd.rules.yml:/etc/prometheus/pd.rules.yml:ro
- ./config/tikv.rules.yml:/etc/prometheus/tikv.rules.yml:ro
- ./config/tidb.rules.yml:/etc/prometheus/tidb.rules.yml:ro
- ./data:/data
restart以上是关于猿创征文Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建的主要内容，如果未能解决你的问题，请参考以下文章
猿创征文 | 国产数据库实战之使用Docker部署TiDB集群
猿创征文 | 国产数据库实战之使用Docker部署TiDB集群
猿创征文｜2022年快过完了，是时候总结一下那些优秀的 React 组件库