技术博客框架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 中所有以 / 开始的资源路径中。
先这样，以后慢慢丰富。。。