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


(七) 组件说明文档平台

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文档目录:

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.png

访问文档地址:

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM