141 lines
3.0 KiB
Markdown
141 lines
3.0 KiB
Markdown
---
|
||
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/) 的相关内容。
|