专栏首页陈言懒调基于VuePress快速搭建一套项目知识管理工具
原创

基于VuePress快速搭建一套项目知识管理工具

用互联网思维来看知识管理工具

阅读全文需15分钟,动手实践需30分钟,欢迎点赞收藏。

线上演示地址:http://39.106.163.86:8081/

GitHub地址:https://github.com/chenshuaikang/ShareDoc

用户背景

我是一名开发人员,经常会迷失在寻找团队内的各种开发文档中,我期望有一个网站,所有文档都集中在这个网站中,我可以进行根据目录浏览,最好能支持搜索,而且我贡献的文档别人不知道,会再跑过来问我。

用户痛点

  • 文档存放位置杂乱
  • 搜索文档困难
  • 文档没有目录
  • 文档普及度不高

工具选型

团队文档知识管理工具有很多,很多大厂出了软件专门来做知识管理,比如xx笔记企业版,这些大厂的软件必须购买企业版才能在团队内共享,且笔记很杂,不利于管理。而且根本就没有解决用户痛点。

最后选择了vuePress来做,它的好处是可以用markdown语言来做笔记,让你专注于写作,还可以将笔记提交到gitlab进行管理,还有变更记录,而且高度支持自定义主题等等。

于是我们选择了vuepress。官网链接:https://v0.vuepress.vuejs.org/zh/

官网也是用VuePress做的哦。但这个开源工具不是下载下来就可以直接用的,还有些开发工作需要做。

VuePress有以下特性(来自官网):

  1. 为技术文档而优化的 内置 Markdown 拓展
  2. 在 Markdown 文件中使用 Vue 组件的能力
  3. Vue 驱动的自定义主题系统
  4. 自动生成 Service Worker
  5. Google Analytics 集成
  6. 基于 Git 的 “最后更新时间”
  7. 多语言支持
  8. 默认主题包含: - 响应式布局 - 可选的主页 - 简洁的开箱即用的标题搜索 - Algolia 搜索 - 可自定义的导航栏 和侧边栏 - 自动生成的 GitHub 链接和页面的编辑链接搭建此工具按照官网搭建、

注意

请确保你的 Node.js 版本 >= 8

全局安装

如果你只是想尝试一下 VuePress,你可以全局安装它:

# 安装
yarn global add vuepress # 或者:npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

现有项目中使用

如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖。作为本地依赖安装让你可以使用持续集成工具,或者一些其他服务(比如 Netlify)来帮助你在每次提交代码时自动部署。

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者:npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

注意

如果你的现有项目依赖了 webpack 3.x,推荐使用 Yarn 而不是 npm 来安装 VuePress。因为在这种情形下,npm 会生成错误的依赖树。

接着,在 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 字段来修改,生成的文件可以部署到任意的静态文件服务器上。

这些步骤执行完后,只能看到搜索栏和标题,是没有菜单的,需要自己创建菜单。

使用模板demo搭建

创建菜单

上面只有搜索功能,没有菜单功能。修改config文件定义菜单,然后加上菜单对应的文件夹。

使用模板demo

我已经有一份做好的demo供大家使用,该demo的功能:展示接口文档,供第三方使用。功能如下图:

GitHub地址:https://github.com/chenshuaikang/ShareDoc

编写文档

比如想增加一个更新会员信息的接口,可以在member目录下面创建一个update.md文件

然后在config.js 文件配置菜单

编译运行

如果已经安装了node.js和npm,则在该项目的根目录执行这条命令就可以运行起来了

npm start

这条命令其实就是执行npm vuepress dev来进行实时编译

编译完成后,会提示监听8080端口,可以打开http://localhost:8080查看效果

部署到服务器

将项目打包成静态文件

npm run build

将生成的静态文件(public文件夹)上传至服务器

我是部署到ubuntu上的,需要配置nginx(也可部署Tomcat等容器中)

# nginx配置
server {
    listen       8081;
    server_name  localhost;
 
    location / {
        # 项目所在目录
        root   /home/ShareDoc/public;
        index  index.html index.htm;
        try_files $uri $uri/ =404;
    }
}

访问项目站点:

