使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

這篇具有很好參考價(jià)值的文章主要介紹了使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

Vue3+TS+Vite開(kāi)發(fā)組件庫(kù)并發(fā)布到npm

網(wǎng)站在線(xiàn)預(yù)覽

參考文檔：

VitePress

一、安裝依賴(lài)及配置

1、安裝 vitepress

推薦使用 pnpm，安裝pnpm：

npm install -g pnpm

安裝vitepress:

pnpm add vitepress -D or yarn add vitepress -D

2、在 package.json 中添加指令

在 script 中添加文檔網(wǎng)站啟動(dòng)和打包指令，啟動(dòng)時(shí)指定端口 8000，并自動(dòng)打開(kāi)

"scripts": {
    "docs:dev": "vitepress dev docs --port 8000 --open",
    "docs:build": "vitepress build docs"
}

完整 package.json 文件如下：

{
  "name": "vue-amazing-ui",
  "version": "0.0.30",
  "private": false,
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/vue-amazing-ui.umd.cjs",
  "module": "./dist/vue-amazing-ui.js",
  "exports": {
    "./dist/style.css": "./dist/style.css",
    "./css": "./dist/style.css",
    ".": {
      "import": "./dist/vue-amazing-ui.js",
      "require": "./dist/vue-amazing-ui.umd.cjs"
    }
  },
  "scripts": {
    "dev": "vite --port 9000 --open --force",
    "build": "run-p type-check build-only",
    "docs:dev": "vitepress dev docs --port 8000 --open",
    "docs:build": "vitepress build docs",
    "docs:deploy": "sh script/deploy.sh",
    "pub": "sh script/publish.sh",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@vuepic/vue-datepicker": "^4.5.1",
    "@vueuse/core": "^10.1.2",
    "@vueuse/integrations": "^10.1.2",
    "ant-design-vue": "^3.2.20",
    "core-js": "^3.30.2",
    "date-fns": "^2.30.0",
    "qrcode": "^1.5.3",
    "swiper": "^9.3.2",
    "vue": "^3.3.4",
    "vue-amazing-ui": "^0.0.30",
    "vue-router": "^4.2.1"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.0",
    "@types/node": "^18.16.14",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.41.0",
    "eslint-plugin-vue": "^9.14.0",
    "less": "^4.1.3",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.8",
    "rollup-plugin-visualizer": "^5.9.0",
    "terser": "^5.17.6",
    "typescript": "~4.7.4",
    "unplugin-vue-components": "^0.25.0",
    "vite": "^4.3.8",
    "vitepress": "1.0.0-beta.1",
    "vue-tsc": "^1.6.5"
  },
  "description": "This template should help get you started developing with Vue Amazing UI in Vue 3.",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/themusecatcher/vue-amazing-ui.git"
  },
  "keywords": [
    "Vue3",
    "TS",
    "Vite",
    "Amazing",
    "UI",
    "Components"
  ],
  "author": "theMuseCatcher",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/themusecatcher/vue-amazing-ui/issues"
  },
  "homepage": "https://github.com/themusecatcher/vue-amazing-ui#readme"
}

3、創(chuàng)建文檔網(wǎng)站目錄和文件

創(chuàng)建 docs/ 目錄
在 docs/ 下新建 index.md 首頁(yè)文件
在 docs/ 下新建 public/ 文件夾（用于存放各種靜態(tài)資源，例如：網(wǎng)站logo、首頁(yè)圖片等）

4、啟動(dòng)項(xiàng)目

啟動(dòng)后項(xiàng)目會(huì)在自動(dòng) /docs 下生成 .vitepress/ 目錄

pnpm docs:dev

二、編寫(xiě)組件庫(kù)文檔

1、創(chuàng)建相關(guān)文件及目錄

在 docs/.vitepress 中

