Vue3 企業級優雅實戰 - 組件庫框架 - 7 組件庫文檔的開發和構建

来源:https://www.cnblogs.com/youyacoder/archive/2022/11/18/16903476.html
-Advertisement-
Play Games

該系列已更新文章: 分享一個實用的 vite + vue3 組件庫腳手架工具,提升開發效率 開箱即用 yyg-cli 腳手架:快速創建 vue3 組件庫和vue3 全家桶項目 Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo Vue3 企業級優雅實戰 - 組件庫框架 ...


該系列已更新文章:
分享一個實用的 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 目錄下創建 .vitepresspubliccomponentsdemosguide,分別存放 vitepress 配置文件、公共資源目錄、組件文檔描述、文檔中的 demo、組價庫的其他說明文檔。放一個 logo.png 圖片到 public 目錄下。

繼續在 docs 目錄下依次創建下列文件:

  1. 組件庫首頁 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: 

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 上文介紹了命令行方式來對文件進行加解密操作。本文將繼續在此基礎上,實現一個快速簡易的GUI界面方便操作,先上代碼看效果。 ...
  • aspnetcore上傳圖片也就是上傳文件有兩種方式,一種是通過form-data,一種是binary。 先介紹第一種form-data: 該方式需要顯示指定一個IFormFile類型,該組件會動態通過打開一個windows視窗選擇文件 及圖片。 postman演示如上,代碼如下: [HttpPos ...
  • FreeRtos操作系統 首先,應該介紹什麼是FreeRtos,他於單片機而言就是一個管理器,作為管理者管理嵌入式晶元中的任務,堆棧,中斷,隊列等等資源,對於操作系統而言,又分為實時操作系統和非實時操作系統,實時操作系統代表任務或者某個功能必須在指定的運行時間內完成,保證設備想要執行的功能能立即得到 ...
  • 摘要:先通過OPS確認節點狀態是否已經恢復,或登錄後臺執行cm_ctl query -Cv確認集群是否已經Normal。 本文分享自華為雲社區《【實例狀態】GaussDB CN服務異常》,作者:酷哥。 確認節點狀態 先通過OPS確認節點狀態是否已經恢復,或登錄後臺執行cm_ctl query -Cv ...
  • 一、前言 ChunJun(原FlinkX)是一個基於 Flink 提供易用、穩定、高效的批流統一的數據集成工具,既可以採集靜態的數據,比如 MySQL,HDFS 等,也可以採集實時變化的數據,比如 binlog,Kafka等。同時 ChunJun 也是一個支持原生 FlinkSql所有語法和特性的計 ...
  • 學會 MongoDB 的增刪改查只能算得上是“初窺門徑”,瞭解、熟練掌握索引才能算得上“融會貫通”。基本可以認為資料庫的索引知識是一個初級開發向中級開發轉變所必備的知識。 ...
  • 前言 frida-trace是一個用於動態跟蹤函數調用的工具。支持android和ios。安裝教程請參考官網。工欲善其事必先利其器。本文將以某App為示範,演示frida-trace的各種方法在iOS中的應用。 一、目標 讓看文章的你在使用frida-trace時更得心應手。 二、工具 mac系統 ...
  • Android開發之應用更新或軟體下載 本文章學習前提:okHttp3或以上,EventBus或其它事件匯流排工具,四大組件的Activity和Service,安卓通知基礎知識 新建項目文件 目錄結構如下: MainActivity.java 獲取許可權 本項目所需許可權 <!-- 網路許可權--> <us ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...