VitePress快速上手

★

官方文档：https://vitepress.dev/zh/guide/markdown

VitePress中文网：https://vitejs.cn/vitepress/guide/markdown.html

强大功能的 vuepress 主题： https://theme-hope.vuejs.press/zh/

步骤 1: 创建一个项目

创建并进入新项目的目录

mkdir vitepress-starter && cd vitepress-starter

用你喜欢的包管理工具初始化项目

yarn init

步骤2: 安装VitePress

添加 VitePress 和 Vue 作为项目的开发依赖项。

yarn add --dev vitepress vue

创建你的第一篇文章

mkdir docs && echo '# Hello VitePress' > docs/index.md

步骤3: 启动本地开发环境

package.json添加以下scripts

{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },
  ...
}

启动文档网站的本地服务器

yarn docs:dev

代码结构/预览

代码结构

project-name
├─ .vitepress               # 存放VitePress的配置文件、组件、页面等
│  ├─ components            # 存放VitePress的组件
│  ├─ theme                 # 存放主题文件
│  │  ├─ layouts            # 存放布局组件
│  │  └─ ...
│  ├─ public                # 存放公共资源
│  ├─ styles                # 存放全局样式文件
│  └─ config.js             # VitePress配置文件
├─ docs                     # 存放你的markdown文件，这些markdown文件将被转换成html页面
│  ├─ guide                 # 可以是一个文件夹，包含一系列的md文件
│  ├─ index.md              # 项目的首页
│  │  └─ ...
│  └─ ...
├─ .gitignore
├─ README.md
└─ package.json