---
title: 快速开始
createTime: 2022/05/14 10:43:53
author: pengzhanbo
permalink: /note/vuepress-theme-plume/quick-start/
---

## 依赖环境

- [Node.js v12+](https://nodejs.org/en/)
- [Yarn v1 classic](https://classic.yarnpkg.com/en/)

::: tip 提示
- 使用 [pnpm](https://pnpm.io/zh/) 时，你需要在 `.npmrc` 文件中设置 `shamefully-hoist=true` 。
- 使用 [Yarn 2](https://yarnpkg.com/) 时，你需要在 `.yarnrc.yml` 文件中设置 `nodeLinker: 'node-modules'` 。
:::

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

- __步骤1：__ 创建一个新文件夹，并进入目录
  ``` sh
  mkdir my-blog
  cd my-blog
  ```

- __步骤2：__ 初始化项目
  ::: code-tabs
  @tab yarn
  ``` sh
  git init
  yarn init
  ```
  
  @tab npm
  ``` sh
  git init
  npm init
  ```
  
  :::

- __步骤3：__ 安装相关依赖
  
  安装 `vuepress@next`和`@vuepress-plume/vuepress-theme-plume`作为本地依赖。

  如果你是希望将已有的项目进行升级，请从 `步骤5` 开始
  ::: code-tabs
  @tab yarn
  ``` sh
  yarn add -D vuepress@next @vuepress-plume/vuepress-theme-plume
  ```
  
  @tab npm
  ``` sh
  npm i -D vuepress@next @vuepress-plume/vuepress-theme-plume
  ```
  
  :::

- __步骤4：__ 在`package.json`中添加`script`
  
  比如，你希望项目中的`src`目录作为你的文章的写作目录：
  ``` json
  {
    "scripts": {
      "dev": "vuepress dev src",
      "build": "vuepress build src"
    }
  }
  ```
- __步骤5：__ 将默认的临时目录和缓存目录添加到`.gitignore` 文件中
  ::: code-tabs
  @tab sh
  ``` sh
  echo 'node_modules' >> .gitignore
  echo '.temp' >> .gitignore
  echo '.cache' >> .gitignore
  ```
  
  @tab .gitignore
  ``` text
  node_modules
  .temp
  .cache
  ```
  :::

- __步骤6：__ 在 `.vuepress/config.ts` 中配置主题
  ::: code-tabs
  @tab ts
  ``` ts {3,5-7}
  // .vuepress/config.ts
  import { defineUserConfig } from 'vuepress'
  import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
  export default defineUserConfig({
    theme: themePlume({
      // theme config
    })
  })
  ```
  
  @tab js
  ``` js {2,4-6}
  // .vuepress/config.js
  import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
  module.exports = {
    theme: themePlume({
      // theme config
    })
  }
  ```
  
  :::

- __步骤7：__ 在`src` 目录下新建`README.md`文件
  
  声明首页配置。
  ``` md
  ---
  home: true
  ---
  ```
- __步骤8：__ 在本地服务器启动你的文档站点
  ::: code-tabs
  @tab yarn
  ``` sh
  yarn dev
  ```
  
  @tab npm
  ``` sh
  npm run dev
  ```
  
  :::

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

  现在，你应该已经有了一个简单可用的 VuePress Blog 网站。接下来，了解一下 [编写 Blog 文章](/note/vuepress-theme-plume/write-article/) 和 [主题配置](/note/vuepress-theme-plume/theme-config/) 的相关内容。
