【xingorg1-ui】基于vue3.0从0-1搭建组件库 (七) 组件文档平台雏形

2021年09月15日 阅读数:2
这篇文章主要向大家介绍【xingorg1-ui】基于vue3.0从0-1搭建组件库 (七) 组件文档平台雏形,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

(七) 组件说明文档平台github

vitepress

缺点:

没有vuepress的主题多、也没有他的功能多,基本的功能等须要本身手动配置。 新玩意儿,贵在体验web

好处:

轻量 第一次打包比较慢,后期打包都很快npm

插件官网文档:

https://github.com/vuejs/vitepressjson

vitepress的安装:

npm install vitepress -D

package.json脚本配置

"docs:dev""vitepress dev docs",
"docs:build""vitepress build docs",

建立相应docs文档目录:

image.png

docs>index.md为入口文件编辑器

设置配置文件:

/*
 * @Author: @Guojufeng
 * @Date: 2020-11-01 19:47:03
 * @LastEditors: @Guojufeng
 * @LastEditTime: 2020-11-01 19:54:02
 * @FilePath: /Users/guojufeng/Documents/GitHub/xingorg1-ui/docs/.vitepress/config.js
 */

module.exports = {
  title'xingorg1-ui'// 设置网站标题
  description'vue3组件库',
  dest'./build'// 输出目录
  themeConfig: {
    nav: [
      { test'主页'link'/' },
      { test'联系我'link'/' },
      { test'源码'link'/' },
    ],
    sidebar: [
      {
        text'Icon图标'// 必要的
        link'/icon/'// 可选的,标题的跳转连接,应为绝对路径且路径正确
        collapsablefalse// 可选的,默认为true
        sidebarDepth1 // 可选的,默认1
      },
      {
        text'Button按钮',
        link'/button/',
        collapsablefalse,
        sidebarDepth1
      }
    ]
  }
}

启动项目:

npm run docs:dev image.pngide

访问文档地址:

默认生成地址:http://localhost:3000/网站