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

已于 2023-11-11 12:19:17 修改
阅读量1.3k 收藏 6
点赞数 1
分类专栏： vue组件封装 文章标签： vue.js 前端 javascript
于 2022-12-29 17:15:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cs492934056/article/details/128482705
版权

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

序号文章
0组件库展示
1通过JSON配置–头部搜索条件的封装组件
2通过JSON配置–表单Table的封装组件
3页脚的封装组件
4通过JSON配置–Form表单的封装组件
5生成npm组件库
6发布到npm
7vitest为组件库添加单元测试
8vuepress为组件库生成文档
9通过github或者gitee pages将组件库文档发布到线上，免费！
10源码地址

# 封面图片

文章目录

组件库开发流程

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)运行。
---

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

Penk是个码农
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue3表格的二次封装
dreamimport的博客
07-07 1285
表格的二次封装vue3 element-plus el-table的二次封装。
Vue3+ts+element-plus 组件的二次封装-- 新增修改Form弹框的二次封装，通过JSON进行配置Form表单，实现高内聚低耦合
Penk的博客
11-29 1864
环境状态vue版本：vue3是否使用 ts：是后台管理系统的网站，一个页面无非就是4个常用业务块头部的搜索栏table表格页脚新增编辑弹框那咋们是不是可以将其进行封装成组件呢？只需要传入一个配置文件就可以了~项目解构如下：封装后的展示图如下：如果能做成这样，是不是页面就会整洁很多？这边虽说是Form弹框，但是还是用到了elementUI的两个组件：1个是el-dialog，1个是el-form。通过JSON进行配置Form表单，实现高内聚低耦合
element plus 二次开发 发布npm
y_f_y的博客
11-15 392
npm不能同名，所以使用自己的element-plus的时候经常要修改各种路径及配置文件。使用时记得修改tsconfig.json的声名文件的引入路径，以及vite.confing.json的样式文件引入路径。比如我发布的包叫mcs-element-plus，就需将element-plus改为mcs-element-plus。npm run dev执行的是play文件夹的package.json的dev命令。dist文件夹中element-plus文件夹中的内容即为要发布到npm的内容。
elementplus自动导入配置,vite项目
最新发布
qq_45797421的博客
06-25 321
【代码】elementplus自动导入配置,vite项目。
基于Vite使用VitePress搭建静态站点博客
梦和远方的博客
11-02 1648
VitePress是一个静态站点生成器(SSG)专为构建快速、以内容为中心的网站而设计。简而言之，VitePress把你的源内容写成降价，对其应用主题，并生成可以在任何地方轻松部署的静态HTML页面。他是VuePress的小兄弟，基于Vite创建。VuePress官方文档后续配置全是基于【默认主题+自定义主题】的框架实现。
vue3 + Element-plus 表格二次封装
qq_42783273的博客
11-15 1892
<template> <el-table :data="dataSource" :summary-method="getSummaries" :show-summary="showSummary" :default-sort="defaultSort"> <template v-for="(col,index) in columns"
如何二次封装Element-Plus table组件
qq_64069576的博客
07-11 1004
这里取了个巧，因为后台接口要传的必传参几乎一样而且都是GET请求，我就把请求也直接页封装在组件里了，只需要传一个请求地址就可以正常渲染，项目的批量删除也在组件内部处理了，且表单数据也可以直接传入到组件的params属性，这样查询时也可以动态更新数据，封装的不是那么的全面，欢迎各位路过的大佬们给出指点和建议，互相学习进步！最近做了一个后台的项目,需要用到大量的表格组件,我就试着把它给封装了一下，记录一下，那么现在开始了。效果：这里分页也在组件处理了，所以也无需自己在弄分页了。
vue3+pinia+element-plus搭建的模板工程
01-04
这里有一个基于最新技术栈构建的系统模板工程，结合了Pinia、Vue3、Element Plus和Webpack 5的强大力量。它为您提供了一个前所未有的开发体验，让您的项目脱颖而出。 这个模板工程不仅仅是一个简单的骨架，它还内置...
vue3企业级项目二次封装el-table、分页
06-28
1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注...
基于Vue3+Element-Plus搭建的商城后台管理系统源码.zip
04-04
Vue3提供了更强大的响应式系统、Composition API等新特性，而Element-Plus则为开发者提供了丰富的组件库，简化了界面设计和交互实现。 1. **Vue3的核心特性** - **Composition API**：Vue3引入了Composition API，...
vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装 上手即用
08-19
vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装 上手即用
element-plus-vite-starter:带有Vite的Element Plus入门套件
05-27
元素加Vite启动器 带有Vite的Element Plus入门套件 项目设置 npm install 编译和热重装以进行开发 npm run dev 编译并最小化生产 npm run build
vue-element-plus-admin:一套基于vue3，element-plus，typesScript，vue-cli4的后台集成方案
03-29
介绍 是一个基于 ， ， ， 的后台解决方案，已经解决了和的写法和优点。内置了动态路由，权限验证，，典型的业务模型，丰富的功能组件，并提供了多页配置，开箱即用，可以用作项目的启动模版。它可以帮助您快速构建企业级中后台产品原型，也可以作为一个示例，用于学习。 因为本项目集成了很多你可能用不到的功能，会造成过多的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。 基础模版-template分支 单页模版-单页分支 功能 - 登录 / 注销 - 权限验证 - 页面权限 - 指令权限 - 权限配置 - 多环境 - 多页配置 - 引导页 - 全局功能 - 三种不同风格 layout 布局 - 动态侧边栏（支持多级路由嵌套） - 动态面包屑 - 快捷导航(标签页) - Svg Sprite 图标 - 本地 mock 数据 - Scree
一个 Vue3 + TS + Vite + Element-Plus 开箱即用的企业级开发模板
07-13
UI框架是 Element-Plus 它已经支持暗黑模式 CSS框架是 TailwindCSS 状态管理是 Pinia ESlint+Prettier 已经配置完成 Git 提交前验证以及提交规范已做好 封装的比较完善的 axios，有一丢丢的学习成本 Vue 和 Vue...
elementPlus的table二次封装
outsider76557的博客
02-14 3583
公司业务可能需要进行一些组件的封装，基于第三方ElementPlus框架，进行符合UI设计原型的组件封装，这篇主要讲解Table表格的封装，包含模拟对接后端数据。主要目的是梳理封装的思路，下面展示代码不包含样式代码。
使用vitepress构建组件库文档
Kylin的博客
11-18 3524
使用vitepress构建组件库文档 前期调研 Vitepress 官方文档：https://vitepress.vuejs.org/ Vitepress是在Vite之上构建的Vue驱动的静态站点生成器。 Vitepress 被称为“ Vuepress的小弟弟”，它比同类产品具有一些优势。 建立在Vite而非Webpack上，因此启动时间，热重装等更快 使用Vue3来减少JS的有效负载 轻量级 Vitepress 能够实现这些目标的一个原因是，它比Vuepress 更具体，而 Vue
尤小右：VitePress 初步实现小目标，极简静态站点生成器
前端开发博客
05-02 3704
VitePress：Vite & Vue 驱动的静态网站生成器 https://github.com/vuejs/vitepressVuePress的小兄弟，建立在vite的基础...
vue2 怎么用vite_利用 vite 快速搭建 vue3 组件库
weixin_30110807的博客
12-23 2975
利用 vite 快速搭建 vue3 组件库背景vue3 出来已经有一段时间了，刚好前端时间做了 vue-general-components，在想着要不也把 vue3 的做一下；社区上有很多相关的框架 ant-design-vue 、element-plus、elenext 等，而我对里面的技术以及先有 vue3 社区中一些框架进行了一些分析选择，并最终运用到新的项目 vite-component...
如何在 Vite 中使用 Element UI + Vue 3
前端之美的博客
01-15 5428
在上篇文章《2021新年 Vue3.0 + Element UI 尝鲜小记》里，我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目，而 Vue CLI 实际上为我们生成了一个我们熟悉的 Webpack 工程项目。 Webpack 无需过多介绍，一个十分强大的打包工具。但 Webpack 也有不足的地方，比如第一次打包需要很长时间，修改代码之后的热更新速度较慢。 随着 Vue 3 一起推出的还有一个强大的新一代打包工具 Vite, 一个面向现代浏览器，基于原生模块系统 ESMo
vue3+ts+vite+elementplus+Router+axios封装请求，配置开发环境，测试环境和生产环境
01-26
以下是使用Vue3、TypeScript、Vite、Element Plus、Router和Axios进行请求封装，并配置开发环境、测试环境和生产环境的步骤： 1. 首先，确保你已经安装了Node.js和npm。 2. 创建一个新的Vue项目，并选择Vue3作为模板： ```shell npm create vite@latest my-project cd my-project npm install ``` 3. 安装所需的依赖包： ```shell npm install vue-router@next axios element-plus npm install --save-dev @types/node ``` 4. 在项目根目录下创建一个`.env`文件，用于配置不同环境的变量。在该文件中，可以定义不同环境下的API地址等配置信息。例如： ``` # 开发环境 VITE_API_BASE_URL=http://localhost:3000/api # 测试环境 VITE_API_BASE_URL=http://test.example.com/api # 生产环境 VITE_API_BASE_URL=http://api.example.com/api ``` 5. 创建一个`src/api`文件夹，并在其中创建一个`request.ts`文件，用于封装请求。在该文件中，可以使用Axios发送请求，并根据不同环境的配置获取API地址。例如： ```typescript import axios from 'axios'; const instance = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 5000, }); export const get = (url: string, params?: any) => { return instance.get(url, { params }); }; export const post = (url: string, data?: any) => { return instance.post(url, data); }; ``` 6. 在`src/router`文件夹中创建一个`index.ts`文件，用于配置路由。在该文件中，可以定义路由的路径和对应的组件。例如： ```typescript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, // 其他路由配置... ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 7. 在`src/main.ts`文件中，引入所需的依赖，并配置Vue应用。例如： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App) .use(router) .mount('#app'); ``` 8. 在`src/App.vue`文件中，使用Element Plus组件和路由进行页面渲染。例如： ```html <template> <div> <router-view></router-view> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'App', }); </script> <style> /* 样式 */ </style> ``` 9. 运行开发环境： ```shell npm run dev ``` 10. 在浏览器中访问`http://localhost:3000`，即可看到Vue应用的页面。 11. 根据需要，在`src/views`文件夹中创建其他页面组件，并在路由配置中添加对应的路径和组件。 12. 根据需要，在`src/components`文件夹中创建其他组件，并在页面组件中引入和使用。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Penk是个码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值