【2】VitePress搭建个人博客-快速上手

本文详细介绍了如何使用Node.js18及以上版本和Markdown语法创建一个基于VitePress的静态网站项目,包括初始化、依赖管理、编写内容和配置package.json。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

准备工作

  1. Node.JS版本18或更高版本 https://nodejs.org/en
  2. 具有Markdown语法支持的文本编辑器
  3. git https://git-scm.com/

初始化项目

  1. 创建文件夹并进入到项目的目录中,打开cmd cd到该目录下
# mkdir 创建文件夹指令; && 表示当前命令执行成功后会执行下一条指令。
mkdir vitepress-starter && cd vitepress-starter
  1. 初始化项目,官网默认使用yarn作为依赖管理工具
yarn init
  1. 安装项目所需的依赖vitepress和vue
yarn add --dev vitepress vue
  1. 创建第一个实例文件
# echo 写入内容到项目的 docs/index.md 中
mkdir docs && echo '# My name is Zhuang Niuniu' > docs/index.md
  1. package.json中增加打包以及运行的指令
"scripts": {
  "docs:dev": "vitepress dev docs", // 本地运行调试
  "docs:build": "vitepress build docs", // 项目打包:最终结果会在 .vitepress/dist 中
  "docs:serve": "vitepress serve docs" // 预览打包后的效果,此命令只有 build 成功后才会执行成功。
},
  1. 执行npm run docs:dev,项目运行本地生成一个链接,点击能够访问看见你刚刚在index.md写的内容(例如:My name is Zhuang Niuniu)则代表运行成功
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值