- 博客(58)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue3 企业级优雅实战 - 组件库框架 - 12 发布开源组件库
前面使用了 11 篇文章分享基于 vue3 、Monorepo 的组件库工程完整四件套(组件库、文档、example、cli)的开发、构建及组件库的发布。本文属于这 11 篇文章的扩展 —— 如何发布到 GitHub 上以及如何快速利用 GitHub 发布组件库文档。这样优雅哥的《组件库框架》系列便形成了一个闭环:从开发,到开源。在开始本文之前,请您先注册 GitHub 账号并登录。
2023-02-10 14:23:18
794
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue3 企业级优雅实战 - 组件库框架 - 11 组件库的打包构建和发布
回顾第一篇文章中谈到的组件库的几个方面,只剩下最后的、也是最重要的组件库的打包构建、本地发布、远程发布了。
2023-02-09 16:33:21
1604
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue3 企业级优雅实战 - 组件库框架 - 10 实现组件库 cli - 下
上文创建了一堆 utils、component-info,并实现了新组件模块相关目录和文件的创建。本文继续实现后面的内容。
2023-02-08 15:51:03
530
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上
创建新组件模块;创建样式 scss 文件并导入;在组件库入口模块安装新组件模块为依赖,并引入新组件;创建组件库文档和 demo。本文剩下的部分分享第一点,其余三点下一篇文章分享。在src下创建service目录,上面四个内容拆分在不同的 service 文件中,并统一由调用,这样层次结构清晰,也便于维护。首先在目录下创建文件,该文件用于创建新组件模块创建新组件的目录;使用 pnpm init 初始化 package.json 文件;
2022-12-27 16:27:40
928
3
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue3 企业级优雅实战 - 组件库框架 - 8 搭建组件库 cli
前面的文章分享了组件库的开发、example、组件库文档,本文分享组件库 cli 开发。回顾一个新组件的完整开发步骤:1 在 packages 目录下创建组件目录 xxx:1.1 使用 pnpm 初始化 package.json,修改 name 属性;1.2 在该目录中创建 src 目录和 index.ts 文件;1.3 在 src 目录下创建 types.ts 文件和 index.tsx / index.vue 文件;2 在组件库的入口模块 packages/yyg-demo-ui:2.1 使用
2022-12-06 17:43:41
612
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建
前面完成了组件库的开发环境搭建和 example,咱们可以在 example 中通过业务驱动组件的开发和完善。但组件库开发的目的是给其他开发人员使用,这时候就需要通过文档来展示组件库的使用以及各个组件的 API、方法、插槽等。本文在前面文章的基础上继续实现组件库文档的开发和构建。组价库的文档咱们使用 vitepress 来实现,在之前的文章《vitepress搭建组件库文档》已经详细介绍了的使用,该文章中谈到的内容本文就快速略过。
2022-11-18 15:37:58
1108
2
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境
前面用了大量篇幅介绍组件库的开发环境搭建,包括:创建组件、创建组件库入口、组件库样式架构、组件库公共包,做了一大堆工作,还不能预览示例组件foo,本文便搭建 example 开发环境和打包构建,并在 example 中使用组件库。
2022-11-16 15:19:33
992
1
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包
本文继续组件库开发环境的搭建,前面两篇分别介绍了组件库中组件项目的初始化、组件库 CSS 架构,本文介绍通用工具库的搭建。在组件开发过程中,可能会调用一些通用的工具函数,这些工具函数便可以提取到一个独立的 npm 包中。
2022-11-15 14:36:01
965
1
原创 【猿创征文】 Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
在前一篇文章中分享了搭建组件库的基本开发环境、创建了foo组件模块和组件库入口模块,本文分享组件库的样式架构设计。
2022-11-14 14:37:44
965
1
原创 【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
在中定义foo组件的propsimport {msg : {上面的代码定义了一个非必填的属性msg,并使用vue中提供的提取props的类型。import {该文件将组件导入并导出,并且为该组件提供install方法。这样便完成了foo组件的代码编写。在下创建index.tsimport {
2022-11-11 14:54:12
794
1
原创 【猿创征文】 Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root
上文已经搭建了的基础环境,本文对进行初始化配置,包括:通用配置文件、公共依赖、ESLint。
2022-11-10 14:59:52
759
1
原创 【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
前两篇文章分享了基于 vite3 vue3 的组件库基础工程和用于快速创建该工程的工具yyg-cli,但在中大型的企业级项目中,通常会自主搭建这些脚手架或加速器。优雅哥希望每位前端伙伴能知其所以然,故接下来的文章将进入Vue3 企业级优雅实战系列,整个系列将包括五大部分:首先会分享如何从 0 开始搭建一套组件库基础工程,即如何从 0 实现。
2022-11-07 14:15:21
740
1
原创 猿创征文 | 开箱即用 yyg-cli:快速创建 vue3 组件库和vue3 全家桶项目
yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架。在 npm 上发布了两个月,11月1日进行了大升级,发布1.1.0 版本:支持创建 vue3 全家桶项目和 vue3 组件库项目。
2022-11-03 16:14:05
769
5
原创 猿创征文|分享一个实用的 vite + vue3 组件库脚手架工具,提升开发效率
无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的使用几乎大家都会,但自己开发一个独立组件库就不是每个人都掌握的,因为搭建组件库的基础开发环境,就会让很多同学望而却步。这几天程序员优雅哥在这个脚手架的基础上,大家可以使用内置的 cli 快速创建新组件,按照套路开发组件及文档即可。脚手架很大程度上简化了环境的搭建、打包的配置、类型定义的抽取等工具,,大家可以将注意力集中到组件本身的开发上。脚手架采用风格,使用作为包管理工具。
2022-11-01 16:24:31
647
1
原创 Vitepress搭建组件库文档(下)—— 组件 Demo
上文 《Vitepress搭建组件库文档(上)—— 基本配置》已经讨论了 vitepress 搭建组件库文档的基本配置,包括站点 Logo、名称、首页home布局、顶部导航、左侧导航等。本文进入最重要的部分 —— 如何像那样一遍代码就可以展示组件的效果和源代码。
2022-10-27 15:05:05
3627
1
原创 Vitepress搭建组件库文档(上)—— 基本配置
在vite出现以前,vuepress是搭建组件库文档不错的工具,支持以 Markdown 方式编写文档。伴随着vite的发展,vitepress已经到了版本,很多博客还是基于0.x版本,1.0.0与0.22配置略有差别,尤其是一些vitepress插件不支持1.0.0版本,如 vitepress-theme-demo(用它可以方便的编写组件 demo)。虽然现在 1.0.0 还是alpha版本,咱也可以尝试使用,反正遇到什么坑就去填什么坑就可以了呗。
2022-10-25 17:23:56
4972
原创 Vue3 SFC 和 TSX 方式自定义组件实现 v-model
的本质,咱可以分别使用 SFC(.vue 文件)和 TSX(.tsx)方式定义一个组件。上面部分使用 .vue 编写的组件,下面部分使用 .tsx 编写的组件,两者独立绑定。是 vue3 中的一个内置指令,很多表单元素都可以使用这个属性,如。等,咱可以在自定义组件中实现。包括两个输入框,分别是“姓”(,运行效果完全一致。
2022-10-21 14:30:49
2522
原创 Vue3 SFC 和 TSX 方式调用子组件中的函数
在开发中会遇到这样的需求:获取子组件的引用,并调用子组件中定义的方法。如封装了一个表单组件,在父组件中需要调用这个表单组件的引用,并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能,首先要在子组件中暴露父组件需要调用的函数,然后去父组件中获取子组件的引用,最后通过子组件的引用调用子组件暴露的方法。
2022-10-20 16:02:00
731
原创 vite vue3 规范化与Git Hooks - 基于 vite 创建 vue3 全家桶项目(续篇)
hooks意思是“钩子”,也就是在执行某个操作之前或之后要做的事。git hooks 就是 git 操作的钩子,在 git 执行某个操作之前或之后要做的事,如 git 提交后、提交后、合并前、合并后、rebase前、rebase后等。pre-commitpre-commit是git commit执行前的钩子,会在获取提交描述信息且提交前被调用,根据该钩子决定是否拒绝提交。可以在这个钩子中对代码进行 eslint 检查。commit-msgcommit-msg也是git commit。
2022-10-14 14:59:25
525
原创 Vue3 Vite3 状态管理 pinia基本使用、 持久化、在路由守卫中使用状态
在)一文中整合了pinia,有不少伙伴不知道pinia是什么,本文简单介绍pinia。主要包括三方面内容:piniapiniapiniavue-routerpinia文中的 demo 仍然基于 vite。
2022-10-10 14:49:15
2930
原创 Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇)
在项目或产品的迭代过程中,通常会有多套环境,常见的有:devsituatpreprod环境之间配置可能存在差异,如接口地址、全局参数等。在基于的项目中只需要添加.env.xxx文件,然后在的scripts启动或打包命令中指定mode参数即可,获取环境变量时使用。vite使用方式类似,但获取环境变量使用。
2022-10-06 17:06:43
4336
2
原创 vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇
在一文整合了,并将中提供的图标进行全局注册,这样可以很方便的延续Element UI的风格 —— 通过)。在真实的企业级开发中,内置的图标通常很难满足业务需求,项目中需要引入大量的 SVG 图标资源,本文描述如何在 Vue3 + Vite2 环境中使用 SVG 图标,封装一个支持本地 SVG 图标和在线 SVG 图标的组件。文中实现的组件会内置到脚手架中(通过yyg命令行创建的项目内置该组件),如果在此之前已经通过 yyg-cli 创建了项目,可以按照本文的步骤封装 SVG 图标组件。
2022-10-04 21:03:14
1174
原创 JS 模块化 - 05 ES Module & 4 大规范总结
默认导出:export default xxx按需导出 export const xxx导入模块:默认导入: import xxx from ‘xxx’按需导入 import { xxx } from ‘xxx’01- 模块化前传02 - Common JS 规范03 - AMD 规范(Require JS 实现)04 - CMD 规范 (Sea JS 实现)05 - ESM 规范模块化相关 demo 源码可以 github 搜索关键词或联系程序员优雅哥获取。
2022-09-28 16:00:10
712
原创 JS 模块化 - 04 CMD 规范与 Sea JS
CMD:, 通用模块定义。与AMD规范类似,也是用于浏览器端,异步加载模块,一个文件就是一个模块,当模块使用时才会加载执行。其语法与 AMD 规范很类似。定义模块使用definedefine函数接收的参数factory可以是一个对象、字符串或函数。define({当factory})- require:函数,可以通过该函数加载其他模块- exports:对象,用于向外部提供接口,即可以通过该对象导出对象、属性或函数,将本模块内部的变量、函数等暴露给其他模块使用。
2022-09-27 16:23:43
184
原创 JS 模块化 - 03 AMD 规范与 Require JS
AMD规范,全称,异步模块定义,模块之间的依赖可以被异步加载。AMD 规范由 Common JS 规范演进而来,前文介绍 Common JS 规范时说过,浏览器端无法直接使用 Common JS,需要使用browserify编译后才能运行。而 AMD 规范规范则专注于浏览器端。AMD 规范定义模块使用definedefine(id?- id:非必填,模块的名字。如果没有传该参数,模块的名字默认为模块加载器请求的指定脚本的名字。
2022-09-23 11:18:09
388
原创 JS 模块化 - 02 Common JS 模块化规范
Common JS 是模块化规范之一。每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见。Common JS 规范在 Node 端和浏览器端有不同的实现。或exports加载模块:require()Node:Node JS 支持 Common JS 规范;浏览器:需要使用browserify编译。
2022-09-22 17:05:54
281
原创 JS 模块化- 01 模块化前传 (举例:高质量男和拼团名媛相亲)
前端技术的发展不断融入了很多后端的思想,逐步形成前端的 ”四个现代化“:工程化、模块化、规范化、流程化。这个主题介绍模块化,主要内容包括模块化前传(早期模块化的实现)、模块化的四个规范(Common JS、AMD、CMD、ESM)。本文就聊聊早期的模块化。
2022-09-20 18:24:40
293
原创 Vue3 封装 Element Plus Menu 无限级菜单组件【建议收藏】
使用 element-plusel-menu组件实现菜单,主要包括三个组件:el-menu:整个菜单;:含有子菜单的菜单项;:没有子菜单的菜单项(最末级);结合菜单的属性和展示效果,可以得到每个菜单项包括:菜单名称、菜单图标、菜单唯一标识、子菜单列表四个属性。/*** 菜单项/*** 菜单名称/*** 菜单编码(对应 el-menu-item / el-sub-menu 组件的唯一标识 index 字段)/*** 菜单的图标*/ icon?: string;/**
2022-09-16 21:05:01
6457
1
原创 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)
在src目录下创建store,并在src/store中创建demo.ts文件。该文件中咱们使用的方式实现store。import {
2022-09-13 16:14:29
11580
1
原创 使用 Spring Boot Admin 监控应用状态【建议收藏】
当应用状态异常时,Spring Boot Admin 会自动实时告警,而告警的方式可以由我们自定义。这里模拟日志的方式。在 config 包下创建类,该类继承自} }此时,注册到这个Admin Server的其他客户端启动、停止等,当前应用都会监听到事件,输出日志。实战中可以在这里面发送邮件、消息等。
2022-09-09 14:50:01
687
原创 猿创征文 | Docker 环境 Nacos2 MySQL8
本文介绍 docker 环境下安装并单机运行 Nacos2,使用 docker 环境下的 MySQL 8 存储数据。
2022-09-08 15:16:28
813
3
原创 集成 Redis & 异步任务-SpringBoot 2.7 .2实战基础
SpringBoot 2.7 .2实战基础 - 09 - 集成 Redis & 异步任务
2022-09-06 15:03:16
496
原创 猿创征文 | npm 和 maven 使用 Nexus3 私服
文分别介绍 npm(前端)和 maven(后端)如何使用 nexus3 作为私服。
2022-09-02 15:35:27
260
1
原创 猿创征文 | Docker 搭建 Nexus3 私服
因为在开发过程中,某些包是远端的、某些包是内部私服中的,这样就对应了两个地址,使用仓库组将 hosted 和 group 聚合,暴露为一个地址。1)hosted:宿主仓库,即本地仓库,该仓库存放本地项目产生的构建,无论是团队内部开发了通用组件库、公共 jar 等,都是发布到这里面。由于后面要分别讲述 JS 和 Java 使用 Nexus3 私服,两者都涉及到仓库创建,故单独把这一块提出来,后面便不再赘述。按钮进入创建用户界面。nexus3 支持创建角色和用户,可以创建一个角色,让该角色只能发布包到私服。..
2022-09-01 16:55:40
416
1
原创 猿创征文 | Docker 安装 MySQL、Redis
全部执行完毕后,可以尝试使用 MySQL Workbench 或 IDEA 或 Navicat 连接 MySQL。启动容器,指定3306 端口映射和上面的三个目录映射,同时也指定 MySQL root 账户的密码为。容器启动后,可以进入容器修改 MySQL 的一些权限,使得外部可以连接。进入上面创建的 mysql/conf 目录下,创建配置文件。后便在命令行中进入了 MySQL。...
2022-08-31 15:15:17
248
1
原创 01 - 快速体验 Spring Security 5.7.2 | 权限管理基础
在前面 SpringBoot 2.7.2 的系列文章中,已经创建了几个 computer 相关的接口,这些接口直接通过 Spring Doc 或 POSTMAN 就可以访问。访问该服务可以获取 id 为 1 的电脑详情。接下来的文章就使用 Spring Security 实现用户认证和授权。...
2022-08-29 15:14:14
2265
1
原创 消息摘要(数字摘要)的理解 -查了很多资料后的感悟
在开发过程中经常会遇到 MD5、SHA1、SHA256 等词语,这些是加密算法吗?严格意义上讲,这些并不是加密算法,而是消息摘要算法。咱就用人听得懂的话来聊聊“消息摘要”。
2022-08-26 16:13:58
2117
原创 Vue 3-150行代码 实现红绿灯效果实操案例
昨天刷视频,都是关于新国标红绿灯的,看大家议论纷纷,下班就用150行代码通过Vue组件实践红绿模拟演示,视频也跟大家展示过了。今天接着更新图文版本,大家跟着优雅哥通过该案例实操模拟一下。
2022-08-24 17:23:28
1209
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人