On this page

2022-04-08

依赖环境

提示

  • 使用 pnpm 时,你需要在 .npmrc 文件中设置 shamefully-hoist=true
  • 使用 Yarn 2 时,你需要在 .yarnrc.yml 文件中设置 nodeLinker: 'node-modules'

安装

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

  • 步骤1: 创建一个新文件夹,并进入目录

    mkdir my-blog
    cd my-blog
    
  • 步骤2: 初始化项目

    git init
    yarn init
    
  • 步骤3: 安装相关依赖

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

    如果你是希望将已有的项目进行升级,请从 步骤5 开始

    yarn add -D vuepress@next @vuepress-plume/vuepress-theme-plume
    
  • 步骤4:package.json中添加script

    比如,你希望项目中的src目录作为你的文章的写作目录:

    {
      "scripts": {
        "dev": "vuepress dev src",
        "build": "vuepress build src"
      }
    }
    
  • 步骤5: 将默认的临时目录和缓存目录添加到.gitignore 文件中

    echo 'node_modules' >> .gitignore
    echo '.temp' >> .gitignore
    echo '.cache' >> .gitignore
    
  • 步骤6:.vuepress/config.ts 中配置主题

    // .vuepress/config.ts
    import { defineUserConfig } from 'vuepress'
    import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume'
    export default defineUserConfig({
      theme: plumeTheme({
        // theme config
      })
    })
    
  • 步骤7:src 目录下新建README.md文件

    声明首页配置。

    ---
    home: true
    ---
    
  • 步骤8: 在本地服务器启动你的文档站点

    yarn dev
    

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

    现在,你应该已经有了一个简单可用的 VuePress 网站。接下来,了解一下 首页配置, 导航栏配置, 编写 Blog 文章主题配置 的相关内容。