约 550 字大约 2 分钟

2022-04-08

依赖环境

提示

  • 使用 pnpm 时,你需要安装 vue 作为 peer-dependencies 。
  • 使用 Yarn 2+ 时,你需要在 .yarnrc.yml 文件中设置 nodeLinker: 'node-modules'

安装

使用本主题,你需要首先新建一个项目,并安装vuepress@next以及本主题

步骤 1

创建一个新文件夹,并进入目录

mkdir my-blog
cd my-blog

步骤 2

初始化项目

pnpm
git init
pnpm init

步骤 3

安装相关依赖

安装 vuepress@nextvuepress-theme-plume 作为本地依赖。

pnpm
# 安装 vuepress
pnpm add -D vuepress@next vue
# 安装 主题和打包工具
pnpm add -D vuepress-theme-plume @vuepress/bundler-vite@next

步骤 4

package.json 中添加 script

package.json
{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

vuepress 默认将文档源码放在 docs 目录下。

步骤 5

将默认的临时目录和缓存目录添加到.gitignore 文件中

.gitignore
node_modules
.temp
.cache

步骤 6

.vuepress/config.{js,ts} 中配置主题

.vuepress/config.js
import { defineUserConfig } from 'vuepress'
import { viteBundler } from '@vuepress/bundler-vite'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  theme: plumeTheme({
    // more...
  }),
  bundler: viteBundler(),
})

步骤 7

docs 目录下新建 README.md 文件

声明首页配置。

README.md
---
home: true
---

步骤 8

在本地服务器启动你的文档站点

pnpm
pnpm dev

Vuepress 会在 http://localhost:8080 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时,浏览器中的内容也会自动更新。

现在,你应该已经有了一个简单可用的 VuePress 网站。接下来,了解一下

等相关内容。