使用VuePress搭建个人博客笔记

该文章是我的博客网站搭建笔记，学习视频地址为1小时带你搭建vuepress高大上个人博客（极速上手版）

VuePress的介绍

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

搭建博客的基本工具

1. node.js以及npm包管理工具： https://nodejs.org/en/
2. git工具：https://git-scm.com/downloads
3. 使用git bash执行命令

初始搭建一个 VuePress 文档

前提：使用VuePress需要安装Node.js>=8.6
安装好之后点击电脑屏幕左下方的window窗口（或点击Win键），在最近添加中找到node.js command prompt，点击进入node.js command prompt 命令窗口
搭建步骤如下（如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始）：

1. 创建并进入一个新目录
该目录作为整个网站的项目目录

mkdir vuepress-starter && cd vuepress-starter

2. 使用你喜欢的包管理器进行初始化
(#后的内容为注释)（yarn init或者npm init都可以）
-y 的含义：yes的意思，在init的时候省去了敲回车的步骤
此时会在当前目录下生成 package.json 文件

yarn init -y # npm init

我在这里遇到一个问题，报错： ‘yarn’ 不是内部或外部命令，也不是可运行的程序或批处理文件

报错原因：未安装yarn
解决方法：安装yarn

npm install -g yarn

3. 将 VuePress 安装为本地依赖

yarn add -D vuepress # npm install -D vuepress

注意:如果你的现有项目依赖了 webpack 3.x，我们推荐使用 Yarn (opens new window) 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

4. 创建docs目录和一个makedown文件
docs目录主要存放博客内容

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

5. 在 package.json 中添加一些 scripts

这一步骤是可选的，但推荐你完成它。在下文中，会默认这些 scripts 已经被添加。在之前通过命令创建的目录里找到package.json文件并打开，添加一些scripts

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

6. 在本地启动服务器

npm run dev 

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器

成功运行后如图：

VuePress目录结构介绍

VuePress 遵循 “约定优于配置” 的原则，推荐顺序如下：
.
├── docs
│ ├── .vuepress（全局配置、组件、静态资源） (可选的)
│ │ ├── components （组件）(可选的)
│ │ ├── theme（主题） (可选的)
│ │ │ └── Layout.vue
│ │ ├── public（静态资源目录） (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl（全局样式文件）
│ │ │ └── palette.styl（颜色常量文件）
│ │ ├── templates（html模板文件） (可选的, 谨慎配置)
│ │ │ ├── dev.html（用于开发环境的html模板文件）
│ │ │ └── ssr.html（基于 Vue SSR 的 HTML 模板文件）
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js（客户端应用的增强） (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json

接下来进一步完善这个网站:

核心配置

• 在docs目录下创建.vuepress目录（.vuepress目录主要存放配置）

mkdir .vuepress

• 在.vuepress目录下新建总配置文件config.js（config是整个项目的核心配置文件，所有菜单、栏目相关的配置均配置在该模块中）

cd .vuepress && touch config.js

• 在config.js中加入内容

module.exports = {
    title: '潞潞小记',
    description: '潞潞的专属个人博客网站',
    dest: './dist',
    port: '7777',
    head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}]
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: [{
            text: '懵逼指南', link: '/guide/'
        }],
        sidebar: {'/guide/':[
            {
                  title:'新手指南',
                  collapsable: true,
                  children:[
                    '/guide/notes/one',
                  ]
                },
                {
                  title:'知码学院',
                  collapsable: true,
                  children:[
                    '/guide/notes/two',
                  ]
                }
            ]
        },
        sidebarDepth: 2,
        lastUpdated: 'Last Updated',
        searchMaxSuggestoins: 10,
        serviceWorker: {
            updatePopup: {
                message: "有新的内容.",
                buttonText: '更新'
            }
        },
        editLinks: true,
        editLinkText: '在 GitHub 上编辑此页 ！'
    }
}

• 运行

npm run dev

之后更详细的搭建博客教程请参考Vuepress博客搭建指南