婴儿级vitepress搭建教程

更新: 4/21/2025

字数: 0 字

阅读时长: 0 分钟

1.安装trae

下载地址：Trae官网

2.建立仓库

新建一个文件夹：📁MyNote 打开trae，文件-打开文件夹，选择📁MyNote

3. 安装node.js

1. 访问 Node.js 官网，下载 .pkg 文件（LTS 或 Current 版本）。
2. 双击安装包，按向导步骤完成安装。
3. 验证安装：

node -v

npm -v

4.安装pnpm

打开终端，然后输入以下命令来全局安装pnpm：

npm install pnpm

验证安装：

pnpm -v

5.安装vitepress

接下来安装vitepress：

pnpm add -D vitepress

然后初始化安装：

pnpm vitepress init

会依次出现以下提示：

T   Welcome to VitePress! 
|
o  Where should VitePress initialize the config? //必填，分开管理
|  ./docs //文章内容和配置都在docs文件夹下
|
o  Site title: //网站标题
|  我的笔记
|
o  Site description: //网站描述
|  笔记使人精准
|
o  Theme: 
|  Default Theme //选择默认主题
|
o  Use TypeScript for config and theme files?
|  Yes
|
o  Add VitePress npm scripts to package.json?
|  Yes
|
—  Done! Now run npm run docs:dev and start writing. //初始化完成

5.启动（本地）

pnpm

pnpm run docs:dev

启动成功后，会出现以下提示：

> @ docs:dev /Users/uiui/Code/MyNote
> vitepress dev docs


  vitepress v1.6.3

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

结下来在浏览器打http://localhost:5173/，就可以看到vitepress的默认页面了。

在运行的终端中，按h键可以调出服务运行的菜单：

vitepress v1.6.3

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help           //按h显示帮助菜单

  Shortcuts
  press r to restart the server  //重新启动服务,当你更新了目录之后需要重新启动
  press u to show server url     //显示地址
  press o to open in browser     //在浏览器中打开
  press c to clear console       //清除控制台
  press q to quit                //退出

搭建完毕之后的目录情况：

.
├─ docs
│  └─ .vitepress
│     ├─ cache               <-- 缓存文件夹（不用管）
│     └─ config.mts          <-- 主要配置文件
│  └─ api-examples.md        <-- 示例文章1
│  ├─ markdown-examples.md   <-- 示例文章2
│  └─ index.md               <-- 首页
├─ node_modules              <-- 依赖包（不用管）
├─ package-lock.json         <-- 不用管
└─ package.json              <-- 项目配置文件（不用管）

6.主页设置

index.md

// docs/index.md
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "我的笔记"
  text: "笔记使人精准"
  tagline: My great project tagline 
  image:
    src: /logo.png
    alt: VitePress
  actions:
    - theme: brand
      text: Markdown Examples
      link: /markdown-examples
    - theme: alt
      text: API Examples
      link: /api-examples

features:
  - icon: 📖
    title: Feature A
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - icon: 💓
    title: Feature B
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - icon: 🚗
    title: Feature C
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
---

设置图片文件夹

在docs文件夹下新建public文件夹，将logo图片放入其中。 然后在hero下添加

  image:
    src: /logo.png
    alt: VitePress