創(chuàng)建 config.ts 配置文件
創(chuàng)建 theme/ 文件夾
在 theme/ 中創(chuàng)建 index.ts 文件
在 theme/ 中創(chuàng)建 global.less 存放全局樣式（使用 less 文件需要安裝相應(yīng)依賴(lài) ）
創(chuàng)建 utils/ 文件夾（用于存放自定義 ts 方法，一會(huì)首頁(yè)自定義顯示版本標(biāo)簽會(huì)用到）
（文檔內(nèi)使用了 less）安裝 less 預(yù)處理器：相關(guān)文檔

pnpm add less -D

2、編寫(xiě)網(wǎng)站首頁(yè)

首頁(yè)配置參考文檔

在 docs/index.md 中編寫(xiě)首頁(yè)相關(guān)內(nèi)容，其中 fetchVersion() 自定義方法用于在首頁(yè) tagline 后添加自定義版本標(biāo)簽

---
layout: home

title: Vue Amazing UI
titleTemplate: Amazing UI Components Library

hero:
  name: Vue Amazing UI
  text: Amazing UI 組件庫(kù)
  tagline: 基于 Vue3 + TS + Vite 開(kāi)發(fā)
  image:
    src: /logo-with-shadow.png
    alt: Vue Amazing UI
  actions:
    - theme: brand
      text: Get Started
      link: /guide/features
    - theme: alt
      text: View on GitHub
      link: https://github.com/themusecatcher/vue-amazing-ui
    - theme: alt
      text: View on NPM
      link: https://www.npmjs.com/package/vue-amazing-ui
---

import { onMounted } from 'vue'
import { fetchVersion } from './.vitepress/utils/fetchVersion'

onMounted(() => {
  fetchVersion()
})

在 docs/.vitepress/utils/ 中創(chuàng)建 fetchVersion.ts 文件

// 遠(yuǎn)程讀取 github 倉(cāng)庫(kù)中 package.json 文件中的 version 版本號(hào)
// 方式一：
  // 讀取規(guī)則：https://api.github.com/repos///contents/?ref=
  // return fetch('https://api.github.com/repos/themusecatcher/vue-amazing-ui/contents/package.json?ref=master', {
  //   headers: {
  //     // See https://docs.github.com/en/rest/overview/media-types
  //     Accept: 'application/vnd.github.v3.raw',
  //     // See https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api#authentication
  //     // Authorization: 'token ${GITHUB_TOKEN}',
  //   }
  // })
  // 方式二：
  // 讀取規(guī)則：https://raw.githubusercontent.com
export function fetchVersion() {
  return fetch('https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/master/package.json')
    .then(res => res.json())
    .then(json => json.version ?? '')
    .then(version => {
      if (!version) return
      const tagLineParagragh = document.querySelector('div.VPHero.has-image.VPHomeHero > div > div.main > p.tagline')
      const docsVersionSpan = document.createElement('samp')
      docsVersionSpan.classList.add('version-tag')
      docsVersionSpan.innerText = version
      tagLineParagragh?.appendChild(docsVersionSpan)
    })
}

在 docs/.vitepress/theme/global.less 中寫(xiě)入標(biāo)簽樣式

.version-tag {
  font-size: 14px;
  line-height: 1.571;
  font-weight: bold;
  padding: 4px 6px;
  margin-left: 6px;
  background: #bd34fe;
  color: #FFF;
  border-radius: 10px;
  display: inline-block;
  vertical-align: top;
  margin-top: 4px;
}

效果如下圖，版本標(biāo)簽：0.0.30

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

3、編寫(xiě)文檔全局樣式

在 theme/global.less 中寫(xiě)入樣式，以下樣式皆源自 vite 官網(wǎng)項(xiàng)目中使用的全局樣式，并稍加修改：

