沐鸣娱乐


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

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

        了解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的文档管理系统

        相关新闻

        联系我们
        联系我们
        分享本页
        返回顶部

          XML地图