VuePress搭建静态网站

如果不喜欢VuePress风格的，可以试一下 docsify： https://www.jianshu.com/p/4883e95aa903

---

注意：使用VuePress前请确保你的 Node.js 版本 >= 8。

一、安装（启动服务）

1. 全局安装

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 创建项目目录
mkdir vuepress-starter && cd vuepress-starter

# 在docs文件夹下新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

2. 现有项目中使用

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 开始写作
npx vuepress dev docs

3. 在vuepress项目文件夹下的 package.json 里加一些脚本:

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

4. 开发与打包

然后就可以开始写作了:

yarn docs:dev # 或者：npm run docs:dev

要生成静态的 HTML 文件，运行：

yarn docs:build # 或者：npm run docs:build

默认情况下，文件将会被生成在 .vuepress/dist，当然，你也可以通过 .vuepress/config.js 中的 dest 字段来修改，生成的文件可以部署到任意的静态文件服务器上

最后，看一下最简单的目录结构：

二、配置首页  docs/README.md  ==> 默认访问的首页就是这个页面

参考官网：https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E9%A6%96%E9%A1%B5

配置详情：

---
home: true
heroImage: /img/logo.png
actionText: 开始学习 →
actionLink: /vue/
features:
- title: Wiki - 夯实基础
  details: 基于JavaScript对工作用常用知识点和重要知识点进行整理，记录，归档，以便时时学习。温故而知新...
- title: Store - 技术更新
  details: 针对时下主流技术，结合自身学习掌握，总结整理，多种方式记录。吾将上下而求索...
- title: Thought - 随笔、面试
  details: 总结工作中遇到的问题，引以为戒；记录常见、经典、有意思的面试题，掌握学习方向与公司要求；鱼与熊掌我要兼得...
footer: MIT Licensed | Copyright © 2019-12 By halo1416
---

 

三、配置导航栏

参考官网： https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F

在docs目录下，新建目录 .vuepress （主要必须有. ）; 并新建配置文件 config.js

配置详情：

module.exports = {
    ... 
    themeConfig: {
        // 配置顶部导航栏
        nav: [
            { text: 'home', link: '/' },
            { text: 'JavaScript', link: '/javaScript/' },
            { text: 'vue技术栈', link: '/vue/' },
            { text: 'react技术栈', link: '/react/' },
            { text: 'webpack', link: '/webpack/' },
            { text: '组件封装', link: '/moduleComponents/' },
            // { text: '面试题', link: '/interview/' },
            {       //下拉导航栏
                text: '面试/随笔',
                ariaLabel: '面试/随笔 Menu',
                items: [
                  { text: '面试题', link: '/recordSelf/interview/' },
                  { text: '随笔', link: '/recordSelf/problem/' }
                ]
            }
        ],

        ...
    }    
}

四、配置侧边栏 config.js

参考官网： https://vuepress.vuejs.org/zh/theme/default-theme-config.html#%E5%AF%BC%E8%88%AA%E6%A0%8F

module.exports = {
    ... 
    themeConfig: {
        // 配置每个菜单对应的侧边栏
        sidebar: {
            // '/webpack/': [               //自动生成侧边栏菜单名称
            //     '',     /* /webpack/ */
            //     'base',  /* /webpack/base.html */
            // ],
            '/webpack/': [               //自定义菜单栏菜单名称  ==>> webpack菜单下的侧边栏
                ['/webpack/','介绍'],           //一级菜单
                {title: '基本配置',              //多级菜单
                    children: [
                        // ['',''] //=>[路径,标题]
                        ['基础1','单入口单出口'],  // '/webpack/base.md'文件
                    ]
                },  
            ],
            '/moduleComponents/': [             // moduleComponents菜单下的侧边栏
                ['/moduleComponents/table','表格封装'],           //一级菜单
            ]
        },

        ...
    }    
}

完整的 config.js 配置：

module.exports = {
    title: '个人前端知识积累',
    description: '前端路漫漫，不知终点，不断记录，慢慢积累',
    head: [
        // 增加一个自定义的 favicon(网页标签的图标)
        // 这里的 '/' 指向 docs/.vuepress/public 文件目录 
        // 即 docs/.vuepress/public/img/favicon.ico
        ['link', { rel: 'icon', href: '/favicon.ico' }]
    ],
    themeConfig: {
        // 配置顶部导航栏
        nav: [
            { text: 'home', link: '/' },
            { text: 'JavaScript', link: '/javaScript/' },
            { text: 'vue技术栈', link: '/vue/' },
            { text: 'react技术栈', link: '/react/' },
            { text: 'webpack', link: '/webpack/' },
            { text: '组件封装', link: '/moduleComponents/' },
            // { text: '面试题', link: '/interview/' },
            {       //下拉导航栏
                text: '面试/随笔',
                ariaLabel: '面试/随笔 Menu',
                items: [
                  { text: '面试题', link: '/recordSelf/interview/' },
                  { text: '随笔', link: '/recordSelf/problem/' }
                ]
            }
        ],

        // 配置每个菜单对应的侧边栏
        sidebar: {
            // '/webpack/': [               //自动生成侧边栏菜单名称
            //     '',     /* /webpack/ */
            //     'base',  /* /webpack/base.html */
            // ],
            '/webpack/': [               //自定义菜单栏菜单名称  ==>> webpack菜单下的侧边栏
                ['/webpack/','介绍'],           //一级菜单
                {title: '基本配置',              //多级菜单
                    children: [
                        // ['',''] //=>[路径,标题]
                        ['基础1','单入口单出口'],  // '/webpack/base.md'文件
                    ]
                },  
            ],
            '/moduleComponents/': [             // moduleComponents菜单下的侧边栏
                ['/moduleComponents/table','表格封装'],           //一级菜单
            ]
        },
        // sidebarDepth: 2,
        // displayAllHeaders: true,
    }    
}

对应的目录结构：

官网文档： https://vuepress.vuejs.org/zh/guide/

参考博客：https://segmentfault.com/a/1190000017890986

                  https://segmentfault.com/a/1190000017953711?utm_source=tag-newest

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

对博客文章的参考，若原文章博主介意，请联系删除！请原谅