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

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

文章目录

组件库开发流程
简介

组件库开发流程

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

Vue3+element-plus+vite 组件的二次封装，封装了头部的搜索条件栏，tabel栏，分页栏，form表单，都设置成了通过json可配置项，方便复用；
封装好了就开始打包，并且进行本地测试；
组件库发布到npm；
添加vitest单元测试框架；
添加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)运行。
---