快速入门

在现有vue项目中安装本地开发依赖vuepress

  1. yarn add -D vuepress # 或者:npm install -D vuepress

在现有vue项目根目录下创建docs目录

  1. mkdir docs

创建并配置文档首页内容

  1. docs目录下创建README.md文件

运行,查看效果

  1. npx vuepress dev docs

访问效果如下

可能会出现vue和vue-server-renderer版本不匹配的报错

解决方案: 显式安装和vue版本一致的vue-server-renderer

以下通过示例说明vuepress的基本使用方法

最终效果预览

示例目录结构说明

  1. 项目根目录
  2. |—— docs 项目文档目录
  3. | |—— README.md 文档首页内容
  4. | |—— .vuepress vuepress配置目录
  5. | | |—— config.js 主配置文件
  6. | | |—— nav.js 导航栏配置文件
  7. | | |—— sidebar.js 左侧栏配置文件
  8. | | |—— public 静态文件目录
  9. | | | |—— img 存放图片
  10. | | | | |—— logo.jpg logo图片
  11. | | | |—— js 存放js文件
  12. | | | | |—— main.js 自定义的js
  13. | | | |—— css 存放css文件
  14. | | | | |—— style.css 自定义的css
  15. | |—— guide
  16. | | |—— README.md 子模块guide的主页内容
  17. | | |—— sidebar.js 子模块guide的左侧栏配置文件
  18. | | |—— notes 子模块guide的文件存放目录
  19. | | | |—— one.md 文档一
  20. | | | |—— two.md 文档二
  21. | |—— help
  22. | | |—— user
  23. | | | |—— README.md
  24. | | | |—— sidebar.js
  25. | | | |—— basic
  26. | | | | |—— one.md
  27. | | | | |—— two.md
  28. | | | | |—— three.md
  29. | | | |—— senior
  30. | | | | |—— one.md
  31. | | | | |—— two.md
  32. | | | | |—— three.md
  33. | | |—— manager
  34. | | | |—— README.md
  35. | | | |—— sidebar.js
  36. | | | |—— daily
  37. | | | | |—— one.md
  38. | | | | |—— two.md
  39. | | | |—— regular
  40. | | | | |—— one.md
  41. | | | | |—— two.md

页面效果和文件对应关系说明







(Window OS)将项目文档部署到Gitee上

创建用于部署项目文档的仓库

  1. 创建过程(略)

配置script

在项目根目录创建build.bat和deploy.bat

build.bat内容:

  1. @echo off
  2. npm run docs:build

deploy.bat内容:

  1. @echo off
  2. REM 构建生成静态文件
  3. echo building...
  4. call build.bat
  5. echo building-complete
  6. REM 进入生成的文件夹
  7. cd docs/.vuepress/dist
  8. REM 如果是发布到自定义域名
  9. REM echo 'www.example.com' > CNAME
  10. git init
  11. git add -A
  12. git commit -m 'deploy'
  13. REM 如果发布到 https://gitee.com/<USERNAME>
  14. REM git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
  15. REM 如果发布到 https://gitee.com/<USERNAME>/<REPO>
  16. git push -f https://gitee.com/nicke/ni-report-blog.git master:gh-pages
  17. cd ..
  18. cd ..
  19. cd ..
  20. echo Auto-Deploy-Complete

在config.js中加入base设置

注: ni-report-blog是gitee上的仓库名

执行脚本命令deploy(完成构建,并推送到仓库的gh-pages分支上)



开启Gitee Pages服务

等待更新完毕,即可访问

