divine-plus v1.1.34

Divine-Plus

基于 vue3 + webpack5 + ts + vuepress2 构建的组件库

包含了 组件 指令 hooks 等效率工具

Homepage

官网链接 - 说明文档

Usage

// install

npm install divine-plus -S

// main.ts

import DivinePlus from "divine-plus";
import "divine-plus/css/index.css";

const app = createApp(App);
app.use(DivinePlus);
app.mount("#app");

注意: 不要使用 cnpm 安装，vuepress 依赖 vite 很容易出错

Test

1
Download
git clone git@github.com:woow-wu7/8-divine-plus.git

2
Local Testing
npm run dev // or npm run test:dev

3
Document
npm run docs:dev

Discussions

GitHub Discussions - 讨论区链接

Contributors

Blog

[封装 01-设计模式] 设计原则 和 工厂模式(简单抽象方法) 适配器模式 装饰器模式
[封装 02-设计模式] 命令模式 享元模式 组合模式 代理模式
[封装 03-设计模式] Decorator 装饰器模式在前端的应用
[封装 04-设计模式] Publish Subscribe 发布订阅模式在前端的应用
[封装 05-ElementUI 源码 01] Row Col Container Header Aside MainFooter
[封装 06-Divine-plus] 从 0 开始封装一个 VUE3-UI 组件库

Source Code Analysis

(1) element-ui 源码分析 element-ui^2

• element-ui 源码分析-仓库

(2) element-plus 源码分析 element-plus^2.26

• element-plus 源码分析-仓库

Other Source Code Analysis

(1) redux 和 react-redux 源码分析 redux^4.0.5

• redux 源码分析-仓库
• redux 源码分析-我的掘金博客

(2) 手写 webpack Compiler 源码 webpack^4.42.0

• 手写 Compiler 源码-仓库
• 手写 Compiler 源码-我的掘金文章

(3) axios 源码分析 axios^0.20.0

• axios 源码分析-仓库
• axios 源码分析-我的掘金文章
• cancel 取消请求的原理，interceptor 拦截器的原理 - 两个重点掌握

(4) vue 源码分析 vue^2.6.12

• vue 源码分析-仓库
• vue 源码分析-新建仓库
• vue 源码分析-我的掘金文章

(5) vuex 源码分析 v2.6.10

• vuex 源码分析-我的掘金文章

(6) react 源码分析 react^17.0.3

• react 源码分析-仓库
• react 源码分析-我的掘金文章
• js 实现单向链表 - 源码
• 手写 hook 调度-useState 实现 - 源码仓库
• 手写 hook 调度-useState 实现 - 思维导图

(7) a-hooks2.0 源码分析 a-hooks^2.10.9

• a-hooks 源码分析 - 仓库

(8) a-hooks3.0 源码分析 a-hooks^2.10.9

• a-hooks 源码分析 - 仓库

(9) koa 源码分析 koa^2.13.1

• koa 源码分析 - 仓库
• koa 源码调试 - 仓库
• 注意分析：( axios 拦截器 + redux 中间件 + koa 中间件 ) 三者的相同点和区别

(10) badJs-report 源码分析

• badJs-report 源码分析-仓库

(11) element-ui 源码分析

• element-ui 源码分析-仓库

(12) element-plus 源码分析 element-plus^2.26

• element-plus 源码分析-仓库

(13) vant vant^3.4.5

• vant3 源码分析-仓库

(14) Diff-virtualDOM

• 手写 diff 算法-snabbdom