---
title: 安装/使用
author: pengzhanbo
icon: grommet-icons:install
createTime: 2024/03/04 09:50:07
permalink: /guide/quick-start/
---

## 依赖环境

- [Node.js v18.16.0+](https://nodejs.org/)
- [pnpm 8+](https://pnpm.io/zh/) 或 [Yarn 2+](https://yarnpkg.com/)

::: info 提示

- 使用 [pnpm](https://pnpm.io/zh/) 时，你需要安装 `vue` 作为 peer-dependencies 。
- 使用 [Yarn 2+](https://yarnpkg.com/) 时，你需要在 `.yarnrc.yml` 文件中设置 `nodeLinker: 'node-modules'` 。
:::

## 安装

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

### 步骤 1

**创建一个新文件夹，并进入目录：**

``` sh
mkdir my-blog
cd my-blog
```

### 步骤 2

**初始化项目：**

::: code-tabs
@tab pnpm

``` sh
git init
pnpm init
```

@tab yarn

``` sh
git init
yarn init
```

@tab npm

``` sh
git init
npm init
```

:::

### 步骤 3

**安装相关依赖：**

安装 `vuepress@next` 和 `vuepress-theme-plume` 作为本地依赖。

::: code-tabs
@tab pnpm

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

@tab yarn

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

@tab npm

``` sh
# 安装 vuepress
npm i -D vuepress@next
# 安装 主题和打包工具
npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
```

:::

:::warning
主题当前版本 已适配至 `vuepress@2.0.0-rc.9`，你应该安装这个版本的 VuePress。
高于或低于这个版本，可能会存在潜在的兼容性问题。
:::

### 步骤 4

**在 `package.json` 中添加 `script`**

::: code-tabs
@tab package.json

``` json
{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}
```

:::

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

### 步骤 5

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

::: code-tabs
@tab .gitignore

``` txt
node_modules
.temp
.cache
```

@tab sh

``` sh
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
```

:::

### 步骤 6

**在 `docs/.vuepress/config.{js,ts}` 中配置主题**

::: code-tabs
@tab docs/.vuepress/config.js

``` ts
import { defineUserConfig } from 'vuepress'
import { viteBundler } from '@vuepress/bundler-vite'
import { plumeTheme } from 'vuepress-theme-plume'

export default defineUserConfig({
  // 请不要忘记设置默认语言
  lang: 'zh-CN',
  theme: plumeTheme({
    // more...
  }),
  bundler: viteBundler(),
})
```

:::

:::warning
无论是否需要使用 **多语言** ，你都应该为 VuePress 配置 正确 `lang` 选项值。
主题需要根据 `lang` 选项来确定语言环境文本。
:::

### 步骤 7

**在 `docs` 目录下新建 `README.md` 文件**

声明首页配置。
::: code-tabs
@tab README.md

``` md
---
home: true
---
```

:::

### 步骤 8

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

::: code-tabs
@tab pnpm

```sh
pnpm dev
```

@tab yarn

``` sh
yarn dev
```

@tab npm

``` sh
npm run dev
```

:::

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