前端与后端同学都需要掌握的技术文档（或博客）搭建

DELTALOCK

2019-09-07

关注关注

当你写完一个开源项目或者一篇博客文章，是否想要有个的页面来呈现它？

如图：

前端与后端同学都需要掌握的技术文档（或博客）搭建

那我们开始吧

使用vuepress搭建

vuepress官网

安装运行

1.使用Yarn和npm，Node.js版本>=8。

npm install -g vuepress

2.创建项目目录

mkdir demo
cd demo

3.初始化项目

npm init -y

4.在 package.json 里添加:

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

5.创建文档目录与文件，结构如下：

demo
├─── docs
│   └── .vuepress   // 配置目录
│   │    ├── public // 静态资源
│   │    ├──── img
│   │    ├────── bg.ico // 图标
│   │    ├────── logo.jpg // 首页logo
│   │    └── config.js  // vuepress配置文件
│   ├── 随笔 // 随笔
│   │    ├── suibi // 一级目录 
│   │    │      ├── test.md    // 文章
│   └── README.md   // 博客首页
└── package.json

6.运行

npm run dev

7.浏览器访问：http://localhost:8080/，就可以看到效果了。
多放几张图：
前端与后端同学都需要掌握的技术文档（或博客）搭建

前端与后端同学都需要掌握的技术文档（或博客）搭建

8.还可以构建生成html：

npm run build

9.config.js文件例子

module.exports = {
    title: 'hello',
    description: '技术',
    head: [ // 注入到当前页面的 HTML <head> 中的标签
      ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache'}],
      ['meta', { 'http-quiv': 'pragma', cotent: 'no-cache,must-revalidate'}],
      ['meta', { 'http-quiv': 'expires', cotent: '0'}]
    ],
    serviceWorker: true, // 是否开启 PWA
    base: '/', // 部署到github相关的配置
    markdown: {
      lineNumbers: true // 代码块是否显示行号
    },
    themeConfig: {
        lastUpdated: '更新于',
        sidebarDepth: 3,
        displayAllHeaders: true,
        nav: [
            { text: '导航', link: 'http://www.kaka996.com' },
            {
              text: 'dnnmmp',
              items: [
                {
                  text: 'dnnmmp集成环境',
                  items: [
                    { text: '介绍', link: '/dnnmmp_introduce/' },
                    { text: '安装', link: '/dnnmmp_install/' },
                    { text: '命令行使用', link: '/dnnmmp_command/' },
                    { text: '日志', link: '/dnnmmp_log/' },
                    { text: '附录', link: '/dnnmmp_appendix/' },
                  ]
                }
              ]
            },
            {
              text: '了解更多',
              items: [
                { text: '个人信息', link: '/pages_about/' },
              ]
            }
          ],
        sidebar:{
            '/dnnmmp/': [
                {
                    title: '介绍',
                    collapsable: false,
                    children: [
                    'introduce/介绍',
                    ]
                },
                {
                    title: '安装',
                    collapsable: false,
                    children: [
                        'install/一键安装',
                        'install/单独安装PHP',
                        'install/单独安装Nodejs',
                        'install/单独安装Mongodb',
                        'install/单独安装Mysql',
                        'install/单独安装Nginx',
                        'install/单独安装Redis',
                        //'install/单独安装go',
                    ]
                },
                {
                title: '命令行使用',
                collapsable: false,
                children: [
                    'command/命令行使用',
                ]
                },
                {
                title: '日志',
                collapsable: false,
                children: [
                    'log/日志',
                ]
                },
                {
                title: '附录',
                collapsable: false,
                children: [
                    'appendix/附录',
                ]
                }
            ]
        },
    }
  };

10.浏览作者的网站效果：
http://blog.kaka996.com/

技术文档