vuepress构建在线博客文档

1、 说明

VuePress 是尤雨溪（vue.js 框架作者）发布基于vue 的静态网站生成器， vue 的 spa应用，内置 webpack，可以用来写文档。详见vuepress官网：https://vuepress.vuejs.org/zh/。

• 官网有介绍与其他博客工具的区别如下：
  

  image.png

• vuepress 特点：
  

  image.png

2、 安装使用

（1）创建文件夹存作为vuepress生成网站资源位置。这里我用vuepress-starter 名字可以自己取。

  mkdir  vuepress-starter 

(2) 进入(1)创建目录，初始化。生成package.json

npm init -y

（3）全局安装vuepress，会拉下相关依赖包，放在node_modules下

npm install -g vuepress

image.png

（4）接下来就是进行vuepress配置了，VuePress 遵循 “约定优于配置” 的原则。我们先认识一下逛网推荐的目录结构

├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

各文件目录结构说明如下：

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: 客户端应用的增强。

（5）vuepress-starter 文件夹中创建docs文件夹，在 docs 中创建 .vuepress文件夹，在 .vuepress中创建 config.js 文件。(这里的vuepress前面是有一个实心点号。不然下面的文件不生效)。

（6）在package.json中添加scripts脚本

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

（7）在docs下增加README.md
随便补充点文字用于演示

image.png

（8）运行跑起来，浏览器访问 localhost:8080

npm run dev

image.png

浏览器示意图如下：

image.png

3、简单配置

vuepress 配置项都会存放在 .vuepress文件目录下。config.js是vuepress必要的配置项，它应该导出一个 JavaScript对象

module.exports = {
  title: '技术栈',
  description: '这是个人博哥网站'
}

3.1 主题配置

默认主题vue风格主题，修改主题需先安装主题，在配置。例如：vuepress-theme-hope
安装主题 ：vuepress-theme-hope。详情见主题文档 https://vuepress-theme-hope.gitee.io/v2/zh/guide/get-started/install.html

npm init vuepress-theme-hope@next [dir]

4、博客内容

5、发布到静态资源服务器

借助github的page功能