/**
 * Colors
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-brand: #646cff;
  --vp-c-brand-light: #747bff;
  --vp-c-brand-lighter: #9499ff;
  --vp-c-brand-lightest: #bcc0ff;
  --vp-c-brand-dark: #535bf2;
  --vp-c-brand-darker: #454ce1;
  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
  --c-brand: #646cff;
  --c-brand-light: #747bff;
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: var(--vp-c-brand-light);
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand);
  --vp-button-brand-hover-border: var(--vp-c-brand-light);
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
  --vp-button-brand-active-border: var(--vp-c-brand-light);
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    #bd34fe 30%,
    #41d1ff
  );

  --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    #bd34fe 50%,
    #47caff 50%
  );
  --vp-home-hero-image-filter: blur(40px);
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(72px);
  }
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */

:root {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

.dark {
  --vp-custom-block-tip-border: var(--vp-c-brand);
  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

/**
 * Component: Algolia
 * -------------------------------------------------------------------------- */

.DocSearch {
  --docsearch-primary-color: var(--vp-c-brand) !important;
}

/**
 * VitePress: Custom fix
 * -------------------------------------------------------------------------- */

/*
  Use lighter colors for links in dark mode for a11y.

  Also specify some classes twice to have higher specificity
  over scoped class data attribute.

*/
.dark .vp-doc a,
.dark .vp-doc a > code,
.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
.dark .link.link:hover,
.dark .link.link.active,
.dark .edit-link-button.edit-link-button,
.dark .pager-link .title {
  color: var(--vp-c-brand-lighter);
}

.dark .vp-doc a:hover,
.dark .vp-doc a > code:hover {
  color: var(--vp-c-brand-lightest);
  opacity: 1;
}
.vp-doc a {
  font-weight: normal;
}
.vp-doc p {
  margin: 0;
}
/* Transition by color instead of opacity */
.dark .vp-doc .custom-block a {
  transition: color 0.25s;
}
a:hover {
  text-decoration: none !important;
}
summary {
  font-weight: 600;
  &:hover {
    cursor: pointer;
    color: var(--vp-c-brand-lighter);
  }
}
svg {
  fill: var(--vp-c-text-1);
}
.VPNavBarTitle .title {
  transition: all 0.25s;
  &:hover {
    color: var(--vp-c-brand);
  }
}
.version-tag {
  font-size: 14px;
  line-height: 1.571;
  font-weight: bold;
  padding: 4px 6px;
  margin-left: 6px;
  background: #bd34fe;
  color: #FFF;
  border-radius: 10px;
  display: inline-block;
  vertical-align: top;
  margin-top: 4px;
}

4、引入默認(rèn)主題、全局樣式與組件庫(kù)

安裝組件庫(kù)

pnpm add vue-amazing-ui

在 theme/index.ts 中引入默認(rèn)主題、全局樣式并全局注冊(cè)組件庫(kù)

import DefaultTheme from 'vitepress/theme'
import './global.less' // global less
import VueAmazingUI from 'vue-amazing-ui'
import 'vue-amazing-ui/css'
// import VueAmazingUI from '../../../dist/vue-amazing-ui'
// import '../../../dist/style.css'

export default {
  extends: DefaultTheme, // or ...DefaultTheme
  enhanceApp ({ app }) {
    app.use(VueAmazingUI)
  }
}

5、配置網(wǎng)站

在 docs/.vitepress/config.ts 中進(jìn)行網(wǎng)站配置

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: `Vue Amazing UI`,
  description: 'Amazing UI 組件庫(kù)',
  base: '/vue-amazing-ui/',

  head: [ // 網(wǎng)站圖標(biāo)
    ['link', { rel: 'icon', type: 'image/svg+xml', href: 'logo.svg' }],
    // ['link', { rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],
  ],
  appearance: true, // 默認(rèn) true，設(shè)為 false 則無(wú)法切換dark/light主題，可選 'dark' true false
  markdown: {
    lineNumbers: false // 是否顯示行數(shù)，默認(rèn)false
  },
  themeConfig: {
    logo: '/logo.svg',

    editLink: {
      pattern: 'https://github.com/themusecatcher/vue-amazing-ui/tree/master/docs/:path',
      text: 'Suggest changes to this page',
    },
    // 默認(rèn)支持icon包括：'discord'|'facebook'|'github'|'instagram'|'linkedin'|'mastodon'|'slack'|'twitter'|'youtube'
    socialLinks: [
      { icon: 'github', link: 'https://github.com/themusecatcher/vue-amazing-ui' },
      // 自定義icon
      // {
      //   icon: {
      //     svg: 'Dribbble'
      //   },
      //   link: 'https://www.npmjs.com/package/vue-amazing-ui'
      // }
    ],

    // search: { // vitepress 內(nèi)置 search
    //   provider: 'local'
    // },

    algolia: { // algolia 搜索服務(wù) 與 內(nèi)置 search 可二選一
      appId: 'SHDNEYGA8Z',
      apiKey: '91419401b0b0efd31b610e54e5b97249',
      indexName: 'vue-amazing-ui'
    },

    footer: {
      message: 'Released under the MIT License.',
      copyright: 'Copyright ? 2023-present The Muse Catcher',
    },

    nav: [
      { text: '組件', link: '/guide/features', activeMatch: '/guide/' },
      { text: '工具', link: '/utils/started', activeMatch: '/utils/' },
      {
        text: '鏈接',
        items: [
          { text: 'My Github', link: 'https://github.com/themusecatcher' },
          { text: 'My CSDN', link: 'https://blog.csdn.net/Dandrose?type=blog' },
          {
            items: [
              {
                text: 'vue',
                link: 'https://cn.vuejs.org/',
              },
              {
                text: 'vitepress',
                link: 'https://vitepress.dev/',
              }
            ]
          }
        ]
      }
    ],

    sidebar: {
      '/guide/': [
        {
          text: '指引',
          items: [
            {
              text: '特性',
              link: '/guide/features'
            },
            {
              text: '快速上手',
              link: '/guide/started'
            }
          ]
        },
        {
          text: '組件',
          items: [
            {
              text: '面包屑 Breadcrumb',
              link: '/guide/components/breadcrumb'
            },
            {
              text: '按鈕 Button',
              link: '/guide/components/button'
            },
            {
              text: '走馬燈 Carousel',
              link: '/guide/components/carousel'
            },
            {
              text: '級(jí)聯(lián)選擇 Cascader',
              link: '/guide/components/cascader'
            },
            {
              text: '多選框 Checkbox',
              link: '/guide/components/checkbox'
            },
            {
              text: '折疊面板 Collapse',
              link: '/guide/components/collapse'
            },
            {
              text: '倒計(jì)時(shí) Countdown',
              link: '/guide/components/countdown'
            },
            {
              text: '日期選擇 DatePicker',
              link: '/guide/components/datepicker'
            },
            {
              text: '對(duì)話(huà)框 Dialog',
              link: '/guide/components/dialog'
            },
            {
              text: '分割線(xiàn) Divider',
              link: '/guide/components/divider'
            },
            {
              text: '空狀態(tài) Empty',
              link: '/guide/components/empty'
            },
            {
              text: '圖片 Image',
              link: '/guide/components/image'
            },
            {
              text: '數(shù)字輸入框 InputNumber',
              link: '/guide/components/inputnumber'
            },
            {
              text: '全局提示 Message',
              link: '/guide/components/message'
            },
            {
              text: '信息提示 Modal',
              link: '/guide/components/modal'
            },
            {
              text: '通知提醒框 Notification',
              link: '/guide/components/notification'
            },
            {
              text: '分頁(yè)器 Pagination',
              link: '/guide/components/pagination'
            },
            {
              text: '進(jìn)度條 Progress',
              link: '/guide/components/progress'
            },
            {
              text: '二維碼 QRCode',
              link: '/guide/components/qrcode'
            },
            {
              text: '單選框 Radio',
              link: '/guide/components/radio'
            },
            {
              text: '評(píng)分 Rate',
              link: '/guide/components/rate'
            },
            {
              text: '選擇器 Select',
              link: '/guide/components/select'
            },
            {
              text: '滑動(dòng)輸入條 Slider',
              link: '/guide/components/slider'
            },
            {
              text: '加載中 Spin',
              link: '/guide/components/spin'
            },
            {
              text: '步驟條 Steps',
              link: '/guide/components/steps'
            },
            {
              text: '觸摸滑動(dòng)插件 Swiper',
              link: '/guide/components/swiper'
            },
            {
              text: '開(kāi)關(guān) Switch',
              link: '/guide/components/switch'
            },
            {
              text: '表格 Table',
              link: '/guide/components/table'
            },
            {
              text: '標(biāo)簽頁(yè) Tabs',
              link: '/guide/components/tabs'
            },
            {
              text: '文字滾動(dòng) TextScroll',
              link: '/guide/components/textscroll'
            },
            {
              text: '時(shí)間軸 Timeline',
              link: '/guide/components/timeline'
            },
            {
              text: '文字提示 Tooltip',
              link: '/guide/components/tooltip'
            },
            {
              text: '上傳 Upload',
              link: '/guide/components/upload'
            },
            {
              text: '播放器 Video',
              link: '/guide/components/video'
            },
            {
              text: '瀑布流 Waterfall',
              link: '/guide/components/waterfall'
            }
          ]
        }
      ],
      '/utils/': [
        {
          text: '指引',
          items: [
            {
              text: '快速上手',
              link: '/utils/started'
            }
          ]
        },
        {
          text: '工具',
          items: [
            {
              text: 'date 日期格式化',
              link: '/utils/date-format'
            },
            {
              text: 'raf 動(dòng)畫(huà)幀',
              link: '/utils/animation-frame'
            },
            {
              text: 'raf 定時(shí)器',
              link: '/utils/raf-timeout'
            },
            {
              text: 'throttle 節(jié)流',
              link: '/utils/throttle'
            },
            {
              text: 'debounce 防抖',
              link: '/utils/debounce'
            },
            {
              text: 'add 加法',
              link: '/utils/add'
            },
            {
              text: 'downloadFile 下載文件',
              link: '/utils/download-file'
            }
          ]
        }
      ]
    }
  }
})

