使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub

简介: 本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。

网站在线预览

参考文档:

一、安装依赖及配置

1、安装 vitepress

推荐使用 pnpm,安装pnpm:

npm install -g pnpm

安装vitepress:

pnpm add vitepress -D or yarn add vitepress -D

2、在 package.json 中添加指令

在 script 中添加文档网站启动和打包指令,启动时指定端口 8000,并自动打开

"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、创建文档网站目录和文件

  • 创建 docs/ 目录
  • docs/ 下新建 index.md 首页文件
  • docs/ 下新建 public/ 文件夹(用于存放各种静态资源,例如:网站logo、首页图片等

4、 启动项目

启动后项目会在自动 /docs 下生成 .vitepress/ 目录

pnpm docs:dev

二、编写组件库文档

1、创建相关文件及目录

在 docs/.vitepress 中

  • 创建 config.ts 配置文件
  • 创建 theme/ 文件夹
  • theme/ 中创建 index.ts 文件
  • theme/ 中创建 global.less 存放全局样式(使用 less 文件需要安装相应依赖 )
  • 创建 utils/ 文件夹(用于存放自定义 ts 方法,一会首页自定义显示版本标签会用到)
  • (文档内使用了 less)安装 less 预处理器: 相关文档

pnpm add less -D

2、编写网站首页

首页配置参考文档

在 docs/index.md 中编写首页相关内容,其中 fetchVersion() 自定义方法用于在首页 tagline 后添加自定义版本标签

---
layout: home

title: Vue Amazing UI
titleTemplate: Amazing UI Components Library

hero:
  name: Vue Amazing UI
  text: Amazing UI 组件库
  tagline: 基于 Vue3 + TS + Vite 开发
  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/ 中创建 fetchVersion.ts 文件

// 远程读取 github 仓库中 package.json 文件中的 version 版本号
// 方式一:
  // 读取规则: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}',
  //   }
  // })
  // 方式二:
  // 读取规则: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 中写入标签样式

.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;
}

效果如下图,版本标签:0.0.30

3、编写文档全局样式

theme/global.less 中写入样式,以下样式皆源自 vite 官网项目中使用的全局样式,并稍加修改:

/**
 * 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、引入默认主题、全局样式与组件库

安装组件库

pnpm add vue-amazing-ui

theme/index.ts 中引入默认主题、全局样式并全局注册组件库

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、 配置网站

docs/.vitepress/config.ts 中进行网站配置

import { defineConfig } from 'vitepress'

export default defineConfig({
  title: `Vue Amazing UI`,
  description: 'Amazing UI 组件库',
  base: '/vue-amazing-ui/',

  head: [ // 网站图标
    ['link', { rel: 'icon', type: 'image/svg+xml', href: 'logo.svg' }],
    // ['link', { rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],
  ],
  appearance: true, // 默认 true,设为 false 则无法切换dark/light主题,可选 'dark' true false
  markdown: {
    lineNumbers: false // 是否显示行数,默认false
  },
  themeConfig: {
    logo: '/logo.svg',

    editLink: {
      pattern: 'https://github.com/themusecatcher/vue-amazing-ui/tree/master/docs/:path',
      text: 'Suggest changes to this page',
    },
    // 默认支持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 内置 search
    //   provider: 'local'
    // },

    algolia: { // algolia 搜索服务 与 内置 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: '级联选择 Cascader',
              link: '/guide/components/cascader'
            },
            {
              text: '多选框 Checkbox',
              link: '/guide/components/checkbox'
            },
            {
              text: '折叠面板 Collapse',
              link: '/guide/components/collapse'
            },
            {
              text: '倒计时 Countdown',
              link: '/guide/components/countdown'
            },
            {
              text: '日期选择 DatePicker',
              link: '/guide/components/datepicker'
            },
            {
              text: '对话框 Dialog',
              link: '/guide/components/dialog'
            },
            {
              text: '分割线 Divider',
              link: '/guide/components/divider'
            },
            {
              text: '空状态 Empty',
              link: '/guide/components/empty'
            },
            {
              text: '图片 Image',
              link: '/guide/components/image'
            },
            {
              text: '数字输入框 InputNumber',
              link: '/guide/components/inputnumber'
            },
            {
              text: '全局提示 Message',
              link: '/guide/components/message'
            },
            {
              text: '信息提示 Modal',
              link: '/guide/components/modal'
            },
            {
              text: '通知提醒框 Notification',
              link: '/guide/components/notification'
            },
            {
              text: '分页器 Pagination',
              link: '/guide/components/pagination'
            },
            {
              text: '进度条 Progress',
              link: '/guide/components/progress'
            },
            {
              text: '二维码 QRCode',
              link: '/guide/components/qrcode'
            },
            {
              text: '单选框 Radio',
              link: '/guide/components/radio'
            },
            {
              text: '评分 Rate',
              link: '/guide/components/rate'
            },
            {
              text: '选择器 Select',
              link: '/guide/components/select'
            },
            {
              text: '滑动输入条 Slider',
              link: '/guide/components/slider'
            },
            {
              text: '加载中 Spin',
              link: '/guide/components/spin'
            },
            {
              text: '步骤条 Steps',
              link: '/guide/components/steps'
            },
            {
              text: '触摸滑动插件 Swiper',
              link: '/guide/components/swiper'
            },
            {
              text: '开关 Switch',
              link: '/guide/components/switch'
            },
            {
              text: '表格 Table',
              link: '/guide/components/table'
            },
            {
              text: '标签页 Tabs',
              link: '/guide/components/tabs'
            },
            {
              text: '文字滚动 TextScroll',
              link: '/guide/components/textscroll'
            },
            {
              text: '时间轴 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 动画帧',
              link: '/utils/animation-frame'
            },
            {
              text: 'raf 定时器',
              link: '/utils/raf-timeout'
            },
            {
              text: 'throttle 节流',
              link: '/utils/throttle'
            },
            {
              text: 'debounce 防抖',
              link: '/utils/debounce'
            },
            {
              text: 'add 加法',
              link: '/utils/add'
            },
            {
              text: 'downloadFile 下载文件',
              link: '/utils/download-file'
            }
          ]
        }
      ]
    }
  }
})

6、配置 Algolia 搜索

申请搜索服务

申请地址

填写部署到公网的网站地址、邮箱和代码仓库地址,全部勾选,然后提交!

等待申请通过的邮件

回复邮件

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

等待回复邮件

获取 appIdapiKeyindexName

配置并引入 algolia 搜索服务

docs/.vitepress/config.ts 中写入以下配置

import { defineConfig } from 'vitepress'

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

algolia 搜索效果如下图:

网站整体目录结构如下图:

网站首页效果如下图:

三、网站内容目录

创建内容目录文件

docs/ 下新建 /guide 文件夹

注意:目录结构需要与 docs/.vitepress/config.ts 配置文件中的 sidebar 属性相对应

创建 components/ 目录用于存放每个组件对应的文档页

创建 features.mdstarted.md 用与编写网站指引中的 特性 和 快速上手页面

features.md 文件:

# 特性

## 简要介绍

该组件库采用 Vue3 + TS + Vite3 + Less 实现!

开箱即用!

## 三种使用方式

- 全局引入所有组件
- 按需引入部分组件
- git clone [vue-amazing-ui](https://github.com/themusecatcher/vue-amazing-ui) 到本地后,从 packages 下单独拷贝单文件组件 (SFC) 到项目内使用

started.md 文件:

# 快速上手

## 安装

**With PNPM**

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

With Yarn

$ yarn add vue-amazing-ui

With NPM

$ npm i vue-amazing-ui

使用

Global

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


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

### [](https://blog.csdn.net/Dandrose/article/details/131107730?spm=1001.2014.3001.5502)创建各个组件文档

> 在 `components/` 目录下分别创建组件对应 `md` 文件

![31959ea7206442d0872c5328c23cc493.png](https://i-blog.csdnimg.cn/blog_migrate/b3e91b1a6f18bf12ca4ea18e41adf9eb.png)

> 例如:编写 `按钮 button` 组件文档:

按钮

何时使用

  • 当需要添加一个操作按钮时

基本使用







::: details Show Code

<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>

:::

大、中、小三种尺寸





::: details Show Code

<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>

:::

自定义样式

::: details Show Code

<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>

:::

加载中状态







Loading state:



::: details Show Code

<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>

:::

APIs

参数 说明 类型 默认值 必传
name 默认文本 string | slot '按钮' false
type 类型 'default' | 'primary' | 'danger' 'default' false
effect 悬浮变化效果,只有 type 为 default 时,effect 才生效 'fade' | 'reverse' ''
size 尺寸 'small' | 'middle' | 'large' '_self' false
width 宽度,优先级高于size属性,为0时自适应内容的宽度 number 0 false
height 高度,优先级高于size属性 number 0 false
borderRadius 圆角 number 5 false
route 跳转目标URL地址 {path?: string, query?: object} {} false
target 如何打开目标URL,设置 route 时生效 '_self' | '_blank' '_self' false
disabled 是否禁用 boolean false false
loading 是否加载中 boolean false false
center 是否将按钮设置为块级元素并居中展示 boolean false false

Events

事件名称 说明 参数
click 点击按钮时的回调,未设置 route 时生效 (e: Event) => void

[](https://blog.csdn.net/Dandrose/article/details/131107730?spm=1001.2014.3001.5502)四、打包静态网站并部署到 GitHub
-------------------------------------------------------------------------------------------------------

### [](https://blog.csdn.net/Dandrose/article/details/131107730?spm=1001.2014.3001.5502)创建脚本目录

> **在项目根目录 创建 `script/` 目录,主要用于存放各种脚本文件,方便日后自动化开发流程!**

> 创建 `deploy.sh` 用于打包静态网站,并部署到 Github

> 创建 `publish.sh` 用于打包升级组件库 ,并发布到 npm,同时自动升级项目内组件库依赖版本到最新

![493f80e2b1d44120b3def142e24cdab6.png](https://i-blog.csdnimg.cn/blog_migrate/a227f5fd281fd394ff2bda48de9e3f27.png)

**`deploy.sh` 文件:**

/bin/bash

确保脚本抛出遇到的错误

set -e

重新打包组件库

pnpm build

打包生成静态文件

pnpm docs:build

进入待发布的 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 账户,否则无法直接发布):**

/bin/bash

确保脚本抛出遇到的错误

set -e

读取package.json中的version

version=jq -r .version package.json

打包构建

pnpm build

发布到npm,pnpm(高性能的npm)

pnpm publish

升级 vue-amazing-ui 依赖版本

pnpm up vue-amazing-ui@$version

提交版本更新代码到github

git add .
git cm -m "update $version"
git push


### [](https://blog.csdn.net/Dandrose/article/details/131107730?spm=1001.2014.3001.5502)在 package.json 添加指令

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


### [](https://blog.csdn.net/Dandrose/article/details/131107730?spm=1001.2014.3001.5502)打包部署

pnpm docs:deploy

```

配置 github

查看网站

save 成功之后,点击 Visit site 打开查看网站:

查看内容

image.png

相关文章
|
29天前
|
存储 Linux 数据安全/隐私保护
一键部署 200+ 开源Github 2k+ 星星的软件
Websoft9面板是一款基于Web的PaaS/Linux面板,支持在个人服务器上一键部署200多种热门开源应用,适用于个人开发者、中小企业、创业团队、教育机构和技术爱好者。它集成了丰富的开源软件,提供便捷的部署方式、高效的资源利用、良好的可扩展性及低技术门槛,帮助用户快速搭建和管理各类应用。
|
3月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
4月前
|
搜索推荐 前端开发
使用VitePress创建个人网站并部署到GitHub
该网站使用 VitePress 构建,记录了前端开发相关的笔记和教程,涵盖 Vue2 和 Vue3 等内容。网站支持暗黑模式和 Algolia 搜索服务,提供了详细的导航和侧边栏配置。通过自动化脚本进行部署,托管于 GitHub Pages。
使用VitePress创建个人网站并部署到GitHub
|
4月前
|
JavaScript 搜索推荐 资源调度
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文详细介绍了如何使用 Vue3、TypeScript 和 Vite 开发并发布一个名为 Vue Amazing UI 的组件库至 npm。文章首先引导读者安装配置 VitePress,创建文档网站,并编写组件库文档。接着,通过一系列配置实现网站主题定制、全局样式设置以及 Algolia 搜索功能集成。最后,文章提供了自动化脚本,帮助开发者一键打包部署静态网站至 GitHub,并发布组件库到 npm。通过这些步骤,读者可以轻松搭建并维护一个美观且功能齐全的组件库文档网站。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
4月前
|
开发者 存储 API
Xamarin 开发者的社区资源概览:从官方文档到GitHub示例,全面探索提升开发技能与解决问题的多元化渠道与实用工具
【8月更文挑战第31天】Xamarin 开发者社区资源概览旨在提升开发效率与解决问题,涵盖官方文档、社区论坛、GitHub 项目等。官方文档详尽,涵盖 Xamarin.Forms 使用、性能优化等;社区论坛供交流心得;GitHub 提供示例代码。此外,第三方博客、视频教程及 Xamarin University 等资源也丰富多样,适合各阶段开发者学习与提升。通过综合利用这些资源,开发者可不断进步,应对技术挑战。
54 0
|
4月前
|
Linux C++ Docker
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
|
2月前
|
编解码 Oracle Java
java9到java17的新特性学习--github新项目
本文宣布了一个名为"JavaLearnNote"的新GitHub项目,该项目旨在帮助Java开发者深入理解和掌握从Java 9到Java 17的每个版本的关键新特性,并通过实战演示、社区支持和持续更新来促进学习。
90 3
|
4月前
|
存储 安全 Java
【事故】记一次意外把公司项目放到GitHub并被fork,如何使用DMCA下架政策保障隐私
在一次意外中,作者因三年前将测试代码遗忘在GitHub上而遭遇了代码被他人fork的问题。为解决这一危机,作者详细介绍了如何通过GitHub的DMCA下架通知流程安全删除敏感代码,包括处理私人信息和商标侵权的具体步骤。本文不仅提供了实用的操作指南,还强调了及时响应的重要性,帮助读者避免类似风险
62 1
【事故】记一次意外把公司项目放到GitHub并被fork,如何使用DMCA下架政策保障隐私
|
4月前
|
SQL JavaScript 前端开发
Github 2024-08-05 开源项目周报 Top15
根据 Github Trendings 的统计,本周(2024年8月5日统计)共有15个项目上榜。以下是根据开发语言汇总的项目数量: - Go 项目:4个 - JavaScript 项目:3个 - Python 项目:3个 - Java 项目:2个 - TypeScript 项目:2个 - C 项目:1个 - Shell 项目:1个 - Dockerfile 项目:1个 - 非开发语言项目:1个
139 2
|
4月前
|
人工智能 Rust JavaScript
Github 2024-08-26 开源项目周报Top15
根据Github Trendings的统计,本周共有15个项目上榜。以下是按开发语言汇总的项目数量:Python项目8个,TypeScript、C++ 和 Rust 项目各2个,Jupyter Notebook、Shell、Swift 和 Dart 项目各1个。其中,RustDesk 是一款用 Rust 编写的开源远程桌面软件,可作为 TeamViewer 的替代品;Whisper 是一个通用的语音识别模型,基于大规模音频数据集训练而成;初学者的生成式人工智能(第2版)则是由微软提供的18门课程,教授构建生成式AI应用所需的知识。
142 1