Vue3+element-plus+vite 组件的二次封装– 添加vitePress,为组件库编写使用文档,组件库文档,vitepress文档

导读:本篇文章讲解 Vue3+element-plus+vite 组件的二次封装– 添加vitePress,为组件库编写使用文档,组件库文档,vitepress文档,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

本人是一个web前端开发工程师,主要是vue框架,整理了一些Vue常用的技术,一方面是分享,一方面是做总结,今后也会一直更新,有好建议的同学欢迎评论区分享 ;-)

Vue专栏:点击此处
Vue组件库专栏:点击此处
Vue2 vs Vue3 专栏:点击此处
Typescript专栏:点击此处

# 封面图片

组件库开发流程


Vue组件库专栏会按顺序执行一下流程,不断完善组件库开发流程

  1. Vue3+element-plus+vite 组件的二次封装,封装了头部的搜索条件栏,tabel栏,分页栏,form表单,都设置成了通过json可配置项,方便复用;
  2. 封装好了就开始打包,并且进行本地测试;
  3. 组件库发布到npm;
  4. 添加vitest单元测试框架;
  5. 添加vuepress文档。(本章相关)

简介


VitePress 是 VuePress 小兄弟, 基于 Vite构建。
一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

先上图...
在这里插入图片描述

1. 安装


官网:点击此处

# 创建并进入一个目录
mkdir vitepress-starter && cd vitepress-starter

# 初始化
npm init -y

# 安装依赖
npm i vitepress -d

# 新建目录
mkdir docs

这边手动创建文件,避免文件格式导致的乱码问题…
在docs目录下创建index.md文件当做主页文件

在这里插入图片描述

npm run docs:dev

运行后自动生成如下目录结构
在这里插入图片描述

2. 初始化配置文件


这里只是初始化配置,必须要有数据,这边就初始化一些
在docs/.vitepress文件中新建配置文件config.js
在这里插入图片描述

module.exports = {
  title: 'Hello VitePress',
  description: 'Just playing around.'
}

3. 完整版项目结构


  • .vitepress 是运行npm run docs:dev 自动生成的,其中的config.js 要手动生成,theme是自定义主题。
  • config.js 主要是配置文件
  • guide 存放的是指导页面
  • public 用来存放一些静态资源文件
  • team 存放的是团队页面
  • index.md 首页页面,这边依样画葫芦,改改配置就满足我个人的需求了…
    在这里插入图片描述

3.1 theme主题(非必须)

theme 目录结构如下

在这里插入图片描述

3.1.1 Layout.vue

<!--
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-12-29 12:43:54
 * @FilePath: \penk-ui\docs\.vitepress\theme\Layout.vue
 * @Desc: 这边的配置是用来修改布局的,通过插槽的形式...
 * @email: 492934056@qq.com
-->
<script setup>
import DefaultTheme from 'vitepress/theme'

const { Layout } = DefaultTheme
</script>

<template>
  <Layout>
    <template #aside-outline-before>
      目录
    </template>
  </Layout>
</template>

3.1.2 index.js

/*
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-12-28 22:05:02
 * @FilePath: \penk-ui\docs\.vitepress\theme\index.js
 * @email: 492934056@qq.com
 */
import Layout from "./Layout.vue";
import DefaultTheme from "vitepress/theme";

export default {
  ...DefaultTheme,
  // override the Layout with a wrapper component that
  // injects the slots
  Layout: Layout,
};

3.1.3 效果图

这边只是简单的修改了 #aside-outline-before 插槽

在这里插入图片描述

3.2 完整的config.js

用来配置网站基本信息(title,meta),markdown,文档的主题配置如导航,侧边栏,页脚…

vitePress的中文文档不行,可以参考英文文档…
官网文档:点击此处

/*
 * @Author: Penk
 * @LastEditors: Penk
 * @LastEditTime: 2022-12-29 14:33:44
 * @FilePath: \penk-ui\docs\.vitepress\config.js
 * @email: 492934056@qq.com
 */
