使用VitePress创建项目文档

作者：久伴轻尘时间：2021年09月04日阅读数：1521

项目组最近需要自己整一套项目开发文档，我选择了VitePress

创建并切换到新目录

mkdir wish-doc && cd wish-doc

npm初始化

npm init

本地安装VitePress

npm install -D vitepress

创建第一个文档

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

添加一些脚本到 package.json

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

在docs目录下创建一个 .vitepress 的目录，并新建一个config.js

module.exports = {
    title: "wish文档",// 网站标题
    description: 'wish文档', //网站描述
    base: '/', //  部署时的路径 默认 /  可以使用二级地址 /base/
    // lang: 'en-US', //语言
    repo: 'vuejs/vitepress',
    port: 9981,//启动端口
    // 主题配置 这个不能少 不然会报错
    themeConfig: {
    }
}

然后执行命令 npm run docs:dev 就启动了

配置网站首页

修改docs目录下的index.md文件

---
home: true
# heroImage: /images/itclancoder.jpeg
heroText: wish文档
tagline: JFinal Vue
actionText: 开始阅读 →
actionLink: /doc/index
features:
  - title: Ant Design Vue
    details:  Ant Design 的 Vue 实现，开发和服务于企业级后台产品
  - title: JFinal
    details: JFinal 是基于 Java 语言的极速 WEB + ORM + AOP + Template Engine 框架
  - title: MySql
    details: Nice!Nice!Nice!
footer: MIT Licensed | Copyright © 2021-present 久伴轻尘
---

vite修改文件会自动热更新不用重启就可以看到效果