VuePress搭建个人博客
官网地址: https://v2.vuepress.vuejs.org/zh/
相关链接: https://theme-hope.vuejs.press/zh/get-started/
快速上手
pnpm create vuepress vuepress-starter
# 选择简体中文、pnpm等, 具体如下
.../19347d7670a-1fd8 | +69 +++++++
.../19347d7670a-1fd8 | Progress: resolved 69, reused 35, downloaded 34, added 69, done
? Select a language to display / 选择显示语言 简体中文
? 选择包管理器 pnpm
? 你想要使用哪个打包器？ vite
? 你想要创建什么类型的项目？ blog
生成 package.json...
? 设置应用名称 zn-blog
? 设置应用版本号 0.0.1
? 设置应用描述 只年博客
? 设置协议 MIT
? 是否需要一个自动部署文档到 GitHub Pages 的工作流？ Yes
生成模板...
安装依赖...
这可能需要数分钟，请耐心等待.
我们无法正确输出子进程的进度条，所以进程可能会看似未响应
╭──────────────────────────────────────────────────────────────────╮
│ │
│ Update available! 9.12.1 → 9.14.1. │
│ Changelog: https://github.com/pnpm/pnpm/releases/tag/v9.14.1 │
│ Run "pnpm add -g pnpm" to update. │
│ │
│ Follow @pnpmjs for updates: https://x.com/pnpmjs │
│ │
╰──────────────────────────────────────────────────────────────────╯
Packages: +254
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 315, reused 85, downloaded 169, added 254, done
node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild: Running postinstall script, done in 619ms
node_modules/.pnpm/vue-demi@0.14.10_vue@3.5.13/node_modules/vue-demi: Running postinstall script, done in 191ms
node_modules/.pnpm/esbuild@0.19.12/node_modules/esbuild: Running postinstall script, done in 736ms
devDependencies:
+ @vuepress/bundler-vite 2.0.0-rc.7
+ @vuepress/plugin-blog 2.0.0-rc.60
+ @vuepress/theme-default 2.0.0-rc.60
+ vue 3.5.13
+ vuepress 2.0.0-rc.18
WARN Issues with peer dependencies found
.
└─┬ vuepress 2.0.0-rc.18
└── ✕ unmet peer @vuepress/bundler-vite@2.0.0-rc.18: found 2.0.0-rc.7
Done in 1m 6.2s
模板已成功生成!
? 是否想要现在启动 Demo 查看? No
提示: 请使用 "pnpm run docs:dev" 命令启动开发服务器
按照提示启动，报错及处理
zhinian@Mac vuepress-starter % pnpm run docs:dev
> zn-blog@0.0.1 docs:dev /Users/zhinian/Downloads/vuepress-starter
> vuepress dev docs
✔ Initializing and preparing data - done in 57ms
vite v5.0.13 dev server running at:
➜ Local: http://localhost:8080/
➜ Network: http://172.20.10.3:8080/
12:36:13 [vite] Pre-transform error: Preprocessor dependency "sass" not found. Did you install it? Try `pnpm add -D sass`
处理
pnpm add -D sass
pnpm run docs:dev
# 访问 http://localhost:8080/ 即可成功
使用 vuepress-theme-hope 主题创建
zhinian@Mac ~ % npm init vuepress-theme-hope@latest zn-blog
> npx
> create-vuepress-theme-hope zn-blog
✔ Select a language to display / 选择显示语言 简体中文
✔ 选择包管理器 pnpm
✔ 你想要使用哪个打包器？ vite
生成 package.json...
✔ 设置应用名称 zn-blog
✔ 设置应用描述 只年博客
✔ 设置应用版本号 2.0.0
✔ 设置协议 MIT
生成 tsconfig.json...
✔ 你想要创建什么类型的项目？ blog
✔ 项目需要用到多语言么? no
生成模板...
✔ 是否初始化 Git 仓库? yes
✔ 是否需要一个自动部署文档到 GitHub Pages 的工作流？ yes
安装依赖...
这可能需要数分钟，请耐心等待.
我们无法正确输出子进程的进度条，所以进程可能会看似未响应
Packages: +372
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 430, reused 241, downloaded 131, added 372, done
devDependencies:
+ @vuepress/bundler-vite 2.0.0-rc.18
+ sass-embedded 1.81.0
+ vue 3.5.13
+ vuepress 2.0.0-rc.18
+ vuepress-theme-hope 2.0.0-rc.59
Done in 11.4s
模板已成功生成!
✔ 是否想要现在启动 Demo 查看? no
提示: 请使用 "pnpm run docs:dev" 命令启动开发服务器
zhinian@Mac ~ % cd zn-blog
zhinian@Mac zn-blog % pnpm install -D sass-embedded
Already up to date
Progress: resolved 430, reused 372, downloaded 0, added 0, done
Done in 504ms
zhinian@Mac zn-blog % pnpm i
Lockfile is up to date, resolution step is skipped
Already up to date
Done in 420ms
zhinian@Mac zn-blog % pnpm run docs:dev
> zn-blog@2.0.0 docs:dev /Users/zhinian/Downloads/zn-blog
> vuepress-vite dev src
✔ Initializing and preparing data - done in 2.63s
vite v5.4.11 dev server running at:
➜ Local: http://localhost:8080/
➜ Network: http://172.20.10.3:8080/
# 访问 http://localhost:8080/ 即可成功
