1. 云科研首页
  2. 科研百科

利用VuePress快速搭建项目文档管理系统

投稿用户 • • 科研百科 • 阅读 331

VuePress是一个由 Vue、Vue Router 和 webpack 驱动的单页应用；同时它拥有一套书写技术文档的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求，当然也可以用于别的语言项目。

了解Vue.js可以看看这篇文章，熟练者跳过此部

Vue.js快速入门就从这儿开始特别是后端程序员

特性：

  • markdown编写文档，直接转换HTML
  • 对SEO友好
  • 单页面响应快
  • 省资源
  • 获取资源方式往下看↓↓↓↓↓↓↓
  • 纯前端
  • 无需数据库

演示：

首页

利用VuePress快速搭建项目文档管理系统

左侧导航

利用VuePress快速搭建项目文档管理系统

MarkDown文档

利用VuePress快速搭建项目文档管理系统

部署：

# 将 VuePress 作为一个本地依赖安装

yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹

mkdir docs

# 新建一个 markdown 文件

echo \’# Hello VuePress!\’ > docs/README.md

接着，在 package.json 里加一些脚本:

{ \”scripts\”: { \”docs:dev\”: \”vuepress dev docs\”, \”docs:build\”: \”vuepress build docs\” }}

然后就可以开始写作了:

yarn docs:dev # 或者：npm run docs:dev

要生成静态的 HTML 文件，运行：

yarn docs:build # 或者：npm run docs:build

默认情况下，文件将会被生成在 .vuepress/dist，当然，你也可以通过 .vuepress/config.js 中的 dest 字段来修改，生成的文件可以部署到任意的静态文件服务器上

目录结构:

├─ docs│ ├─ README.md│ └─ .vuepress│ └─ config.js└─ package.json

配置：

module.exports = { title: \’文档管理\’, //项目名称 description: \’\’, themeConfig: { nav: [ //顶部菜单 { text: \’主页\’, link: \’/\’ }, { text: \’Java\’, items: [ { text: \’SpringBoot\’, link: \’/SpringBoot/\’ }, { text: \’SpringCloud\’, link: \’/SpringCloud/\’ } ] }, { text: \’关于\’, link: \’/about\’ } ], search: false,//是否开启搜索 searchMaxSuggestions: 10, sidebar: { //侧边栏菜单 \’/SpringBoot/\’: [ \’\’, \’microservices-introduction\’ ], \’/SpringCloud/\’: [ \’\’, \’distributed-lock-redis-vs-zookeeper\’, \’distributed-session\’ ], \’/\’: [ \’about\’ ] }, lastUpdated: \’Last Updated\’, }}

获取方式

关注 转发 私信“vuepress”，自动发送资源地址

另一个Vue.js SpringBoot的文档管理系统

搭建文档管理系统帮助团队构建一个信息共享文档管理的协作环境

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

赞 (0)
投稿用户投稿用户
0
上一篇 2022年11月25日 上午9:06
下一篇 2022年11月25日 上午9:20

相关推荐