vuepress搭建个人博客

Vuepress中文网：https://www.vuepress.cn/
Vuepress官网：https://vuepress.vuejs.org/

Vuepress 是 Vue 驱动的静态网站生成器

可以用来搭建github主页，示例：https://zhangqh22.github.io/f...

一、起步

1、安装

> npm install -g vuepress

2、创建项目

手动创建以下目录结构

├─ vuepress-test  
    ├─ docs
    ├─ ├─ README.md
    └─ package.json

README.md内容

# Hello Vuepress

package.json内容

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

3、运行项目

vuepress-test> npm run docs:dev
VuePress dev server listening at http://localhost:8080/

访问：http://localhost:8080/ 会看到Hello Vuepress

二、目录结构介绍

传送门：https://www.vuepress.cn/guide...

三、示例代码介绍

npm run docs:dev 启动服务，运行效果

目录结构（部分）

├─ QZHG
    ├─ docs
    ├─ ├─ .vuepress
    ├─ ├─ ├─ public # 公共输入目录
    ├─ ├─ ├─ ├─ images
    ├─ ├─ ├─ qzhg # 打包输出目录
    ├─ ├─ ├─ styles
    ├─ ├─ ├─ ├─ index.styl # 样式文件
    ├─ ├─ ├─ config.js # 配置文件
    ├─ ├─ ├─ enhanceApp.js # 增强应用
    ├─ ├─ en # 英文
    ├─ ├─ ├─ guide
    ├─ ├─ ├─ ├─ README.md
    ├─ ├─ guide # 引入页
    ├─ ├─ ├─ README.md
    ├─ ├─ pages # 页面
    ├─ ├─ ├─ share
    ├─ ├─ ├─ ├─ images
    ├─ ├─ ├─ ├─ data_view.md
    ├─ ├─ ├─ temp.md
    ├─ node_modules
    ├─ package.json
    └─ README.md

package.json

{
    "scripts": {
        "docs:dev": "vuepress dev docs", // npm run docs:dev 启动
        "docs:build": "vuepress build docs" // npm run docs:build 构建
    },
    "license": "ISC"
}

.vuepress/config.js

module.exports = {
    host: '0.0.0.0',
    base: '/qzhg/',
    dest: 'docs/.vuepress/qzhg',
    head: [
        ['link', { rel: 'icon', type: "image/png", href: '/images/favicon.png' }] // 头部网址图标
    ],
    locales: { // 语言配置
        '/': {
            
            lang: 'zh-CN',
            title: '前瞻后顾',
            description: '✍',
        },
        '/en/': {
            lang: 'en-US',
            title: 'qzhg',
            description: '✍',
        }
    },
    themeConfig: { // 主题配置
        locales: {
            '/': {
                selectText: '选择语言',
                label: '简体中文',
                sidebar: [
                    {
                        title: '技术',
                        collapsable: true,
                        children: [
                            '/pages/technology/browser_works',
                            '/pages/technology/browser_render',
                            '/pages/technology/reg_exp',
                            '/pages/technology/interview_question',
                            '/pages/technology/npm',
                        ]
                    },
                    {
                        title: '分享',
                        collapsable: true,
                        children: [
                            '/pages/share/xiecheng',
                            '/pages/share/data_view',
                            '/pages/share/vue_typescript',
                        ]
                    },
                    {
                        title: '待学习',
                        collapsable: true,
                        children: [
                            '/pages/using_where/collection'
                        ]
                    },
                ],
                sidebarDepth: 2,
                nav: [
                    // {text: '引导', link: '/guide/'},
                ]
            },
            '/en/': {
                selectText: 'Languages',
                label: 'English',
                sidebar: [
                    '/en/guide/',
                ],
                sidebarDepth: 2,
                nav: [
                    {text: 'guide', link: '/en/guide/'},
                ]
            }
        }
    }
}

.vuepress/enhanceApp.js（增强应用）

import './styles/index.styl'
// import './styles/palette.styl'

export default ({
    Vue,
    options,
    router,
    siteData
})=> {
    // ...
}

README.md（入口文件）

---
home: true
heroImage: /images/hero.png
actionText: Go →
actionLink: /guide/
footer: MIT Licensed | Copyright © 2018-present zhangqh22
---

vuepress开箱即用 Front Matter 配置格式
markdown语法参考： https://www.vuepress.cn/guide/markdown.html

打包

> npm run docs:build

把.vuepress/qzhg目录放到服务器上即可，这个单面应用需要后端配合处理一下

四、vuepress主题

• vuepress-theme-reco：https://vuepress-theme-reco.r...
• AntDocs：https://antdocs.seeyoz.cn/

欢迎关注：http://fenxianglu.cn/