快速上手
依赖环境
TIP
- 使用 pnpm 时,你可能需要安装
vue
和@vuepress/client
作为 peer-dependencies ,即pnpm add -D vue @vuepress/client@next
。 - 使用 yarn 2 时,你需要在
.yarnrc.yml
文件中设置nodeLinker: 'node-modules'
。
手动安装
这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。如果你想在一个现有项目中使用 VuePress 管理文档,从步骤 3 开始。
- 步骤1: 创建并进入一个新目录
mkdir vuepress-starter
cd vuepress-starter
- 步骤2: 初始化项目
git init
yarn init
git init
npm init
- 步骤3: 将 VuePress 安装为本地依赖
yarn add -D vuepress@next
npm install -D vuepress@next
- 步骤4: 安装
vuepress-theme-star
yarn add -D vuepress-theme-star
npm install -D vuepress-theme-star
- 步骤5: 配置主题
创建 docs/.vuepress/config.js
或 docs/.vuepress/config.ts
module.exports = {
theme: '@starzkg/star',
}
- 步骤6: 在
package.json
中添加一些 scripts
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
- 步骤7: 将默认的临时目录和缓存目录添加到
.gitignore
文件中
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
- 步骤8: 创建你的第一篇文档
mkdir docs
echo '# Hello VuePress' > docs/README.md
- 步骤9: 在本地启动服务器来开发你的文档网站
yarn docs:dev
npm run docs:dev
VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时,浏览器中的内容也会自动更新。
现在,你应该已经有了一个简单可用的 VuePress 文档网站。接下来,了解一下 VuePress 配置 相关的内容。