6、配置 Algolia 搜索

申請(qǐng)搜索服務(wù)

申請(qǐng)地址

填寫(xiě)部署到公網(wǎng)的網(wǎng)站地址、郵箱和代碼倉(cāng)庫(kù)地址，全部勾選，然后提交！

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

等待申請(qǐng)通過(guò)的郵件

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

回復(fù)郵件

I am the maintainer of the website, I can modify the code ~

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

等待回復(fù)郵件

獲取 appId、apiKey、indexName

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

配置并引入 algolia 搜索服務(wù)

在 docs/.vitepress/config.ts 中寫(xiě)入以下配置

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    algolia: {
      appId: 'SHDNEYGA8Z',
      apiKey: '91419401b0b0efd31b610e54e5b97249',
      indexName: 'vue-amazing-ui'
    }
  }
})

algolia 搜索效果如下圖：

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

網(wǎng)站整體目錄結(jié)構(gòu)如下圖：

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

網(wǎng)站首頁(yè)效果如下圖：

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

三、網(wǎng)站內(nèi)容目錄

創(chuàng)建內(nèi)容目錄文件

在 docs/ 下新建 /guide 文件夾

注意：目錄結(jié)構(gòu)需要與 docs/.vitepress/config.ts 配置文件中的 sidebar 屬性相對(duì)應(yīng)

