VuePress 开发技术文档网站，管理.md文件，生成静态网站

2024-05-19 20:18:58

目录

最终效果

开发流程

1. 新建文件夹 mydocs

2. 初始化项目

3. 安装 VuePress

4. 添加项目脚本

5. 添加 .md文件

6. 添加项目配置

7. 运行项目

参考资料

最终效果

开发流程

1. 新建文件夹 mydocs

2. 初始化项目

进入项目文件夹 mydocs，执行命令

yarn init

一直回车使用默认配置即可。

3. 安装 VuePress

yarn add -D vuepress

4. 添加项目脚本

在 package.json 中添加

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

5. 添加 .md文件

在项目目录下，新建文件夹 docs，将需要管理/展示的.md文件放入其中

重要注意事项：只有.md文件的第一个一级标题会被添加到左侧目录，其他一级标题都无效！

所以，建议所有 .md文件只在开头创建一个一级标题

其中必须要有 README.md 文件，因为默认路由 “ / ” 将展示 README.md文件（本范例写入了以下内容）

# 欢迎来到我的编程笔记世界！

6. 添加项目配置

在 docs 文件夹下新建文件夹 .vuepress ，并在 .vuepress文件夹中新建文件 config.js，写入以下内容：

module.exports = {// 左上角网站标题title: '编程笔记',themeConfig: {// 左侧目录 - 路由必须与文件名相同sidebar: ['/',  // 展示README.md'/Selenium', // 展示Selenium.md'/el-form', // 展示el-form.md],// 右上角导航 - 超链接跳转nav: [{text: 'DOS编程俱乐部', link: 'http://106.12.123.173/#/dic'},]},// 自定义根路由base: '/doc/',// markdown 展示效果的相关配置markdown: {// 显示代码行号lineNumbers: true,},// 更改默认的Webpack配置configureWebpack: {resolve: {// 配置文件路径别名alias: {'@': '/src'}}}
}

此时项目的目录结构如下：

7. 运行项目

yarn docs:dev

访问 http://localhost:8080/doc/ 可以查看到效果

参考资料

VuePress官网 https://www.vuepress.cn/guide/getting-started.html

VuePress配置 https://www.vuepress.cn/theme/default-theme-config.html#侧边栏

VuePress 开发技术文档网站，管理.md文件，生成静态网站相关推荐

pythoncad二次开发视频_revit二次开发|bim软件二次开发|revit二次开发教程|Revit二次开发技术文档...
二次开发 revit二次开发|bim软件二次开发|revit二次开发教程|Revit二次开发技术文档2019-07-08赞( 0 ) 记录一下CAD二次开发的一些简单实例. 1.helloworld ...
discuz php接口文档,Discuz二次开发技术文档
点评:Discuz二次开发基本知识总结,需要对discuz进行二次开发的朋友可以参考下. 一) Discuz!的文件系统目录注:想搞DZ开发,就得弄懂DZ中每个文件的功能. a) Admin:后台管 ...
服务器技术文件,服务端开发技术文档要包含什么？
[写在前面:为什么整理这个,因为我们很多开发写的技术文档真的是,,,所以希望日后随手提供开发一个自己需要的文档格式,培养写技术文档的能力,增进合作效率] 一.需求背景 1.需求文档链接 2.简要说明业 ...
python开发技术文档范文_程序员编写技术文档的新手指南
这是一篇帮助你给第一个项目写文档的指南. 万事开头难,我希望这份指南能把你引导到正确的道路上. 最后,你应该有一个可以公开发布的项目. 请轻松地阅读完这篇文章,或者简单地把它当作参考. 为什么要写文档 ...
软件开发技术文档_你知道，直播软件开发需要做的准备工作有哪些？
随着互联网技术的发展和智能手机的迅速普及,直播软件市场需求正在增长.那么直播平台的发展如何?在软件开发过程中应注意什么?直播软件开发需要做是准备工作有哪些? 1.直播软件开发方向: 一般而言,开发直播 ...
如何把word文档保存为.md文件
第一种--插件插件安装一直next 安装后不用运行打开想要转换的word文档,选择"另存为" 安装成功后,保存格式中会自动出现md后缀格式的选项选择.md格式,保存即可第 ...
织梦dedecms会员中心投稿,管理员审核后,文档稿件动态浏览,禁止生成静态页
后台模型管理中,会员稿件默认状态,官方默认只有三个选项.如果选择投稿后未审核,那么.后台审核后,文档会自动生成静态页.没法动态浏览.解决办法是增加一个选项.如图需要修改三个文件一是,后台模板目录中 ...
Web 开发技术文档大全
https://developer.mozilla.org/zh-CN/docs/Web 基础 HTML CSS HTTP 脚本 JavaScript Web API 事件 Web Component ...
微软html帮助文档制作,MicrosoftHTMLHelpWorkshop(CHM文件生成工具)
MicrosoftHTMLHelpWorkshop是一款文件制作工具,通过此软件能够帮助我们对CHM文件进行快速编程配置,也可快速的进行建立需要的HYML格式的文件,软件还可单独的进行运行,可快速的制 ...

最新文章

热门文章