【保姆级教程】如何创建一个vitepress项目？

肥晨

发布于 2024-09-13 19:15:58

650

发布于 2024-09-13 19:15:58

文章被收录于专栏：农民工前端

安装前的准备工作

Node.js 18 及以上版本。
通过命令行界面 (CLI) 访问 VitePress 的终端。
支持 Markdown 语法的编辑器。
推荐 VSCode 及其官方 Vue 扩展。

项目安装

VitePress 可以单独使用，也可以安装到现有项目中。在这两种情况下，都可以使用以下方式安装它。

创建文件

可以手动新建一个文件，也可以使用指令。指令：

# mkdir 创建文件夹指令； && 表示当前命令执行成功后会执行下一条指令。
mkdir vitepress-starter && cd vitepress-starter

初始化文件

（看习惯，如果有该习惯就初始化，没有可跳过）

官网默认使用了 yarn 作为依赖管理工具

# 用yarn初始化
yarn init

# 用pnpm初始化
pnpm init

# 用npm初始化
npm init

安装依赖

安装项目所需的依赖 vitepress

# 用yarn
yarn add -D vitepress

# 用pnpm
pnpm add -D vitepress

# 用npm
npm add -D vitepress

如果下载失败，可以使用以下方法：

npm add --dev vitepress

遇到了 missing peer deps 警告？

如果使用 PNPM，会注意到对 @docsearch/js 的 missing peer deps 警告。这不会影响 VitePress 运行。如果希望禁止显示此警告，请将以下内容添加到 package.json：

"pnpm": {
  "peerDependencyRules": {
    "ignoreMissing": [
      "@algolia/client-search",
      "search-insights"
    ]
  }
}

命令行设置向导

在vitepress官方文档中提到，vitepress附带了一个命令行向导，来帮助构建一个基本的项目。通过运行以下命令启动向导：

# 用yarn
yarn vitepress init

# 用pnpm
pnpm vitepress init

# 用npm
npx vitepress init

将需要回答几个简单的问题：

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└

此时文件的目录结构是这样的，如下树状代码所示：

├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md 入口文件
└─ package.json

打开项目

基本完成了vitepress项目的初始化。运行 pnpm run docs:dev 来打开项目。效果如下:

看到如下界面即表示运行成功

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-09-11，如有侵权请联系 cloudcommunity@tencent.com 删除

教程

本文分享自农民工前端微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度