Vuepress简单搭建

最新推荐文章于 2024-10-09 13:44:57 发布

码农记事本

最新推荐文章于 2024-10-09 13:44:57 发布

阅读量207

点赞数 1

分类专栏：前端笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/leopast/article/details/111245068

版权

前端笔记专栏收录该内容

3 篇文章

订阅专栏

本文档详细介绍了如何使用VuePress搭建昂立课堂开放平台的API和问题答疑文档，包括VuePress的安装、配置，以及创建和组织文档结构。通过配置`config.js`文件，设置了导航栏和侧边栏，提供了清晰的目录结构，便于用户查阅开放API和问题解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装vuepress,执行npm install -D vuepress
新建文件夹：oc-openapi-docs
进入oc-openapi-docs执行npm init，一路回车，完成后会生成package.json文件
修改package.json文件，scripts加入

"dev": "vuepress dev docs",
"build": "vuepress build docs"

oc-openapi-docs中创建文件夹docs并进入
进入docs创建.vuepress和README.md
README.md内容如下：

---
home: true
heroImage: /hero.png
heroText: 昂立课堂开放平台
tagline: 昂立课堂开放平台
actionText: 开放文档 →
actionLink: /openapi/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: V1.0
---

进入vuepress创建文件config.js,内容如下：

module.exports = {
  title: '昂立课堂开放平台',
  description: '昂立课堂开放平台',
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: true // 代码块显示行号
  },
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '开放API', link: '/openapi/' },
      { text: '问题答疑', link: '/question/' }
    ],
    sidebar: {
      '/openapi/': [
        {
          title: '修订记录',
          sidebarDepth: 2,
          path: '/openapi/'
        },
        {
          title: '接入方法',
          sidebarDepth: 2,
          path: '/openapi/start'
        },
        {
          title: '帐号',
          sidebarDepth: false,
          children: [
            {
              title: '帐号创建',
              path: '/openapi/user/create'
            }
          ]
        },
        {
          title: '学生',
          sidebarDepth: false,
          children: [
            {
              title: '添加帐号为学生',
              path: '/openapi/student/add'
            },
            {
              title: '创建帐号并添加为学生',
              path: '/openapi/student/create'
            }
          ]
        }
      ]
    }
  }
};

npm run dev启动，目前应该可以访问主页

“开放API”和“问题答疑”对应菜单的文件夹上面没有列出来，下面我给出整个文件日志，方便理解

|_ oc-openapi-docs
    |_ docs
        |_ .vuepress
            |_ public
                |_ hero.png //图片
            |_ config.js //菜单配置
        |_ openapi //业务文档
            |_ student
                |_ create.md
            |_ user
                |_ add.md
                |_ create.md
            |_ start.md
            |_ README.md
        |_ README.md    //首页设置
    |_ package.json //依赖包

后面的问题自己摸索吧