软件教程 2025年08月6日
0 收藏 0 点赞 340 浏览 1614 个字
摘要 :

文章目录 一、安装bun 二、创建vitepress项目 1. 初始化项目 2. 配置项目 3. 启动项目 三、打包测试 最近琢磨着测试一下bun这玩意儿,正好之前搭的vitepress站点也想……




  • 一、安装bun
  • 二、创建vitepress项目
    • 1. 初始化项目
    • 2. 配置项目
    • 3. 启动项目
  • 三、打包测试

最近琢磨着测试一下bun这玩意儿,正好之前搭的vitepress站点也想重新搞一搞,今天就来给大伙分享下具体咋操作。

一、安装bun

bun的安装可以参考它的中文官网,网址是https://www.bun.sh.cn/docs/installation 。按照官网的说法,Windows系统安装bun的话,最低得是Windows 10 版本1809 。我这系统是22H2,肯定是够用了。

安装的时候,在powershell里执行这条命令就行:

powershell -c \"irm bun.sh/install.ps1|iex\"

安装完成后,咱得重启下cmd或者powershell,然后输入下面这条命令检查下是否安装成功:

bun -v
1.2.5

如果能显示出版本号,就说明安装没问题啦。

二、创建vitepress项目

1. 初始化项目

先打开vscode,新建一个blog文件夹。接着在vscode的终端里输入下面的命令,安装vitepress:

bun add -D vitepress

我安装的时候,大概花了15.06秒。安装完成后,会有类似下面这样的提示信息:

PS E:\\study\\Blog> bun add -D vitepress
bun add v1.2.5 (013fdddc)

installed vitepress@1.6.3 with binaries:
 - vitepress

125 packages installed [15.06s]

2. 配置项目

安装好之后,要初始化vitepress项目,执行下面这条命令:

bun vitepress init

这时候会弹出一系列问题,按照vitepress.dev/zh/guide/ge… 这个指南里说的来回答就行。比如像下面这样:

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Where should VitePress look for your markdown files?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run pnpm run docs:dev and start writing.

3. 启动项目

项目创建好之后,就可以启动看看效果啦,执行下面这条命令:

bun run docs:dev

项目启动成功后,我就把之前写的内容替换进去,顺便测试了下HMR热更新。一顿操作下来,没发现啥问题,热更新速度也还挺快。

三、打包测试

站点能正常跑起来了,接下来测试打包和本地部署。打包的话,执行这条命令:

bun run docs:build

执行后会有类似下面这样的输出:

$ vitepress build blog
Debugger attached.

  vitepress v1.6.3

✓ building client + server bundles...
✓ rendering pages...
build complete in 7.17s.
Waiting for the debugger to disconnect...

打包完成后,会生成一个dist文件夹。把这个dist文件夹放到iis上进行访问测试,我这边测试下来没发现啥问题。如何使用bun搭建vitepress个人博客

按照上面这些步骤,就能用bun搭建一个vitepress个人博客啦,大伙要是有兴趣,赶紧动手试试吧!

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/6847.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号