技术博客框架vuepress的使用总结

什么是vuepress？

这个一定要弄明白，我就是直接看的官方文档，着急写项目了，结果遇到了很多坑，非常不建议这么做，费时费力。

官方说法：vuepress是为了支持vue及其子项目的文档需求，每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

而且官方文档好像也是用vuepress写的。vuepress 是由vue、vue router、webpack的SPA框架。

这里贴一个非常不错的git vuepress的melodydl主题，给了我很大帮助。

结构及配置

先来看看工程的目录结构，这些都是约定的，不建议修改。

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

鉴于我的习惯，会修改一下目录的结构，参考的也是上面提到的git仓库。docs同级新建src作为资源文件，src下新建index.js作为入口文件

blog
├── docs
│	├──_post
│	│	└── media # blog 文章中的图片文件
│	│	├── xxx.md bolg 文章的md格式文件
│	│	...
│	├── .vuepress # Vuepress 目录
│	│	└── blog # 打包目录
│	│		...
│	│	└── public # Vuepress 静态资源文件，主要存放图片文件
│	│	└── config.js # Vuepress 配置文件
│	└── README.md # 说明文件 	
├── src # Blog 源文件目录
│   ├── components # 基础组件 目录
│   ├── layouts # 布局组件 目录
│   ├── styles # 样式文件夹
│   │   ├── xxx.css
│   │   ...
│	└── enhanceApp.js #客户端应用增强
│	└── index.js #入口文件
└── package.json

我没有用到主题，所以index.js内容比较简单：

const path = require('path')
module.exports = (opts, ctx) => ({
  enhanceAppFiles: path.resolve(__dirname, './enhanceApp.js'),
})

同级下的enhanceAppFiles，这里我引了element-ui：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/display.css'

export default ({ Vue }) => {
  Vue.use(ElementUI)
  Vue.mixin({
    computed: {
      $posts() {
        return this.$site.pages
      },
    },
  })
}

比较重要的来了，就是这个.vuepress/config.js文件，决定工程的整体配置项

const path = require('path')

module.exports = {
  title: '博客 | 个人网站',
  description: '官方博客',
  base: '/blog/',
  head: [
    ['link', {
      rel: 'icon',
      href: '/favicon.ico'
    }],
    ['meta', {
      name: 'viewport',
      content: 'width=device-width,initial-scale=1,user-scalable=no'
    }],
  ],

  evergreen: true,

  plugins: [
    ['@vuepress/google-analytics', {
      ga: 'UA-165839722-1',
    }],
  ],

  theme: path.resolve(__dirname, '../../src'),
  themeConfig: {
    title: 'Top GeyeCloud',
    nav: [{
        text: 'HOME',
        link: '/'
      },
      {
        text: 'ABOUT',
        link: '/about/'
      },
      {
        text: 'TAGS',
        link: '/tags/'
      },
    ],
    header: {
    }
}

由于是自定义的主题，你就可以修改themeConfig进行自定义的配置。theme也要修改一下指定到src目录下，这样启动工程后地址栏会类似于这样的：

http://localhost:8888/, 如果有需求要添加深层次的目录，需要config.js添加配置base，结果变成这样 http://localhost:8888/blog/；

但是，如果你使用了base的这个配置，记得在访问静态资源时使用$withBase，否则取不到。最后补充一句，一个 base 路径一旦被设置，它将会自动地作为前缀插入到 .vuepress/config.js 中所有以 / 开始的资源路径中。

先这样，以后慢慢丰富。。。