基于vuepress 搭建自己的npm组件库文档

最新推荐文章于 2024-06-24 09:00:00 发布

小张张C

最新推荐文章于 2024-06-24 09:00:00 发布

阅读量140

点赞数 2

文章标签： npm 前端 node.js

本文链接：https://blog.csdn.net/qq_43432157/article/details/139838876

版权

关于vuepress

vuepress简介

官方网址：https://vuepress.vuejs.org/zh/

安装vuepress

// 创建项目，在项目根目录下安装
npm install -D vuepress

开始创建你的第一篇文档

// 在当前的目录下创建一个docs文件夹，在这个文件夹下创建一个README.md
mkdir docs && echo '# Hello VuePress' > docs/README.md

在 package.json 中添加一些 scripts(opens new window)

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

在本地启动服务器

npm run docs:dev

初始化组件库文档结构

设置首页

在docs根目录下的 README.md 就是首页
在这里插入图片描述
注意开始首页后，无论怎么配置侧边栏都不会显示，只有跳转了路由才会显示（大坑，查了好久）

设置侧边栏

在docs下创建.vuepress下创建config.js（主要配置）

module.exports = {
    title: "山财",
    description: "网站描述",
    // 注入到当前页面的 HTML <head> 中的标签
    head: [
        ['link', { rel: 'icon', href: '/favicon.ico' }], // 增加一个自定义的 favicon(网页标签的图标)
    ],
    base: "/", // 这是部署到github相关的配置 下面会讲
    // markdown: {
    //     lineNumbers: true, // 代码块显示行号
    // },
    // plugins: ["demo-container"],
    themeConfig: {
        displayAllHeaders: true, // 默认值：false
        logo: "/logo.png",
        nav: [
            { text: "Home", link: "/" },
            // 可指定链接跳转模式：默认target: '_blank'新窗口打开，_self当前窗口打开
            { text: "百度", link: "https://www.baidu.com" },
            { text: "CSDN", link: "https://blog.csdn.net", target: "_blank" },
            // 支持嵌套,形成下拉式的导航菜单
            {
                text: "语言",
                ariaLabel: "Language Menu",
                items: [
                    { text: "中文", link: "/language/chinese/" },
                    { text: "英文", link: "/components/demo" },
                ],
            },
        ],

        sidebar: {
            '/componentsDocs/': [
                "my-card"
            ],
            '/react/': [
                '',
                "background"
            ],
            // fallback 侧边栏被最后定义
            '/': ['', 'vue', '/react/', '/componentsDocs/my-card'], //不能放在数组第一个，否则会导致右侧栏无法使用 
        },
        // 左侧列表展开级数，默认是 1
        sidebarDepth: 6


    },
};