西瓜空间站

VuePress

4/7/2023 博客框架VuePress

VuePress

# 一、VuePress介绍

VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

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

VuePress官网地址 (opens new window)

# 二、VuePress搭建

注意：VuePress运行需要本机环境安装了Node.js且版本≥8.6以上的版本。

# 2.1 创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter
1

# 2.2 使用你喜欢的包管理器进行初始化

yarn init
1

# 2.3 将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

yarn add -D vuepress
1

注意

如果你的现有项目依赖了 webpack 3.x，我们推荐使用Yarn而不是 npm来安装 VuePress。因为在这种情形下，npm会生成错误的依赖树。

# 2.4 创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md
1

# 2.5 在 package.json 文件中添加一些 scripts

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

   {
     "scripts": {
       "docs:dev": "vuepress dev docs",
       "docs:build": "vuepress build docs"
     }
   }
1
2
3
4
5
6

# 2.6 在本地启动服务器

使用yarn启动

yarn docs:dev
1

VuePress 会在 http://localhost:8080 (opens new window) 启动一个支持热重载的开发服务器。

现在，你应该已经有了一个简单可用的 VuePress 文档。

VuePress的reco主题