http://39.106.163.86:8081/

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何管理团队知识?快速搭建一套管理工具

    Github链接:https://github.com/Jackson0714/BirdDoc   记得点个Star

    悟空聊架构
  • 为什么人家的开源项目文档如此炫酷?原来用的是这款神器!

    VuePress是Vue驱动的静态网站生成器。对比我们的Docsify动态生成网站,对SEO更加友好。

    macrozheng
  • 手把手教你用vuepress搭建自己的网站(1)

    如果说阅读是知识的输入,那么写作就是知识的输出,输出是一个内化知识理解的过程,有些知识,一问,知道,一动手,不会,看似简单,一看就会,一做就废,凡是不被自己吸收...

    itclanCoder
  • VuePress +Gitee 快速搭建个人博客

    其实很简单就是拿来主义。首先你要知道有哪些工具可以搭建博客;然后你可通过搜索引擎搜索官方文档,动动手指就可以本地运行起来。但是运行起来的只是个 demo ,你的...

    不安分的猿人
  • 除了 GitHub,VuePress 现在可以用云开发来部署了!

    VuePress 是社区广受好评的文档插件,不少的项目都开始使用 VuePress 来构建团队的文档、产品的官网。现在,你也可以在云开发上托管你的 VuePre...

    腾讯云开发TCB
  • vuepresss建站过程中遇到的一些问题

    当你访问 /guide/而 404 时,这是由于guide目录下缺乏了它对应的 README.md文件

    itclanCoder
  • vuepress建站过程中遇到的一些问题

    当你访问 /guide/而 404 时,这是由于guide目录下缺乏了它对应的 README.md文件

    itclanCoder
  • 一看就会的保姆级教程,10分钟搭建个人博客

    相信很多人都想拥有一个自己的个人博客,现有的个人博客搭建框架已经有很多了,例如 hexo 、vuepress 、jekyll 等等,这里我选用 vuepress...

    @零一
  • 一键部署!这样搭建一个文档网站真的很简单!

    最近笔者在复习 JavaScript 基础知识,刚看完 《JavaScript 高级程序设计(第四版)》,想再找一些优秀代码库巩固一下学到的内容,自然而然的就想...

    腾讯云开发TCB
  • 19年你应该关注这50款前端热门工具(上)

    19年,又是新的一年,“前端届”,又出了哪些新的“玩意”?今天小编向你推荐目前比较热门新鲜度靠前的50款前端工具,希望在新的一年里,对你有所帮助。

    前端达人
  • 19年你应该关注这50款前端热门工具(上)

    19年,又是新的一年,“前端届”,又出了哪些新的“玩意”?今天小编向你推荐目前比较热门新鲜度靠前的50款前端工具,希望在新的一年里,对你有所帮助。

    前端达人
  • 十款值得你关注的Vue.js工具和库

    众所周知,Vue目前越来越热门,被很多开发人员采用,因此其生态也越来越完善,相关的工具和库也很丰富。这主要得益于:Vue的学习曲线,清晰的设计结构和使用文档,让...

    前端达人
  • 基于 Serverless 的 VuePress 极简静态网站

    之前用过 Docsify + Serverless Framework 快速创建个人博客系统,虽然 docsify 也是基于 Vue,然而它是完全的运行时驱动,...

    腾讯云serverless团队
  • 基于 Serverless 的 VuePress 极简静态网站

    之前用过 Docsify + Serverless Framework 快速创建个人博客系统,虽然 docsify 也是基于 Vue,然而它是完全的运行时驱动,...

    Aceyclee
  • 借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站

    因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 CMS 的帮助中心的技术选型,CMS 的帮助中心的功能:是通过文章来教用户如何使用我们的项...

    夜尽天明
  • vue开发工具有哪些,那个更合适?

    现在前端除了JavaScript外,还有react,vue,angular这三个框架在市场上用的比较多,可以说这三个框架很大程度上改变了前端的地位,相对于ang...

    北京锐智互动
  • Vue.js最佳静态站点生成器对比

    在过去的几年中,Vue.js 已成为 Web 应用程序开发的流行选项。用户变多后,这个框架开始将触角伸向了静态站点生成,一个曾经由 React 统治的领域。

    winty
  • 一键部署!这样搭建一个文档网站真的很简单!

    最近笔者在复习 JavaScript 基础知识,刚看完 《JavaScript 高级程序设计(第四版)》,想再找一些优秀代码库巩固一下学到的内容,自然而然的就想...

    程序员小强
  • VuePress搭建技术网站与个人博客

    ②. Docsify / Docute: 同样都是基于 Vue,然而它们都是完全的运行时驱动,因此对 SEO 不够友好

    前端达人

扫码关注云+社区

领取腾讯云代金券