VuePress项目搭建

参考官网：快速上手 | VuePress

vuePress热编译浏览器不自动更新问题解决

问题：本地开发模式运行Vuepress 1.x 时，浏览器不能自动更新

在 package.json 中将运行命令 由

"dev": "vuepress dev docs"

改为

"dev": "vuepress dev docs --temp .temp"

即可解决

因为届时运行 vuepress 会生成一个临时文件夹 .temp，可以在 .gitignore 中忽略掉该文件夹：

# vuepress temp file
.temp

1、本地创建好一个文件夹：algorithm-data-structure-log

 2、进入到该目录下，使用 cmd 执行命令：

yarn add -D vuepress    // 或者 npm install -D vuepress

 3、创建你的第一篇文档

同样的在cmd下进入到项目根目录，执行下面的命令：

mkdir docs && echo '# Hello VuePress' > docs/README.md

4、在 package.json 中添加一些 scripts

在package.json文件中，加入如下代码：

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

 5、启动项目

执行如下命令即可启动项目：

yarn docs:dev # npm run docs:dev

VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。效果如下：

看下目前整个项目的情况：

 6、目录结构配置

参考：目录结构 | VuePress

• docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
• docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
• docs/.vuepress/theme: 用于存放本地主题。
• docs/.vuepress/styles: 用于存放样式相关的文件。
• docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
• docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
• docs/.vuepress/public: 静态资源目录。
• docs/.vuepress/templates: 存储 HTML 模板文件。
• docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
• docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
• docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
• docs/.vuepress/enhanceApp.js: 客户端应用的增强。

注意：README.md文件名必须大写，他是一个默认的入口

7、基础配置

在下面目录下新建文件config.js，注意文件目录结构尽量保持一致

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

并且在config.js中加入如下内容：

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around'
}

运行项目，看效果：title被加上来了

8、默认主题、菜单栏的基本配置

默认主题配置

在 docs/README.md 文件中，写入如下内容：

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/  
features:
  - title: 简洁至上
    details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
  - title: Vue驱动
    details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
  - title: 高性能
    details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

actionLink: /zh/guide/  是指 “快速上手” 按钮的跳转链接

没有配置前的首页长这样：

配置以后的首页长这样：

菜单导航配置

在.vuepress/config.js中，配置如下：

module.exports = {
  title: "Hello VuePress",
  description: "Just playing around",

  themeConfig: {
    // 导航栏 Logo
    logo: "/assets/img/logo.png",

    // 通过 themeConfig.nav 增加一些头部导航栏链接
    nav: [
      { text: "Home", link: "/" },
      { text: "Guide", link: "/guide/", target: "_blank" }, // 外部链接，会另开一个浏览器标签
      { text: "External", link: "https://google.com", target: "_self", rel: "" },

      // 当你提供了一个 items 数组而不是一个单一的 link 时，它将显示为一个 下拉列表
      {
        text: "Languages",
        ariaLabel: "Language Menu",
        items: [
          { text: "Chinese", link: "/language/chinese/" },
          { text: "Japanese", link: "/language/japanese/" },
          // 可以通过嵌套的 items 来在 下拉列表 中设置分组：
          {
            text: "Group1",
            items: [
              { text: "item1", link: "/language/japanese/" },
              { text: "item2", link: "/language/japanese/" },
            ],
          },
        ],
      },
    ],

    // themeConfig.sidebar配置侧边栏
    sidebar: [
      {
        title: "Group 1", // 必要的
        path: "/foo/", // 可选的, 标题的跳转链接，应为绝对路径且必须存在
        collapsable: false, // 可选的, 默认值是 true, 设置 collapsable: false 表示永远都是展开状态。
        sidebarDepth: 1, // 可选的, 默认值是 1
        children: ["/"],
      },
      {
        title: "Group 2",
        children: [
          /* ... */
        ],
        initialOpenGroupIndex: -1, // 可选的, 默认值是 0
      },
    ],
  },
};

效果如下：

现在我们在docs下面建立一个 markdown-files 文件夹用来存放文件，

 然后再修改文件 .vuepress/config.js

// themeConfig.sidebar配置侧边栏
    sidebar: [
      {
        title: "Group 1", // 必要的
        path: "/markdown-files/about", // 可选的, 点击标题Group 1的跳转链接，默认跳转到about.md文件
        collapsable: false, // 可选的, 默认值是 true, 为 false 表示永远都是展开状态。
        sidebarDepth: 1, // 可选的, 默认值是 1
        children: ["/markdown-files/group1/about", "/markdown-files/group1/test"],
      },
      {
        title: "Group 2",
        children: ["/markdown-files/group2/about", "/markdown-files/group2/test"],
        initialOpenGroupIndex: -1, // 可选的, 默认值是 0
      },
    ]

 效果如下：

自定义首页 

参考： vuepress如何自定义首页的样式风格_zwf193071的专栏-CSDN博客_vuepress 自定义首页

至此，接下来就可以愉快的写博客了~