vuepress 简单应用

VuePress 由两部分组成：第一部分是一个极简静态网站生成器

1.0 安装vuepress

npm install -g vuepress

2.0 初始化 package.json

npm init -y

3.0 新建文件夹 docs 并且配置package.json 添加下面两行代码

image

4.0 然后添加这几个文件

4.1 在docs文件夹下面 新建README.md

    内容如下

image

4.2 创建.vuepress 文件夹 下面创建config.js 然后创建 public 文件夹 里面放一张图片

如下图

image

4.3 运行命令

npm rundocs:dev

4.4 忘记很重要的一步了 就是写config.js

代码如下

  module.exports = {
    title:'个人主页',
    description: 'Reggie Study Notes',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
        ['link', { rel: 'manifest', href: '/manifest.json' }],
    ],
    dest: './docs/.vuepress/dist',
    ga: '',
    evergreen: true,
    themeConfig: {
        nav: [
            { text: 'Home', link: '/' },
            { text: 'Guide', link: '/guide/' },
            {
                text: 'Languages',
                items: [
                    { text: 'Chinese', link: '/language/chinese' },
                    { text: 'English', link: '/language/english' }
                ]
            },
            { text: 'External', link: 'https://www.baidu.com' },
        ],
    }
}

5.0 打开地址看到的图片就是这样了

image

6.0

在themeConfig 对象里面添加 下面代码

sidebar: [
            {
                title: 'page-1',
                collapsable: false,
                children: [
                    '/page-1/',
                    '/page-1/one/',
                    '/page-1/two/',
                ]
            },
            {
                title: 'page-a',
                children: [
                    '/page-a/',
                ]
            },
        ],

目录结构是这样的

image.png

最后再运行一下，你就看到是这样了，不聊啦，我要去做饭了。

image.png

回来了有个很重要的没讲 ，就是 代码高亮显示 请看

### js高亮
<pre><code class="javascript">
  test = {
      name : function () {
          return 'hello';
      },
      age : function () {
          return 13;
      }
  }
</code></pre>