当前位置：首页 > article >正文

VuePress搭建个人博客

article 2025/1/3 12:14:06

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/ 即可成功