vuepress-theme-plume/docs/notes/theme/guide/安装与使用.md

title, author, icon, createTime, permalink

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

依赖环境

• Node.js v18.16.0+
• pnpm 8+ 或 Yarn 2+

::: info 提示

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

安装

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

步骤 1

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

mkdir my-blog
cd my-blog

步骤 2

初始化项目：

::: code-tabs @tab pnpm

git init
pnpm init

@tab yarn

git init
yarn init

@tab npm

git init
npm init

:::

步骤 3

安装相关依赖：

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

::: code-tabs @tab pnpm

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

@tab yarn

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

@tab npm

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

:::

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

步骤 4

在 package.json 中添加 script

::: code-tabs @tab package.json

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

:::

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

步骤 5

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

::: code-tabs @tab .gitignore

node_modules
.temp
.cache

@tab sh

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

:::

步骤 6

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

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

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

---
home: true
---

:::

步骤 8

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

::: code-tabs @tab pnpm

pnpm dev

@tab yarn

yarn dev

@tab npm

npm run dev

:::

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