創(chuàng)建 components/ 目錄用于存放每個(gè)組件對(duì)應(yīng)的文檔頁(yè)

創(chuàng)建 features.md 和 started.md 用與編寫(xiě)網(wǎng)站指引中的特性和快速上手頁(yè)面

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

features.md 文件：

# 特性

## 簡(jiǎn)要介紹

該組件庫(kù)采用 Vue3 + TS + Vite3 + Less 實(shí)現(xiàn)！

開(kāi)箱即用！

## 三種使用方式

- 全局引入所有組件
- 按需引入部分組件
- git clone [vue-amazing-ui](https://github.com/themusecatcher/vue-amazing-ui) 到本地后，從 packages 下單獨(dú)拷貝單文件組件 (SFC) 到項(xiàng)目?jī)?nèi)使用

started.md 文件：

# 快速上手

## 安裝

**With PNPM**

```bash
$ pnpm i vue-amazing-ui
# or
$ pnpm add vue-amazing-ui
```

**With Yarn**

```bash
$ yarn add vue-amazing-ui
```

**With NPM**

```bash
$ npm i vue-amazing-ui
```

## 使用

**Global**

```ts
import { createApp } from 'vue'
import App from './App.vue'

import VueAmazingUI from 'vue-amazing-ui'
import 'vue-amazing-ui/css'

const app = createApp(App)
app.use(VueAmazingUI)

app.mount('#app')
```

**Local**

```vue

import { Button } from 'vue-amazing-ui'
import 'vue-amazing-ui/css'

```

創(chuàng)建各個(gè)組件文檔

在 components/ 目錄下分別創(chuàng)建組件對(duì)應(yīng) md 文件

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

例如：編寫(xiě) 按鈕 button 組件文檔：

# 按鈕

## 何時(shí)使用

- 當(dāng)需要添加一個(gè)操作按鈕時(shí)

<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
function onClick (e: Event) {
  console.log('click')
}
</script>

## 基本使用

<div :class="$style['m-flex']">
  <Button @click="onClick">Default</Button>
  <Button effect="reverse" @click="onClick">Reverse</Button>
  <Button type="primary" @click="onClick">Primary</Button>
  <Button type="danger" @click="onClick">Danger</Button>
  <Button disabled @click="onClick">Disabled</Button>
</div>

::: details Show Code

```vue
<script setup lang="ts">
function onClick (e: Event) {
  console.log('click')
}
</script>
<template>
  <Button @click="onClick">Default</Button>
  <Button effect="reverse" @click="onClick">Reverse</Button>
  <Button type="primary" @click="onClick">Primary</Button>
  <Button type="danger" @click="onClick">Danger</Button>
  <Button disabled @click="onClick">Disabled</Button>
</template>

```

:::

## 大、中、小三種尺寸

<div :class="$style['m-flex']">
  <Button size="small" @click="onClick">Small</Button>
  <Button @click="onClick">Default</Button>
  <Button size="large" @click="onClick">Large</Button>
</div>

::: details Show Code

```vue
<script setup lang="ts">
function onClick (e: Event) {
  console.log('click')
}
</script>
<template>
  <Button size="small" @click="onClick">Small</Button>
  <Button @click="onClick">Default</Button>
  <Button size="large" @click="onClick">Large</Button>
</template>

```

:::

## 自定義樣式

<Button :width="120" :height="40" :border-radius="8" size="large" @click="onClick">
  <p style="font-size: 18px;">自定義樣式</p>
</Button>

::: details Show Code

```vue
<script setup lang="ts">
function onClick (e: Event) {
  console.log('click')
}
</script>
<template>
  <Button :width="120" :height="40" :border-radius="8" size="large" @click="onClick">
    <p style="font-size: 18px;">自定義樣式</p>
  </Button>
</template>

```

:::

## 加載中狀態(tài)

<div :class="$style['m-flex']">
  <Button :loading="loading" @click="onClick">Default</Button>
  <Button :loading="loading" type="primary" @click="onClick">Primary</Button>
  <Button :loading="loading" type="danger" @click="onClick">Danger</Button>
</div>
<div :class="$style['m-flex']" style="margin-top: 30px;">
  <h3 :class="$style['u-h3']">Loading state: </h3>
  <Switch v-model:checked="loading" />
</div>

::: details Show Code

```vue
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(true)
function onClick (e: Event) {
  console.log('click')
}
</script>
<template>
  <Button :loading="loading" @click="onClick">Default</Button>
  <Button :loading="loading" type="primary" @click="onClick">Primary</Button>
  <Button :loading="loading" type="danger" @click="onClick">Danger</Button>
  <h3>Loading state: <Switch v-model:checked="loading" /></h3>
</template>

```

:::

<style module>
.m-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.u-h3 {
  margin-top: 0 !important;
}
</style>

## APIs

參數(shù) | 說(shuō)明 | 類(lèi)型 | 默認(rèn)值 | 必傳
-- | -- | -- | -- | --
name | 默認(rèn)文本 | string &#124; slot | '按鈕' | false
type | 類(lèi)型 | 'default' &#124; 'primary' &#124; 'danger' | 'default' | false
effect | 懸浮變化效果，只有 type 為 default 時(shí)，effect 才生效 | 'fade' &#124; 'reverse' | ''
size | 尺寸 | 'small' &#124; 'middle' &#124; 'large' | '_self' | false
width | 寬度，優(yōu)先級(jí)高于size屬性，為0時(shí)自適應(yīng)內(nèi)容的寬度 | number | 0 | false
height | 高度，優(yōu)先級(jí)高于size屬性 | number | 0 | false
borderRadius | 圓角 | number | 5 | false
route | 跳轉(zhuǎn)目標(biāo)URL地址 | {path?: string&#44; query?: object} | {} | false
target | 如何打開(kāi)目標(biāo)URL，設(shè)置 route 時(shí)生效 | '_self' &#124; '_blank' | '_self' | false
disabled | 是否禁用 | boolean | false | false
loading | 是否加載中 | boolean | false | false
center | 是否將按鈕設(shè)置為塊級(jí)元素并居中展示 | boolean | false | false

## Events

事件名稱(chēng) | 說(shuō)明 | 參數(shù)
-- | -- | --
click | 點(diǎn)擊按鈕時(shí)的回調(diào)，未設(shè)置 route 時(shí)生效 | (e: Event) => void

四、打包靜態(tài)網(wǎng)站并部署到 GitHub

創(chuàng)建腳本目錄

在項(xiàng)目根目錄創(chuàng)建 script/ 目錄，主要用于存放各種腳本文件，方便日后自動(dòng)化開(kāi)發(fā)流程！

創(chuàng)建 deploy.sh 用于打包靜態(tài)網(wǎng)站，并部署到 Github

創(chuàng)建 publish.sh 用于打包升級(jí)組件庫(kù) ，并發(fā)布到 npm，同時(shí)自動(dòng)升級(jí)項(xiàng)目?jī)?nèi)組件庫(kù)依賴(lài)版本到最新

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

