作者：MichaelThiessen译者：前端小智来源：新闻点赞再看，微信搜索【大千世界】，B站关注【前端小智】这个没有后台a大厂，但有上升趋势积极向上的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近有人问：小智，Vue3有没有对应的制作文档的工具。于是，查阅了一些资料，发现Vue3和新的Vite构建工具为我们提供了另一种快速开发静态站点的方式，那就是Vitepress。今天，我们就来看看如何使用Vitepress快速创建Vue应用的文档。以下是我们最终的结果：在开始之前，让我们先看看Vitepress是什么。什么是Vitepress？Vitepress是一个基于Vite构建的Vue静态站点生成器。Vitepress被称为“Vuepress的小弟”，相比同类产品有一些优势。基于Vite而不是Webpack构建，因此启动时间、热重载等这些年来变得越来越复杂。虽然Vitepress并不打算完全取代Vuepress作为Vue的静态站点生成器，但它提供了一个轻量级的替代方案。对于大多数项目，例如文档和简单的站点，Vitepress的特殊性和简单性将使开发变得轻而易举。创建一个Vitepress项目首先，创建一个目录。mkdirvite-hello-worldcdvite-hello-world然后，初始化包并安装Vitepress。npminitnpmi--save-devvitepress接下来，向package.json添加一些命令。//package.json"scripts":{"docs:dev":"vitepressdevdocs","docs:build":"vitepressbuilddocs","docs:serve":"vitepressservedocs"}，整理以上内容最后，创建一个docs文件夹来制作我们的第一个markdown文件。mkdirdocsecho'#HelloWorld'>docs/index.md最后，试一试。npmrundocs:dev~~~~我们的网站已经创建好了，在浏览器中打开http://localhost:3000，你会在网页上看到我们的markdown文件！看到这里，鸡有点冻僵了，看看能不能定制我们想要的。VitepressNavigationVitepress添加多个页面就像创建更多降价文件一样简单。让我们在docs/中创建更多文件，如下所示：当Vitepress创建SPA导航时，它会使用每个markdown文件的路径来创建路由。另外，任何文件夹中名为index.md的文件只能通过/引用。例如，我们的文件结构转化为如下路由：//docs/index.md##Routing->/[docs/contact.md](/contact)->/contact[about/index.md](/about/)->/about/[about/our-story.md](/about/our-story)->/about/our-story在我们的md文件中，有三一种跳转到路由的方式我们可以使用基础URL，添加.md或.html-所有这些都会正确链接到相应的组件。###所有这些选项都有效！[docs/contact](/contact)|[docs/contact.md](/contact.md)|[docs/contact.html](/contact.html)添加导航栏和侧边栏Vitepress为我们提供了一个很棒的默认主题。它体积小，但功能强大且易于定制。首先，我们将通过侧边栏和导航栏向我们的站点添加一些导航。为此，我们需要创建一个配置文件——我们可以在/docs/.vitepress/文件夹中执行此操作，该文件夹将存放我们的Vitepress特定文件，称为./vitepress/config.js，只需导出一个JS对象。//.vitepress/config.jsmodule.exports={title:'VitepressTutorial',//appendedtoallpagetitles}在这个对象中，我们添加了另一个themeConfig属性//.vitepress/config.jsmodule.exports={title:"VitepressTutorial",//附加到所有页面标题themeConfig:{nav:[],sidebar:[],},};向导航栏添加元素，我们只需要将对象添加到导航数组中，格式为{text:'ANCHOR-TEXT',link:'PATH'}://.vitepress/config.jsmodule.exports={title:"VitepressTutorial",//附加到所有页面标题themeConfig:{nav:[{text:"Home",link:"/"},{text:"About",link:"/about/"},{text:"Contact",link:"/contact"},],侧边栏:[{text:'OurStory',link:'/about/our-story'}],},};添加侧边栏的方法相同。//.vitepress/config.jsmodule.exports={title:"VitepressTutorial",//附加到所有页面标题themeConfig:{nav:[{text:"Home",link:"/"},{text:"关于”，链接：“/about/”}，{文本：“联系”，链接：“/联系”}，]，边栏：[{文本：'我们的故事'，链接：'/关于/我们的故事'}],},};回到我们的浏览器，我们现在可以看到Vitepress仅通过几行配置就生成了一个非常漂亮的导航栏和侧边栏。我们可以用Vitepress的侧边栏做的一件很酷的事情是根据我们所在的页面更改侧边栏。比如我们想让首页显示标题，其他页面显示我们刚做的侧边栏。我们要做的第一件事是创建一个变量来存储我们的故事边栏。//.vitepress/config.jsconstprimarySidebar=[{text:'OurStory',link:'/about/our-story'}]回到我们的themeConfig对象，我们想将侧边栏更改为一个对象，其中属性名是路径，值是侧边栏数组。sidebar:{'/about/':primarySidebar,///about/子目录中的所有内容'/contact':primarySidebar,//联系页面}现在，在您的浏览器中查看，您将看到我们的主页侧边栏和所有其他侧边栏不同。Vitepress中的内置元素Vitepress支持多种元素，我们可以直接在config.js或Markdown中声明这些元素。这里只介绍一些最常用的内容，完整的内容可以在这里找到。代码块代码示例在编写好的文档时至关重要。Vitepress提供了一种快速添加代码块和指定正在使用的编程语言的方法。Vitepress中Github样式表中的表格，对于没接触过md的人来说可能会觉得有点陌生，如下图：//.vitepress/config.js|标题|是|居中||------------|:------------:|-----：||左对齐|居中|右对齐||斑马条纹|行|easy|MarkdownFrontmatter配置虽然我们可以使用./vuepress/config.js来配置网站，但是有时候我们还是需要对每个页面进行更精细的控制。幸运的是，我们可以使用markdown文件顶部的YAML块来控制每个页面。Vitepress通过用三个破折号(---)包围它来声明该块。//docs/contact---title:Contact---#Contact我们可以在这里配置很多不同的东西。查看所有Frontmatter选项的文档。部署Vitepress应用程序我们使用npmrundocs:dev来创建本地环境，但是如何构建用于生产的应用程序呢？您可以使用以下命令来构建：npmrundev:build默认情况下，构建的文件将放在/docs/.vuepress/dist下。~完了，洗碗吧，下次见！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://learn.co/2021/01/writ...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博文早一两篇），本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，本人整理我的很多文件。欢迎加星和改进。可以参考考点面试。也关注公众号，后台回复福利就能看到福利，你懂的。