vuepress+gitee 构建在线项目文档的更多相关文章

  1. spring boot / cloud (三) 集成springfox-swagger2构建在线API文档

    spring boot / cloud (三) 集成springfox-swagger2构建在线API文档 前言 不能同步更新API文档会有什么问题? 理想情况下,为所开发的服务编写接口文档,能提高与 ...

  2. 通过VuePress管理项目文档(一)

    VuePress 相关链接 完整的Vue组件代码以及完整的文档,仅适用于个人参考学习: 文档预览地址:预览链接 使用VuePress编辑文档的代码访问:组件文档 完整代码:组件代码 Vue组件开发 这 ...

  3. 使用Mkdocs构建你的项目文档

    使用Mkdocs构建你的项目文档 环境搭建 安装必需软件 作者是在windows下安装的,如果是linux或mac用户,官网有更详细的安装说明. windows 10 x64 当然还有广大的windo ...

  4. 通过VuePress管理项目文档(二)

    通过vue组件实现跟:Element相似的效果.需要在VuePress网站中将自己的项目中的Vue组件运行结果展示在页面中. 至于如何将组件在VuePress网站中展示请参考:https://segm ...

  5. Jeecg社区wiki在开放,最终能够在线看文档啦!!!

    Jeecg社区wiki在开放,最终能够在线看文档啦! .! 2014-12-18 scott JEECG jeecg开源社区wiki正式启动了.方便大家看文档 訪问地址是: http://osbaba ...

  6. 使用swagger实现web api在线接口文档

    一.前言 通常我们的项目会包含许多对外的接口,这些接口都需要文档化,标准的接口描述文档需要描述接口的地址.参数.返回值.备注等等:像我们以前的做法是写在word/excel,通常是按模块划分,例如一个 ...

  7. MkDocs项目文档生成器

    简介 安装 我的配置 Chocolatey 简介 - Windows的包管理器 官方网址 安装 注意事项 Python 简介 安装 Pip 简介-Python的包管理器 升级 MkDocs的安装 使用 ...

  8. 使用Swashbuckle构建RESTful风格文档

    本次和大家分享的是Swagger to WebApi的nuget包Swashbuckle:因为项目需要统一api文档的风格,并要支持多种开发语言(C#,java,python),所以首先想到的是swa ...

  9. WebApi生成在线API文档--Swagger

    1.前言 1.1 SwaggerUI SwaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用(官方demo).通过读取JSON 配置显示API. 项目本身仅仅也只依赖 ...

随机推荐

  1. 前端CSS学习笔记

    一 CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(超文本标记语言)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以 ...

  2. 文本编辑器之kindeditor

    摘要:最近在自己学习搭建网站的时候,突然要搭建网站的时候发现了一个好东西,那就是kindeditor这个文本编辑器,这个编辑器简单好用,而且很小,并且是开源的. 文本编辑器介绍 KindEditor ...

  3. 破解WIFI教程

    今日主题:如何破解WIFI 准备工具 笔记本一台 usb无线网卡[我用的是小米的] kali系统[可以在虚拟机里装,建议用2019年及以下版本] VMware Workstation15虚拟机安装 可 ...

  4. hdu1732 Pushbox bfs 细节比较多,需要注意

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1732/ 题目就是推箱子游戏,有三个箱子和三个洞,最终目标状态就是三个箱子到三个洞中,所以我们搜索的状态就是人的位 ...

  5. 使用IDEA操作Hbase API 报错:org.apache.hadoop.hbase.client.RetriesExhaustedException的解决方法:

     使用IDEA操作Hbase API 报错:org.apache.hadoop.hbase.client.RetriesExhaustedException的解决方法: 1.错误详情: Excepti ...

  6. 文献名:Repeat-Preserving Decoy Database for False Discovery Rate Estimation in Peptide Identication (用于肽段鉴定中错误发生率估计的能体现重复性的诱饵数据库)

    文献名:Repeat-Preserving Decoy Database for False Discovery Rate Estimation in Peptide Identication (用于 ...

  7. 深度学习框架Keras与Pytorch对比

    对于许多科学家.工程师和开发人员来说,TensorFlow是他们的第一个深度学习框架.TensorFlow 1.0于2017年2月发布,可以说,它对用户不太友好. 在过去的几年里,两个主要的深度学习库 ...

  8. 一个完整的机器学习项目在Python中演练(四)

    大家往往会选择一本数据科学相关书籍或者完成一门在线课程来学习和掌握机器学习.但是,实际情况往往d是,学完之后反而并不清楚这些技术怎样才能被用在实际的项目流程中.就像你的脑海中已经有了一块块" ...

  9. SpringCloud服务的注册发现--------Eureka

    1,什么叫做服务的注册与发现 服务的注册与发现基于注册中心,注册中心本身是一个服务,也相当于一个载体,其他服务的注册需要注册到这个注册中心上. 注册:当服务器启动的时候,会将自己的服务器信息,通过别名 ...

  10. 数据分析_numpy_基础2

    数据分析_numpy_基础2 sqrt 开方 arr = np.arange(10) arr # array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) np.sqrt(arr) ...