deploy.sh 文件：

# /bin/bash

# 確保腳本拋出遇到的錯(cuò)誤
set -e

# 重新打包組件庫(kù)

pnpm build

# 打包生成靜態(tài)文件
pnpm docs:build

# 進(jìn)入待發(fā)布的 dist/ 目錄
cd docs/.vitepress/dist

git init
git add .
git commit -m 'deploy'

# 部署到 https://.github.io/
git push -f git@github.com:themusecatcher/vue-amazing-ui.git master:github-pages

# 提交所有代碼到github
cd ../../../
git add .
git cm -m 'update'
git push

publish.sh 文件（需提前登錄 npm 賬戶(hù)，否則無(wú)法直接發(fā)布）：

# /bin/bash

# 確保腳本拋出遇到的錯(cuò)誤
set -e

# 讀取package.json中的version
version=`jq -r .version package.json`

# 打包構(gòu)建
pnpm build

# 發(fā)布到npm，pnpm(高性能的npm)
pnpm publish

# 升級(jí) vue-amazing-ui 依賴(lài)版本
pnpm up vue-amazing-ui@$version

# 提交版本更新代碼到github
git add .
git cm -m "update $version"
git push

在 package.json 添加指令

"scripts": {
    "docs:deploy": "sh script/deploy.sh",
    "pub": "sh script/publish.sh"
}

