依赖环境
提示
安装
使用本主题,你需要首先新建一个项目,并安装vuepress@next
以及本主题
步骤1: 创建一个新文件夹,并进入目录
mkdir my-blog cd my-blog
步骤2: 初始化项目
git init yarn init
git init npm init
步骤3: 安装相关依赖
安装
vuepress@next
和@vuepress-plume/vuepress-theme-plume
作为本地依赖。如果你是希望将已有的项目进行升级,请从
步骤5
开始yarn add -D vuepress@next @vuepress-plume/vuepress-theme-plume
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
文件中echo 'node_modules' >> .gitignore echo '.temp' >> .gitignore echo '.cache' >> .gitignore
node_modules .temp .cache
步骤6: 在
.vuepress/config.ts
中配置主题// .vuepress/config.ts import { defineUserConfig } from 'vuepress' import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume' export default defineUserConfig({ theme: plumeTheme({ // theme config }) })
// .vuepress/config.js import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume' module.exports = { theme: plumeTheme({ // theme config }) }
步骤7: 在
src
目录下新建README.md
文件声明首页配置。
--- home: true ---
步骤8: 在本地服务器启动你的文档站点
yarn dev
npm run dev
Vuepress 会在 http://localhost:8080 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时,浏览器中的内容也会自动更新。
现在,你应该已经有了一个简单可用的 VuePress 网站。接下来,了解一下 首页配置, 导航栏配置, 编写 Blog 文章 和 主题配置 的相关内容。