module.exports = {
  // 网站title
  title: "penk-ui",
  // mete description...
  description: "基于elementPlus二次封装的组件库penk-ui文档",
  // 配置markdown
  markdown: {
    lineNumbers: true,
  },
  themeConfig: {
    // 头部标题
    siteTitle: "Welcome Penk-Ui",
    // 头部logo
    logo: "/favicon.ico",
    // 顶部导航
    nav: [
      { text: "Guide", link: "/guide/getting-started/what-is-penkUi", activeMatch: "/guide/" },
      { text: "团队", link: "/team/index", activeMatch: "/team/" },
      {
        text: "链接",
        items: [
          { text: "npm", link: "https://www.npmjs.com/package/penk-ui" },
          { text: "gitee", link: "https://gitee.com/penk666/penk-ui" },
          { text: "CSDN", link: "https://blog.csdn.net/cs492934056/category_12144231.html" },
        ],
      },
    ],
    // 侧边栏
    sidebar: [
      {
        text: "开始",
        items: [
          { text: "什么是Penk-Ui", link: "/guide/getting-started/what-is-penkUi" },
          { text: "怎么使用", link: "/guide/getting-started/how-to-use" },
        ],
      },
      {
        text: "组件",
        items: [
          { text: "前言", link: "/guide/intro/index.html" },
          { text: "头部搜索栏", link: "/guide/intro/penk-search" },
          { text: "表格栏", link: "/guide/intro/penk-table" },
          { text: "分页栏", link: "/guide/intro/penk-footer" },
          { text: "Form表单栏", link: "/guide/intro/penk-form" },
        ],
      },
      {
        text: "源码解析",
        items: [
          { text: "前言", link: "/guide/analysis/index.html" },
          { text: "头部搜索栏", link: "/guide/analysis/penk-search" },
          { text: "表格栏", link: "/guide/analysis/penk-table" },
          { text: "分页栏", link: "/guide/analysis/penk-footer" },
          { text: "Form表单栏", link: "/guide/analysis/penk-form" },
        ],
      },
    ],
    // 页脚
    footer: {
      message: "Released under the MIT License.",
      copyright: "Copyright © 2022-present Penk",
    },
  },
};

3.3 guide (看个人需求)


3.3.1 目录结构

guide 目录结构如下,主要是用来存放md文件,跟config.js 的一些跳转关联起来

├─analysis
│      index.md
│      penk-footer.md
│      penk-form.md
│      penk-search.md
│      penk-table.md
│
├─getting-started
│      how-to-use.md
│      what-is-penkUi.md
│
└─intro
        index.md
        penk-footer.md
        penk-form.md
        penk-search.md
        penk-table.md

3.3.2 对应的配置

// 侧边栏
sidebar: [
  {
    text: "开始",
    items: [
      { text: "什么是Penk-Ui", link: "/guide/getting-started/what-is-penkUi" },
      { text: "怎么使用", link: "/guide/getting-started/how-to-use" },
    ],
  },
  {
    text: "组件",
    items: [
      { text: "前言", link: "/guide/intro/index.html" },
      { text: "头部搜索栏", link: "/guide/intro/penk-search" },
      { text: "表格栏", link: "/guide/intro/penk-table" },
      { text: "分页栏", link: "/guide/intro/penk-footer" },
      { text: "Form表单栏", link: "/guide/intro/penk-form" },
    ],
  },
  {
    text: "源码解析",
    items: [
      { text: "前言", link: "/guide/analysis/index.html" },
      { text: "头部搜索栏", link: "/guide/analysis/penk-search" },
      { text: "表格栏", link: "/guide/analysis/penk-table" },
      { text: "分页栏", link: "/guide/analysis/penk-footer" },
      { text: "Form表单栏", link: "/guide/analysis/penk-form" },
    ],
  },
],

3.3.3 效果图

在这里插入图片描述

3.4 team


官网文档:点击此处
在这里插入图片描述

3.5 首页 index.md


yaml 语法在文件头部,当然也可以添加其他的纯markdown,或则vue组件…
我这边个人用yaml头部就可以满足个人需求了…

---
layout: home

hero:
  name: Penk-Ui
  text: Vue3 & elementPlus
  tagline: 二次封装组件库...
  image:
    src: ./public/1.jpg
    alt: Penk
  actions:
    - theme: brand
      text: Get Started
      link: /guide/index
    - theme: alt
      text: View on Gitee
      link: https://gitee.com/penk666/penk-ui

features:
  - icon: ⚡️
    title: 简明优先
    details: 对以 markdown 为中心的项目结构,做最简化的配置,帮助你专注于创作。
  - icon: 🖖
    title: Vue 驱动
    details: 享用 Vue + webpack 开发环境,在 markdown 中使用 Vue 组件,并通过 Vue 开发自定义主题。
  - icon: 🛠️
    title: 性能高效
    details: VuePress 将每个页面生成为预渲染的静态 HTML,每个页面加载之后,然后作为单页面应用程序(SPA)运行。
---

效果图
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/66350.html

(0)

相关推荐

半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!