189 lines
3.2 KiB
Markdown
189 lines
3.2 KiB
Markdown
---
|
|
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.8`，你应该安装这个版本的 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
|
|
|
|
**在 `.vuepress/config.{js,ts}` 中配置主题**
|
|
|
|
::: code-tabs
|
|
@tab .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 文件时，浏览器中的内容也会自动更新。
|