十分钟用vitepress搭建项目文档

2022-09-21 10:37:29 浏览数 (1)

前言

前些天，用尽平生所学，写了一篇技术文章，Vue3项目框架搭建封装，一次学习，终身受益【万字长文，满满干货】，可惜掘金给的流量不多，点赞的人不多，评论的人几乎没有，收藏的人却不少，我想可能是万字长文看起来太吃力，于是花了3天时间用vitepress搭建了一个项目文档，方便大家查阅。

文档地址：yinzhuo19970516.github.io/

现在，我准备花10min介绍一下,介绍一下这个vuepress的小兄弟，vitepress

vitepress是什么

vitepress 是一款基于vite vue3的静态站点生成器

有什么问题看文档吧，推荐看英文文档，中文文档不全

遇到问题建议去github gitee 搜索，目前这类的博客比较少

英文文档

中文文档

vitepress怎么用

新建文件夹，文件夹下新建目录

代码语言：javascript复制
.
├─ docs 
│  └─ index.md

初始化

代码语言：javascript复制
npm init
npm i vitepress

package.json添加script

代码语言：javascript复制
"scripts": {
 "dev": "vitepress dev docs --open",
 "build": "vitepress build docs",
 "serve": "vitepress serve docs"
},

运行

代码语言：javascript复制
npm run dev

最基础的搭建就成功了

加配置文件

在docs目录下创建一个 .vuepress目录，如下结构

代码语言：javascript复制
.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  └─ index.md
└─ package.json

配置项目介绍

以我配置的为例

代码语言：javascript复制
export default {
  title: 'vue-template',// 网站标题
  description: 'vue-cli/二次封装/vue3/axios/多入口打包', //网站描述
  ignoreDeadLinks: true,// 最好加上，构建时会忽略md中的外链
  markdown: {
    theme: 'material-palenight',//md主题
    lineNumbers: true//md 加行号
  },
  lastUpdated: true,//显示最近更新时间
  appearance: true,//可以选择深浅主题
  
  // 主题配置
  themeConfig: {
    socialLinks: [//右上角图标和链接，icon 可用svg 配置
      { icon: 'github', link: 'https://github.com/Yinzhuo19970516/vue-template' },
      { icon: 'slack', link: 'https://juejin.cn/user/1011206428301774' }
    ],
    lastUpdatedText: '更新时间',
    siteTitle: 'vue-template',
    nav: [//右侧导航
      { text: '首页', link: '/' },
      { text: '项目简介', link: '/page/index' },
      { text: '更新日志', link: 'https://github.com/Yinzhuo19970516/vue-template/blob/main/CHANGELOG.md' }
    ],
    // 侧边导航
    sidebar: [
      {
        text: '项目简介',
        items: [
          { text: '为什么要写这个项目', link: '/page/why' },
          { text: '多入口打包', link: '/page/pages' },
          { text: '自动化生成项目基本模版', link: '/page/init' },
          { text: 'Pinia',link:'/page/pinia'},
          { text: '数据持久化',link:'/page/piniaPlugin'},
          { text: 'axios二次封装',link:'/page/axios'},
          { text: '路由跳转动画',link:'/page/router'},
          { text: 'less sass的优化处理',link:'/page/less'},
          { text: 'viewport适配方案',link:'/page/viewport'},
          { text: '环境变量',link:'/page/env'},
          { text: '兼容性处理方案',link:'/page/babel'},
          { text: '总结', link: '/page/all' },
        ]
      }
    ],
    outlineTitle: '目录'
  }
}

首页布局

首页就是进入我们博客会加载docs/index.md,所以我们需要对其进行一个美化，我们VitePress默认主题提供了一个主页布局 参考我的吧，具体的意思很明显了，首页还挺好看的。

代码语言：javascript复制
---

layout: home
title: vue-template
description: vue-cli/二次封装/vue3/axios/多入口打包

hero:
  name: vue-template


	


github git 开源 https bash 




	






	

 0 人点赞