Vue3+TS+Vite开发组件库并发布到npm网站在线预览参考文档：VitePress一、安装依赖及配置1、安装vitepress推荐使用pnpm，安装pnpm：npminstall-gpnpm安装vitepress:pnpmaddvitepress-Doryarnaddvitepress-D2、在package.json中添加指令在script中添加文档网站启动和打包指令，启动时指定端口8000，并自动打开"scripts":{"docs:dev":"vitepressdevdocs--port8000--open","docs:build":"vitepressbuilddocs"}完整
上一节我们将自己的网站发布到了gitpages上，但是现在我们需要每次更新一篇文章就重写一次目录，操作上十分的繁琐和不方便，所以我们需要一个方法去自动生成我们的侧边栏结构，方便我们每次只需要更新我们的项目即可。这里我们要知道一个点：因为VitePress应用在生成静态构建时是通过Node.js服务端渲染的，所以我们可以使用Node.js的相关函数来获取我们的目录结构，再通过目录结构来生成我们的目录获取目录结构首先我们引入node的path模块constpath=require("path");通过使用如下的函数获取指定目录下的文件结构，比如下面的例子是获取articles的other文件夹下面
网站在线预览参考文档：VitePress创建GitHub远程仓库克隆远程仓库到本地gitclonegit@github.com:themusecatcher/front-end-notes.git进入front-end-notes/目录，添加README.md并建立分支跟踪echo"#front-end-notes">>README.mdgitinitgitaddREADME.mdgitcommit-m"firstcommit"gitbranch-Mmastergitremoteaddorigingit@github.com:themusecatcher/front-end-notes.git
HomePage文章目录HomePage简单介绍HomePage的基本使用Hero部分标题部分图片部分按钮部分Features部分写在最后简单介绍HomePage页面是文档的主页面，拥有一个好看的主页可以大大吸引用户的注意力，增加自己文档网站的流量，接下来的内容就是介绍如何拥有一个好看的主页。下图这是作者自己配置的组件库的主页，大家觉得不错可以慢慢看下去，看完教程后我觉得你一定也可以拥有比这更好看的主页👍。HomePage的基本使用我们在上一节已经介绍了文档的大致目录结构，如果没看过的可以在vitepress最详细教程之开始使用的目录结构部分查看。目前效果如下：首先我们需要在index.md中
什么是VitepressVitepress是使用Vue3+Vite来快速搭建一个个人网站的工具，网站搭建者不需要掌握Vue3，Vite等的具体内容，只需要简单的配置就可以生成Vue风格的个人网站官方地址：https://vitejs.cn/vitepress/本教程希望教会大家快速搭建一个基于Vitepress的个人博客，并且实现gitpage的自动部署，项目的预览地址如下：个人博客：https://zhangshuai6.gitee.io/快速开始首先安装vitepress的依赖，没前端基础的请先安装node和yarnyarninit#然后全部敲回车就行了yarnadd--devvitepr
什么是GitPagegithubPages可以被认为是用户编写的、托管在github上的静态网页。githubpages有300M免费空间，资料自己管理，保存可靠；giteepages同理，只是它托管在国内的gitee平台实现项目自动推送到Github首先新建一个自己的项目用于存放githubpages的内容格式是自己github的id.github.io,比如我的:之后将刚刚写好的vitepress源项目推送到main分支，再创建一个master分支用于保存推送的网页回到刚刚的项目里，编写一个自动部署脚本deploy.sh，他做两件事件将项目build成一个可以发布的网页的形式将build出
每个组件库都有它们自己的文档。所以当我们开发完成我们自己的组件库必须也需要一个组件库文档。如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库。看完这篇文章你就会发现原来搭建和部署一个组件库文档是那么的简单。当然部署也不需要你有自己的服务器，你只要有github即可。由于我们的组件库还没有完成，所以下面就以element-plus作为示例来搭建一个文档吧。安装vitepress首先新建文件夹就叫kittydocs,执行pnpminit初始化，然后安装vitepresspnpmaddvitepress-D在 package.json添加一些script"scripts":{"d
每个组件库都有它们自己的文档。所以当我们开发完成我们自己的组件库必须也需要一个组件库文档。如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库。看完这篇文章你就会发现原来搭建和部署一个组件库文档是那么的简单。当然部署也不需要你有自己的服务器，你只要有github即可。由于我们的组件库还没有完成，所以下面就以element-plus作为示例来搭建一个文档吧。安装vitepress首先新建文件夹就叫kittydocs,执行pnpminit初始化，然后安装vitepresspnpmaddvitepress-D在 package.json添加一些script"scripts":{"d
上文《Vitepress搭建组件库文档（上）——基本配置》已经讨论了vitepress搭建组件库文档的基本配置，包括站点Logo、名称、首页home布局、顶部导航、左侧导航等。本文进入最重要的部分——如何像ElementPlus那样一遍代码就可以展示组件的效果和源代码。1组件Demo的实现效果vitepress对MarkDown支持比较好，同时对vue3也支持较好。常见的在MD文档中展示Demo有两种方式：在一个区块内展示，添加插件用来解析demo区块，如：组件基本使用：:::demo描述信息 测试按钮:::封装一个组件，将Demo代码的语言、路径传递给该组件，然后在MD文档中使用该组件，如：
上文《Vitepress搭建组件库文档（上）——基本配置》已经讨论了vitepress搭建组件库文档的基本配置，包括站点Logo、名称、首页home布局、顶部导航、左侧导航等。本文进入最重要的部分——如何像ElementPlus那样一遍代码就可以展示组件的效果和源代码。1组件Demo的实现效果vitepress对MarkDown支持比较好，同时对vue3也支持较好。常见的在MD文档中展示Demo有两种方式：在一个区块内展示，添加插件用来解析demo区块，如：组件基本使用：:::demo描述信息 测试按钮:::封装一个组件，将Demo代码的语言、路径传递给该组件，然后在MD文档中使用该组件，如：
