在Vue3项目中添加Vuepress作为内嵌文档

在Vue项目中添加Vuepress作为内嵌文档

vuepress2
vuepress作为一个静态网站库，可以有效的开发网站的文档部分。我们可以在已有的vue项目中添加vuepress作为文档页面。

在你的vue项目的根目录中创建docs文件夹

mkdir docs
cd docs

初始化项目

git init
npm init -y

安装Vuepress

pnpm install -D vuepress@next

在package.json中添加脚本

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

新建文档文件夹，专门用于存放md文件

mkdir docs

添加一个新文件

echo '# Hello VuePress' > docs/README.md

启动本地服务器

pnpm docs:dev

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。

现在，你应该已经有了一个简单可用的 VuePress 文档网站。

在你的vue项目中，可以通过点击按钮跳转的方式进入文档页面：

<template>
  <button @click="goToPage">文档</button>
</template>

<script>
export default {
  methods: {
    goToPage() {
      // 直接跳转到特定端口
      window.location.href = 'http://localhost:8080；
    }
  }
}
</script>