本文已参与「新人创作礼」活动，一起开启掘金创作之路。

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

参考链接1: www.cnblogs.com/softidea/p/…. 参考链接2: www.jianshu.com/p/2ac572794…. demo代码地址：gitee.com/wk125531543…

搭建

1. 创建项目文件夹

mkdir vuepressBlogDemo

2. 全局安装 VuePress

// An highlighted block
npm install -g vuepress

3. 进入 vuepressBlogDemo 文件夹，初始化项目

npm init -y

4. 进入package.json，修改脚本内容

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

5. 修改配置文件 - config.js

module.exports = {
    title: 'Hello VuePress',
    description: 'Hello, my friend!',
    head: [
        ['link', {
            rel: 'icon',
            href: `/favicon.ico`
        }]
    ],
    dest: './docs/.vuepress/dist',
    ga: '',
    evergreen: true,
    themeConfig: {
        nav: [
          { text: 'Home', link: '/' },
          { text: 'Guide', link: '/guide/' },
          {
            text: 'Languages',
            items: [
              { text: 'Chinese', link: '/Languages/chinese/' },
              { text: 'English', link: '/Languages/english/' }
            ]
          },
          { text: 'External', link: 'https://www.baidu.com' },
        ],
        sidebarDepth: 2,
        sidebar: [
        {
            title: 'Guide',
            collapsable: false,
            children: ['/guide/']
        },{
            title: 'Languages',
            collapsable: false,
            children: [ { title: "chinese", path: "/Languages/chinese/" },'/Languages/english/']

        }        
        ]
    }
}

6. 创建文件夹和文件 在 vuepressBlogDemo 文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示：

vuepressBlogDemo
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

// An highlighted block
var foo = 'bar';