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

• npm地址

• github源码

(七) 组件说明文档平台

vitepress

缺点：

没有vuepress的主题多、也没有他的功能多，基本的功能等需要自己手动配置。 新玩意儿，贵在体验

好处：

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

插件官网文档：

https://github.com/vuejs/vitepress

vitepress的安装：

npm install vitepress -D

package.json脚本配置

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

创建相应docs文档目录：

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/‘, // 可选的，标题的跳转链接，应为绝对路径且路径正确
        collapsable: false, // 可选的，默认为true
        sidebarDepth: 1 // 可选的，默认1
      },
      {
        text: ‘Button按钮‘,
        link: ‘/button/‘,
        collapsable: false,
        sidebarDepth: 1
      }
    ]
  }
}

启动项目：

npm run docs:dev

访问文档地址：

默认生成地址：http://localhost:3000/