程序员优雅哥-优快云博客

原创 Vue3 企业级优雅实战 - 组件库框架 - 12 发布开源组件库

前面使用了 11 篇文章分享基于 vue3 、Monorepo 的组件库工程完整四件套（组件库、文档、example、cli）的开发、构建及组件库的发布。本文属于这 11 篇文章的扩展 —— 如何发布到 GitHub 上以及如何快速利用 GitHub 发布组件库文档。这样优雅哥的《组件库框架》系列便形成了一个闭环：从开发，到开源。在开始本文之前，请您先注册 GitHub 账号并登录。

2023-02-10 14:23:18 877 1

原创 Vue3 企业级优雅实战 - 组件库框架 - 11 组件库的打包构建和发布

回顾第一篇文章中谈到的组件库的几个方面，只剩下最后的、也是最重要的组件库的打包构建、本地发布、远程发布了。

2023-02-09 16:33:21 1656

原创 Vue3 企业级优雅实战 - 组件库框架 - 10 实现组件库 cli - 下

上文创建了一堆 utils、component-info，并实现了新组件模块相关目录和文件的创建。本文继续实现后面的内容。

2023-02-08 15:51:03 590

原创 Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上

创建新组件模块；创建样式 scss 文件并导入；在组件库入口模块安装新组件模块为依赖，并引入新组件；创建组件库文档和 demo。本文剩下的部分分享第一点，其余三点下一篇文章分享。在src下创建service目录，上面四个内容拆分在不同的 service 文件中，并统一由调用，这样层次结构清晰，也便于维护。首先在目录下创建文件，该文件用于创建新组件模块创建新组件的目录；使用 pnpm init 初始化 package.json 文件；

2022-12-27 16:27:40 969 3

原创 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 672

原创【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建

前面完成了组件库的开发环境搭建和 example，咱们可以在 example 中通过业务驱动组件的开发和完善。但组件库开发的目的是给其他开发人员使用，这时候就需要通过文档来展示组件库的使用以及各个组件的 API、方法、插槽等。本文在前面文章的基础上继续实现组件库文档的开发和构建。组价库的文档咱们使用 vitepress 来实现，在之前的文章《vitepress搭建组件库文档》已经详细介绍了的使用，该文章中谈到的内容本文就快速略过。

2022-11-18 15:37:58 1171 2

原创【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境

前面用了大量篇幅介绍组件库的开发环境搭建，包括：创建组件、创建组件库入口、组件库样式架构、组件库公共包，做了一大堆工作，还不能预览示例组件foo，本文便搭建 example 开发环境和打包构建，并在 example 中使用组件库。

2022-11-16 15:19:33 1045 1

原创【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包

本文继续组件库开发环境的搭建，前面两篇分别介绍了组件库中组件项目的初始化、组件库 CSS 架构，本文介绍通用工具库的搭建。在组件开发过程中，可能会调用一些通用的工具函数，这些工具函数便可以提取到一个独立的 npm 包中。

2022-11-15 14:36:01 1027 1

原创【猿创征文】 Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构

在前一篇文章中分享了搭建组件库的基本开发环境、创建了foo组件模块和组件库入口模块，本文分享组件库的样式架构设计。

2022-11-14 14:37:44 1024 1

原创【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境

在中定义foo组件的propsimport {msg : {上面的代码定义了一个非必填的属性msg，并使用vue中提供的提取props的类型。import {该文件将组件导入并导出，并且为该组件提供install方法。这样便完成了foo组件的代码编写。在下创建index.tsimport {

2022-11-11 14:54:12 834 1

原创【猿创征文】 Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root

上文已经搭建了的基础环境，本文对进行初始化配置，包括：通用配置文件、公共依赖、ESLint。

2022-11-10 14:59:52 794 1

原创【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo

前两篇文章分享了基于 vite3 vue3 的组件库基础工程和用于快速创建该工程的工具yyg-cli，但在中大型的企业级项目中，通常会自主搭建这些脚手架或加速器。优雅哥希望每位前端伙伴能知其所以然，故接下来的文章将进入Vue3 企业级优雅实战系列，整个系列将包括五大部分：首先会分享如何从 0 开始搭建一套组件库基础工程，即如何从 0 实现。

2022-11-07 14:15:21 826 1

原创猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目

yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架。在 npm 上发布了两个月，11月1日进行了大升级，发布1.1.0 版本：支持创建 vue3 全家桶项目和 vue3 组件库项目。

2022-11-03 16:14:05 830 5

原创猿创征文｜分享一个实用的 vite + vue3 组件库脚手架工具，提升开发效率

无论是 vue2 全家桶还是 vue3 + vite + TypeScript，组件库的使用几乎大家都会，但自己开发一个独立组件库就不是每个人都掌握的，因为搭建组件库的基础开发环境，就会让很多同学望而却步。这几天程序员优雅哥在这个脚手架的基础上，大家可以使用内置的 cli 快速创建新组件，按照套路开发组件及文档即可。脚手架很大程度上简化了环境的搭建、打包的配置、类型定义的抽取等工具，，大家可以将注意力集中到组件本身的开发上。脚手架采用风格，使用作为包管理工具。

2022-11-01 16:24:31 732 1

原创 Vitepress搭建组件库文档（下）—— 组件 Demo

上文《Vitepress搭建组件库文档（上）—— 基本配置》已经讨论了 vitepress 搭建组件库文档的基本配置，包括站点 Logo、名称、首页home布局、顶部导航、左侧导航等。本文进入最重要的部分 —— 如何像那样一遍代码就可以展示组件的效果和源代码。

2022-10-27 15:05:05 3949 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 5171

原创 Vue3 SFC 和 TSX 方式自定义组件实现 v-model

的本质，咱可以分别使用 SFC（.vue 文件）和 TSX（.tsx）方式定义一个组件。上面部分使用 .vue 编写的组件，下面部分使用 .tsx 编写的组件，两者独立绑定。是 vue3 中的一个内置指令，很多表单元素都可以使用这个属性，如。等，咱可以在自定义组件中实现。包括两个输入框，分别是“姓”（，运行效果完全一致。

2022-10-21 14:30:49 2630

原创 Vue3 SFC 和 TSX 方式调用子组件中的函数

在开发中会遇到这样的需求：获取子组件的引用，并调用子组件中定义的方法。如封装了一个表单组件，在父组件中需要调用这个表单组件的引用，并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能，首先要在子组件中暴露父组件需要调用的函数，然后去父组件中获取子组件的引用，最后通过子组件的引用调用子组件暴露的方法。

2022-10-20 16:02:00 905

原创 Vue3 JS 与 SCSS变量相互使用

el-menuel-menu本文提供解决上述问题的思路。

2022-10-17 15:12:57 3466 1

原创 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 635

原创 Vue3 Vite3 状态管理 pinia基本使用、持久化、在路由守卫中使用状态

在）一文中整合了pinia，有不少伙伴不知道pinia是什么，本文简单介绍pinia。主要包括三方面内容：piniapiniapiniavue-routerpinia文中的 demo 仍然基于 vite。

2022-10-10 14:49:15 3102

原创 Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇）

在项目或产品的迭代过程中，通常会有多套环境，常见的有：devsituatpreprod环境之间配置可能存在差异，如接口地址、全局参数等。在基于的项目中只需要添加.env.xxx文件，然后在的scripts启动或打包命令中指定mode参数即可，获取环境变量时使用。vite使用方式类似，但获取环境变量使用。

2022-10-06 17:06:43 4504 2

原创 vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

在一文整合了，并将中提供的图标进行全局注册，这样可以很方便的延续Element UI的风格 —— 通过）。在真实的企业级开发中，内置的图标通常很难满足业务需求，项目中需要引入大量的 SVG 图标资源，本文描述如何在 Vue3 + Vite2 环境中使用 SVG 图标，封装一个支持本地 SVG 图标和在线 SVG 图标的组件。文中实现的组件会内置到脚手架中（通过yyg命令行创建的项目内置该组件），如果在此之前已经通过 yyg-cli 创建了项目，可以按照本文的步骤封装 SVG 图标组件。

2022-10-04 21:03:14 1249

原创 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 742

原创 JS 模块化 - 04 CMD 规范与 Sea JS

CMD：，通用模块定义。与AMD规范类似，也是用于浏览器端，异步加载模块，一个文件就是一个模块，当模块使用时才会加载执行。其语法与 AMD 规范很类似。定义模块使用definedefine函数接收的参数factory可以是一个对象、字符串或函数。define({当factory})- require：函数，可以通过该函数加载其他模块- exports：对象，用于向外部提供接口，即可以通过该对象导出对象、属性或函数，将本模块内部的变量、函数等暴露给其他模块使用。

2022-09-27 16:23:43 214

原创 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 424

原创 JS 模块化 - 02 Common JS 模块化规范

Common JS 是模块化规范之一。每个文件都是一个作用域，文件里面定义的变量/函数都是私有的，对其他模块不可见。Common JS 规范在 Node 端和浏览器端有不同的实现。或exports加载模块：require()Node：Node JS 支持 Common JS 规范；浏览器：需要使用browserify编译。

2022-09-22 17:05:54 317

原创 JS 模块化- 01 模块化前传（举例：高质量男和拼团名媛相亲）

前端技术的发展不断融入了很多后端的思想，逐步形成前端的 ”四个现代化“：工程化、模块化、规范化、流程化。这个主题介绍模块化，主要内容包括模块化前传（早期模块化的实现）、模块化的四个规范（Common JS、AMD、CMD、ESM）。本文就聊聊早期的模块化。

2022-09-20 18:24:40 323

原创 Vue3 封装 Element Plus Menu 无限级菜单组件【建议收藏】

使用 element-plusel-menu组件实现菜单，主要包括三个组件：el-menu：整个菜单；：含有子菜单的菜单项；：没有子菜单的菜单项（最末级）；结合菜单的属性和展示效果，可以得到每个菜单项包括：菜单名称、菜单图标、菜单唯一标识、子菜单列表四个属性。/*** 菜单项/*** 菜单名称/*** 菜单编码（对应 el-menu-item / el-sub-menu 组件的唯一标识 index 字段）/*** 菜单的图标*/ icon?: string;/**

2022-09-16 21:05:01 6879 1

原创基于 vite 创建 vue3 全家桶项目（vite + vue3 + tsx + pinia）

在src目录下创建store，并在src/store中创建demo.ts文件。该文件中咱们使用的方式实现store。import {

2022-09-13 16:14:29 12133 1

原创使用 Spring Boot Admin 监控应用状态【建议收藏】

当应用状态异常时，Spring Boot Admin 会自动实时告警，而告警的方式可以由我们自定义。这里模拟日志的方式。在 config 包下创建类，该类继承自} }此时，注册到这个Admin Server的其他客户端启动、停止等，当前应用都会监听到事件，输出日志。实战中可以在这里面发送邮件、消息等。

2022-09-09 14:50:01 796

原创猿创征文 | Docker 环境 Nacos2 MySQL8

本文介绍 docker 环境下安装并单机运行 Nacos2，使用 docker 环境下的 MySQL 8 存储数据。

2022-09-08 15:16:28 844 3

原创集成 Redis & 异步任务-SpringBoot 2.7 .2实战基础

SpringBoot 2.7 .2实战基础 - 09 - 集成 Redis & 异步任务

2022-09-06 15:03:16 533

原创猿创征文 | npm 和 maven 使用 Nexus3 私服

文分别介绍 npm（前端）和 maven（后端）如何使用 nexus3 作为私服。

2022-09-02 15:35:27 312 1

原创猿创征文 | Docker 搭建 Nexus3 私服

因为在开发过程中，某些包是远端的、某些包是内部私服中的，这样就对应了两个地址，使用仓库组将 hosted 和 group 聚合，暴露为一个地址。1）hosted：宿主仓库，即本地仓库，该仓库存放本地项目产生的构建，无论是团队内部开发了通用组件库、公共 jar 等，都是发布到这里面。由于后面要分别讲述 JS 和 Java 使用 Nexus3 私服，两者都涉及到仓库创建，故单独把这一块提出来，后面便不再赘述。按钮进入创建用户界面。nexus3 支持创建角色和用户，可以创建一个角色，让该角色只能发布包到私服。..

2022-09-01 16:55:40 469 1

空空如也

空空如也