vuepress-theme-plume/docs/notes/vuepress-theme-plume/快速开始.md

title, createTime, author, permalink

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

依赖环境

• Node.js v12+
• Yarn v1 classic

::: tip 提示

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

安装

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

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

  mkdir my-blog
  cd my-blog
  

• 步骤2： 初始化项目 ::: code-tabs @tab yarn

  git init
  yarn init
  

  @tab npm

  git init
  npm init
  

  :::

• 步骤3： 安装相关依赖

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

  如果你是希望将已有的项目进行升级，请从 步骤5 开始 ::: code-tabs @tab yarn

  yarn add -D vuepress@next @vuepress-plume/vuepress-theme-plume
  

  @tab npm

  npm i -D vuepress@next @vuepress-plume/vuepress-theme-plume
  

  :::

• 步骤4： 在package.json中添加script

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

  {
    "scripts": {
      "dev": "vuepress dev src",
      "build": "vuepress build src"
    }
  }
  

• 步骤5： 将默认的临时目录和缓存目录添加到.gitignore 文件中 ::: code-tabs @tab sh

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

  @tab .gitignore

  node_modules
  .temp
  .cache
  

  :::

• 步骤6： 在 .vuepress/config.ts 中配置主题 ::: code-tabs @tab ts

  // .vuepress/config.ts
  import { defineUserConfig } from 'vuepress'
  import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
  export default defineUserConfig({
    theme: themePlume({
      // theme config
    })
  })
  

  @tab js

  // .vuepress/config.js
  import { themePlume } from '@vuepress-plume/vuepress-theme-plume'
  module.exports = {
    theme: themePlume({
      // theme config
    })
  }
  

  :::

• 步骤7： 在src 目录下新建README.md文件

  声明首页配置。

  ---
  home: true
  ---
  

• 步骤8： 在本地服务器启动你的文档站点 ::: code-tabs @tab yarn

  yarn dev
  

  @tab npm

  npm run dev
  

  :::

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

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