VuePress使用教程
前言
作为一个程序员，拥有一个自己的博客网站算得上是家常便饭了
每当我们解决一个问题时，及时总结并记录下来是一个对学习很有帮助的习惯，方便以后遇到同类型的问题时，不用再去百度谷歌找半天。而将这些内容发布在自己的博客网站上，同样也可以让其他遇上同样问题的人看到，并帮助到他们。借用在一个个人博客上看到的一句话：
对任何渴望进步的人来说，写博客/文章/回答对自己的成长帮助都是巨大的。频率和数量不必过分强求，有话要说就写写，没事就歇歇，随意点。因为坚持写作的那一刻起，你就已经开始受益。
我想，这就是搭建个人博客网站最大的意义
这里附上我自己开发的 Vuepress 主题来供大家参考：vuepress-theme-vivek
觉得有用的话麻烦动动小手点一下 star，这将会是我继续前进的动力~
1、安装
安装之前，需要确保Node.js的版本要在8或以上
1.1 全局安装
# 安装
npm install -g vuepress # 或者：cnpm install -g vuepress，yarn global add vuepress
# 创建项目目录并进入该目录
mkdir vuepress-starter && cd vuepress-starter
# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md
# 开始写作
vuepress dev .
# 构建静态文件
vuepress build .
1.2 本地安装
# 将 VuePress 作为一个本地依赖安装
npm install -D vuepress # 或者：cnpm install -D vuepress，yarn add -D vuepress
# 新建一个 docs 文件夹
mkdir docs
# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md
# 开始写作
npx vuepress dev docs
如果你的现有项目依赖了 webpack 3.x，推荐使用 Yarn 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。
接着在 package.json 中加入脚本
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
开始使用：
# 开始写作
npm run docs:dev # 或者：yarn docs:dev
# 生成静态的HTML文件
npm run docs:build # 或者：yarn docs:build
2、目录结构
VuePress遵循约定大于配置的原则，推荐如下目录结构：
各目录及文件的作用：
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: 客户端应用的增强。
自定义 templates/ssr.html 或 templates/dev.html 时，最好基于默认的模板文件来修改，否则可能会导致构建出错。模板文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport
最低0.47元/天 解锁文章
2264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
