背景
2024.4.1
前段时间尝试了使用docsify搭建知识分享站,朴素但是好用的界面深受我的喜欢,但是一些细节方面总觉的不是很完美,遂决定尝试一下更新更流行的vitepress
快速上手
官方文档:https://v1.vuepress.vuejs.org/zh/guide/getting-started.html
安装
准备Node.js 18及以上版本,官方文档
# installs NVM (Node Version Manager) curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # 重启终端后再进行以下流程 # download and install Node.js nvm install 21 # verifies the right Node.js version is in the environment node -v # should print `v21.7.1` # verifies the right NPM version is in the environment npm -v # should print `10.5.0`
创建并进入一个新目录
bashmkdir vitepress && cd vitepress
使用npm进行安装
npm add -D vitepress
运行命令行向导
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
启动
npm run docs:dev # 开发模式,支持热更新
npm run docs:build # 构建,生成静态文件
npm run docs:preview # 正式发布
配置文件:./package.json