打包部署

pnpm docs:deploy

配置 github

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

查看網(wǎng)站

save 成功之后，點(diǎn)擊 Visit site 打開(kāi)查看網(wǎng)站：

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

查看內(nèi)容

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub 文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-486455.html

到了這里，關(guān)于使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網(wǎng)

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

一、安裝依賴(lài)及配置

1、安裝 vitepress

2、在 package.json 中添加指令

3、創(chuàng)建文檔網(wǎng)站目錄和文件

4、啟動(dòng)項(xiàng)目

二、編寫(xiě)組件庫(kù)文檔

1、創(chuàng)建相關(guān)文件及目錄

2、編寫(xiě)網(wǎng)站首頁(yè)

3、編寫(xiě)文檔全局樣式

4、引入默認(rèn)主題、全局樣式與組件庫(kù)

5、配置網(wǎng)站

6、配置 Algolia 搜索

申請(qǐng)搜索服務(wù)

等待申請(qǐng)通過(guò)的郵件

回復(fù)郵件

等待回復(fù)郵件

配置并引入 algolia 搜索服務(wù)

三、網(wǎng)站內(nèi)容目錄

創(chuàng)建內(nèi)容目錄文件

創(chuàng)建各個(gè)組件文檔

四、打包靜態(tài)網(wǎng)站并部署到 GitHub

