【VuePress01】开始使用VuePress啦

写在前面的话

啊啊啊啊，忍不住又开了一个坑，之前的都还没继续写完，开这个是有原因的，现在公司用的是hugo，基于bootstrap+jq，没错，都9102年了，我们还在bootstrap+jq。

也商讨过，主要是公司的业务，很多都是展示型的页面，官网上信息展示居多。如果上框架，一是学习成本，基于SEO的原因，肯定不得不上SSR，再一个框架基本上多是对于数据的处理，但是我们官网要求的是快速生成静态站。所以感觉上Vue遥遥无期了，但也不是没有一点点希望。因为我看到VuePress，对SEO友好，然后语法也能接受。所以想着自己有事没事来踩踩坑，以后给公司提出要换也会有方向和经验，而不是一股脑的说要换这个，然后一群人都不知道这条路到底能不能走到头，最后又宣告失败。

安装

官网在这，里面一些特性我就不多说，不然看起来就像是直接copy官网来着。首先说说安装吧，安装还是遇到了一些小问题。我按照官网写的，

官网上的步骤

就是上图这样，但是在启动的时候会报res.getHeader is not a function。后来去github上查issue，发现很多人都出现了这个问题，有看到说不能用npm,要用yarn，但是我自己尝试过还是不行，最后是自己在package.json中添加下面的代码，

"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
},
"devDependencies": {
  "vuepress": "^0.14.10",
  "webpack-dev-middleware": "^3.6.0"
},
"resolutions": {
  "webpack-dev-middleware": "3.6.0"
}

然后先卸载vuepress,卸载命令npm uninstall vuepress，然后再npm install，最后npm run docs:dev就可以了，启动后是这个样子的：

成功启动的页面

默认端口是 8080，会有一个Hello VuePress，这个是README.md里面的，然后右边有一个搜索框。
说一下目录结构:

我的目录结构

myBlog  // 我的项目名，因为是打算用vuepress搭建自己的博客放在github.io上的
├─docs // VuePress实际项目
│ ├─.vuepress // vuepress的配置输出目录等
│ │ └─config.js // 配置文件
│ └─README.md // 首页的md，也就是启动后出现Hello VuePress 的文件，一些文案也是修改这种.md文件
├─node_modules // 我的包安装
├─package.json // 记得修改这里面的代码，不然可能启动会报错哦
│ ...
└─README.md // 要提交到github上的README说明，不和VuePress实际项目有关