安装/使用
依赖环境
提示
安装
使用本主题,你需要首先新建一个项目,并安装vuepress@next
以及本主题
新建文件夹并进入目录
mkdir my-blog cd my-blog
初始化项目
pnpmgit init pnpm init
yarngit init yarn init
npmgit init npm init
安装相关依赖
安装
vuepress@next
和vuepress-theme-plume
作为本地依赖。pnpm# 安装 vuepress pnpm add -D vuepress@next vue # 安装 主题和打包工具 pnpm add -D vuepress-theme-plume @vuepress/bundler-vite@next
yarn# 安装 vuepress yarn add -D vuepress@next # 安装 主题和打包工具 yarn add -D vuepress-theme-plume @vuepress/bundler-vite@next
npm# 安装 vuepress npm i -D vuepress@next # 安装 主题和打包工具 npm i -D vuepress-theme-plume @vuepress/bundler-vite@next
注意
主题当前版本 已适配至
vuepress@2.0.0-rc.14
,你应该安装这个版本的 VuePress。 高于或低于这个版本,可能会存在潜在的兼容性问题。在
package.json
中添加script
package.json{ "scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" } }
vuepress
默认将文档源码放在docs
目录下。将默认的临时目录和缓存目录添加到
.gitignore
文件中.gitignorenode_modules .temp .cache
shecho 'node_modules' >> .gitignore echo '.temp' >> .gitignore echo '.cache' >> .gitignore
在
docs/.vuepress/config.{js,ts}
中配置主题docs/.vuepress/config.jsimport { 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(), })
注意
无论是否需要使用 多语言 ,你都应该为 VuePress 配置 正确
lang
选项值。 主题需要根据lang
选项来确定语言环境文本。在
docs
目录下新建README.md
文件声明首页配置。
README.md--- home: true ---
在本地服务器启动你的文档站点
pnpmpnpm dev
yarnyarn dev
npmnpm run dev
Vuepress 会在 http://localhost:8080 。启动一个热重载的开发服务器。当你修改你的 Markdown 文件时,浏览器中的内容也会自动更新。
完成