創(chuàng)建腳本目錄

在 package.json 添加指令

打包部署

配置 github

查看網(wǎng)站

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

使用VitePress靜態(tài)網(wǎng)站生成器創(chuàng)建組件庫(kù)文檔網(wǎng)站并部署到GitHub

一、安裝依賴(lài)及配置

1、安裝 vitepress

2、在 package.json 中添加指令

3、創(chuàng)建文檔網(wǎng)站目錄和文件

4、 啟動(dòng)項(xiàng)目

二、編寫(xiě)組件庫(kù)文檔

1、創(chuàng)建相關(guān)文件及目錄

2、編寫(xiě)網(wǎng)站首頁(yè)

3、編寫(xiě)文檔全局樣式

4、引入默認(rèn)主題、全局樣式與組件庫(kù)

5、 配置網(wǎng)站

6、配置 Algolia 搜索

申請(qǐng)搜索服務(wù)

等待申請(qǐng)通過(guò)的郵件

回復(fù)郵件

等待回復(fù)郵件

配置并引入 algolia 搜索服務(wù)

三、網(wǎng)站內(nèi)容目錄

創(chuàng)建內(nèi)容目錄文件

創(chuàng)建各個(gè)組件文檔

四、打包靜態(tài)網(wǎng)站并部署到 GitHub

創(chuàng)建腳本目錄

在 package.json 添加指令

打包部署

配置 github

查看網(wǎng)站

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

1、安裝 vitepress

2、在 package.json 中添加指令

3、創(chuàng)建文檔網(wǎng)站目錄和文件

4、啟動(dòng)項(xiàng)目

二、編寫(xiě)組件庫(kù)文檔

1、創(chuàng)建相關(guān)文件及目錄

2、編寫(xiě)網(wǎng)站首頁(yè)

4、引入默認(rèn)主題、全局樣式與組件庫(kù)

5、配置網(wǎng)站

6、配置 Algolia 搜索

四、打包靜態(tài)網(wǎng)站并部署到 GitHub

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)