纳兰性德
  • 微信号:17764149196
您当前的位置:首页  > 前端

使用VitePress创建项目文档

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

项目组最近需要自己整一套项目开发文档,我选择了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修改文件会自动热更新不用重启就可以看到效果

就介绍到这了,想详细学习的同学自己去VitePress官网看文档哟

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我删除。邮箱:577955659@qq.com

标签: Vite VitePress

久伴轻尘

人生若只如初见,何事秋风悲画扇