01. Vuepress1.x 创建自己的技术文档站

目录

一、简介

二、创建

三、配置

四、启动

五、效果图

六、编译

---

一、简介

Vuepress1.x 英文官网

Vuepress1.x 中文官网

二、安装

注意 VuePress 基于 node 8.0+，查看版本npm命令

node -v

步骤1：新建一个文件夹，如：Doc

步骤2：进入文件夹目录，新建 package.json，命令：

npm init

步骤3：安装本地依赖，默认是 1.x 版，可在此找到自己需要的

npm install vuepress

步骤4：在 package.json 中添加如下信息

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

步骤5：新建文件夹 docs，文件夹中创建 README.md，此时文件夹结构如下

Doc
├── docs
│   └── README.md
│   
├── node_modules
│      
└── package.json

步骤6：运行如下命令

npm run docs:dev

步骤7：运行访问 http://localhost:8080/，效果如下，只有一个搜索框。默认是读取 docs/README.md，但现在没内容，所以是空白。

步骤8：Ctrl + c 结束运行，然后执行命令。

npm run docs:build

步骤9：在 docs 文件夹下新建 guide 文件夹，该文件夹下存放你的 md 文档。文件夹结构如下：

Doc
├── docs
│   ├── .vuepress
│   │   │
│   │   └── dist // 编译后生成的文件夹
│   ├── guide
│   │
│   └── README.md
│   
├── node_modules
│      
└── package.json

步骤10：下图是我的文件夹目录

三、配置

在 .vuepress 文件夹下创建文件 config.js，添加如下内容

module.exports = {
     head: [// 设置 favor.ico，html/head 标题中添加 style 标签
        ['link', { rel: 'icon', href: `logo.png` }]
    ],
    title: '我的技术站', // 设置网站标题
    description: '描述：我的技术站',
    base: '/', //默认路径
    themeConfig: {// 主题设置
        nav: [{// 右上导航航条 docs/.vuepress 文件夹下
            text: '概述',
            link: '/'
        }, {
            text: 'Vue 学习笔记',
            items:[
                {text:'笔记', link: '/guide/vue/test01'}, // 可不写后缀 .md
                {text:'其它链接', link: 'https://www.baidu.com/'}// 外部链接
            ]
        }, {
            text: 'Typescript 学习笔记',
            items:[
                {text:'笔记', link: '/guide/ts/'},// 以 ‘/’结束，默认读取 README.md
                {text:'其它链接', link: 'https://www.baidu.com/'} // 外部链接
            ]
        }],
        sidebar: {//左侧列表
            '/guide/vue/': [{ // 对应导航中的link文件夹路径，注意这里是 ‘/’结束
                title: 'Vue 学习',
                collapsable: true,
                children: [{
                    title: '测试01',
                    path: 'test01'
                }, {
                    title: '测试02',
                    path: 'test02'
                }, {
                    title: '测试03',
                    path: 'test03'
                }]
            }],
            '/guide/ts/': [{
                title: 'Typescript 学习',
                collapsable: false,
                children: [{
                    title: '测试',
                    path: 'test01'
                }]
            }],
            // fallback 侧边栏被最后定义
            '/': [''], //不能放在数组第一个，否则会导致右侧栏无法使用 
        },
        // 左侧列表展开级数，默认是 1
        sidebarDepth: 6
    }
}

注意：官网提示  '/'  设置放在最后，否则会混乱。

四、启动

npm run docs:dev

默认地址为 http://localhost:8080/，默认读取 docs 文件夹下的 README.md 文件

五、效果图

docs/README.md

 docs/guide/vue/test01.md

六、编译

npm run docs:build