<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[youyacoder的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/youyacoder</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; youyacoder]]></copyright><item><title><![CDATA[Vue3 企业级优雅实战 - 组件库框架 - 12 发布开源组件库]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/128969316</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/128969316</guid><author>youyacoder</author><pubDate>Fri, 10 Feb 2023 14:23:18 +0800</pubDate><description><![CDATA[前面使用了 11 篇文章分享基于 vue3 、Monorepo 的组件库工程完整四件套（组件库、文档、example、cli）的开发、构建及组件库的发布。本文属于这 11 篇文章的扩展 —— 如何发布到 GitHub 上以及如何快速利用 GitHub 发布组件库文档。这样优雅哥的《组件库框架》系列便形成了一个闭环：从开发，到开源。在开始本文之前，请您先注册 GitHub 账号并登录。]]></description><category></category></item><item><title><![CDATA[Vue3 企业级优雅实战 - 组件库框架 - 11 组件库的打包构建和发布]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/128955479</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/128955479</guid><author>youyacoder</author><pubDate>Thu, 09 Feb 2023 16:33:21 +0800</pubDate><description><![CDATA[回顾第一篇文章中谈到的组件库的几个方面，只剩下最后的、也是最重要的组件库的打包构建、本地发布、远程发布了。]]></description><category></category></item><item><title><![CDATA[Vue3 企业级优雅实战 - 组件库框架 - 10 实现组件库 cli - 下]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/128936988</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/128936988</guid><author>youyacoder</author><pubDate>Wed, 08 Feb 2023 15:51:03 +0800</pubDate><description><![CDATA[上文创建了一堆 utils、component-info，并实现了新组件模块相关目录和文件的创建。本文继续实现后面的内容。]]></description><category></category></item><item><title><![CDATA[Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/128457900</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/128457900</guid><author>youyacoder</author><pubDate>Tue, 27 Dec 2022 16:27:40 +0800</pubDate><description><![CDATA[创建新组件模块；创建样式 scss 文件并导入；在组件库入口模块安装新组件模块为依赖，并引入新组件；创建组件库文档和 demo。本文剩下的部分分享第一点，其余三点下一篇文章分享。在src下创建service目录，上面四个内容拆分在不同的 service 文件中，并统一由调用，这样层次结构清晰，也便于维护。首先在目录下创建文件，该文件用于创建新组件模块创建新组件的目录；使用 pnpm init 初始化 package.json 文件；]]></description><category></category></item><item><title><![CDATA[Vue3 企业级优雅实战 - 组件库框架 - 8 搭建组件库 cli]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/128207295</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/128207295</guid><author>youyacoder</author><pubDate>Tue, 06 Dec 2022 17:43:41 +0800</pubDate><description><![CDATA[前面的文章分享了组件库的开发、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 使用 ]]></description><category></category></item><item><title><![CDATA[【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 7 组件库文档的开发和构建]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127923576</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127923576</guid><author>youyacoder</author><pubDate>Fri, 18 Nov 2022 15:37:58 +0800</pubDate><description><![CDATA[前面完成了组件库的开发环境搭建和 example，咱们可以在 example 中通过业务驱动组件的开发和完善。但组件库开发的目的是给其他开发人员使用，这时候就需要通过文档来展示组件库的使用以及各个组件的 API、方法、插槽等。本文在前面文章的基础上继续实现组件库文档的开发和构建。组价库的文档咱们使用 vitepress 来实现，在之前的文章《vitepress搭建组件库文档》已经详细介绍了的使用，该文章中谈到的内容本文就快速略过。]]></description><category></category></item><item><title><![CDATA[【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 6 搭建example环境]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127885900</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127885900</guid><author>youyacoder</author><pubDate>Wed, 16 Nov 2022 15:19:33 +0800</pubDate><description><![CDATA[前面用了大量篇幅介绍组件库的开发环境搭建，包括：创建组件、创建组件库入口、组件库样式架构、组件库公共包，做了一大堆工作，还不能预览示例组件foo，本文便搭建 example 开发环境和打包构建，并在 example 中使用组件库。]]></description><category></category></item><item><title><![CDATA[【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127865333</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127865333</guid><author>youyacoder</author><pubDate>Tue, 15 Nov 2022 14:36:01 +0800</pubDate><description><![CDATA[本文继续组件库开发环境的搭建，前面两篇分别介绍了组件库中组件项目的初始化、组件库 CSS 架构，本文介绍通用工具库的搭建。在组件开发过程中，可能会调用一些通用的工具函数，这些工具函数便可以提取到一个独立的 npm 包中。]]></description><category></category></item><item><title><![CDATA[【猿创征文】 Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127847034</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127847034</guid><author>youyacoder</author><pubDate>Mon, 14 Nov 2022 14:37:44 +0800</pubDate><description><![CDATA[在前一篇文章中分享了搭建组件库的基本开发环境、创建了foo组件模块和组件库入口模块，本文分享组件库的样式架构设计。]]></description><category></category></item><item><title><![CDATA[【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127806154</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127806154</guid><author>youyacoder</author><pubDate>Fri, 11 Nov 2022 14:54:12 +0800</pubDate><description><![CDATA[在中定义foo组件的propsimport {msg : {上面的代码定义了一个非必填的属性msg，并使用vue中提供的提取props的类型。import {该文件将组件导入并导出，并且为该组件提供install方法。这样便完成了foo组件的代码编写。在下创建index.tsimport {]]></description><category></category></item><item><title><![CDATA[【猿创征文】 Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127789072</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127789072</guid><author>youyacoder</author><pubDate>Thu, 10 Nov 2022 14:59:52 +0800</pubDate><description><![CDATA[上文已经搭建了的基础环境，本文对进行初始化配置，包括：通用配置文件、公共依赖、ESLint。]]></description><category></category></item><item><title><![CDATA[【猿创征文】Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127730200</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127730200</guid><author>youyacoder</author><pubDate>Mon, 07 Nov 2022 14:15:21 +0800</pubDate><description><![CDATA[前两篇文章分享了基于 vite3 vue3 的组件库基础工程和用于快速创建该工程的工具yyg-cli，但在中大型的企业级项目中，通常会自主搭建这些脚手架或加速器。优雅哥希望每位前端伙伴能知其所以然，故接下来的文章将进入Vue3 企业级优雅实战系列，整个系列将包括五大部分：首先会分享如何从 0 开始搭建一套组件库基础工程，即如何从 0 实现。]]></description><category></category></item><item><title><![CDATA[猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127672280</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127672280</guid><author>youyacoder</author><pubDate>Thu, 03 Nov 2022 16:14:05 +0800</pubDate><description><![CDATA[yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架。在 npm 上发布了两个月，11月1日进行了大升级，发布1.1.0 版本：支持创建 vue3 全家桶项目和 vue3 组件库项目。]]></description><category></category></item><item><title><![CDATA[猿创征文｜分享一个实用的 vite + vue3 组件库脚手架工具，提升开发效率]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127635912</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127635912</guid><author>youyacoder</author><pubDate>Tue, 01 Nov 2022 16:24:31 +0800</pubDate><description><![CDATA[无论是 vue2 全家桶还是 vue3 + vite + TypeScript，组件库的使用几乎大家都会，但自己开发一个独立组件库就不是每个人都掌握的，因为搭建组件库的基础开发环境，就会让很多同学望而却步。这几天程序员优雅哥在这个脚手架的基础上，大家可以使用内置的 cli 快速创建新组件，按照套路开发组件及文档即可。脚手架很大程度上简化了环境的搭建、打包的配置、类型定义的抽取等工具，，大家可以将注意力集中到组件本身的开发上。脚手架采用风格，使用作为包管理工具。]]></description><category></category></item><item><title><![CDATA[Vitepress搭建组件库文档（下）—— 组件 Demo]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127552936</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127552936</guid><author>youyacoder</author><pubDate>Thu, 27 Oct 2022 15:05:05 +0800</pubDate><description><![CDATA[上文 《Vitepress搭建组件库文档（上）—— 基本配置》已经讨论了 vitepress 搭建组件库文档的基本配置，包括站点 Logo、名称、首页home布局、顶部导航、左侧导航等。本文进入最重要的部分 —— 如何像那样一遍代码就可以展示组件的效果和源代码。]]></description><category></category></item><item><title><![CDATA[Vitepress搭建组件库文档（上）—— 基本配置]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127517640</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127517640</guid><author>youyacoder</author><pubDate>Tue, 25 Oct 2022 17:23:56 +0800</pubDate><description><![CDATA[在vite出现以前，vuepress是搭建组件库文档不错的工具，支持以 Markdown 方式编写文档。伴随着vite的发展，vitepress已经到了版本，很多博客还是基于0.x版本，1.0.0与0.22配置略有差别，尤其是一些vitepress插件不支持1.0.0版本，如 vitepress-theme-demo（用它可以方便的编写组件 demo）。虽然现在 1.0.0 还是alpha版本，咱也可以尝试使用，反正遇到什么坑就去填什么坑就可以了呗。]]></description><category></category></item><item><title><![CDATA[Vue3 SFC 和 TSX 方式自定义组件实现 v-model]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127445835</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127445835</guid><author>youyacoder</author><pubDate>Fri, 21 Oct 2022 14:30:49 +0800</pubDate><description><![CDATA[的本质，咱可以分别使用 SFC（.vue 文件）和 TSX（.tsx）方式定义一个组件。上面部分使用 .vue 编写的组件，下面部分使用 .tsx 编写的组件，两者独立绑定。是 vue3 中的一个内置指令，很多表单元素都可以使用这个属性，如。等，咱可以在自定义组件中实现。包括两个输入框，分别是“姓”（，运行效果完全一致。]]></description><category></category></item><item><title><![CDATA[Vue3 SFC 和 TSX 方式调用子组件中的函数]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127429057</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127429057</guid><author>youyacoder</author><pubDate>Thu, 20 Oct 2022 16:02:00 +0800</pubDate><description><![CDATA[在开发中会遇到这样的需求：获取子组件的引用，并调用子组件中定义的方法。如封装了一个表单组件，在父组件中需要调用这个表单组件的引用，并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能，首先要在子组件中暴露父组件需要调用的函数，然后去父组件中获取子组件的引用，最后通过子组件的引用调用子组件暴露的方法。]]></description><category></category></item><item><title><![CDATA[Vue3 JS 与 SCSS变量相互使用]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127364009</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127364009</guid><author>youyacoder</author><pubDate>Mon, 17 Oct 2022 15:12:57 +0800</pubDate><description><![CDATA[el-menuel-menu本文提供解决上述问题的思路。]]></description><category></category></item><item><title><![CDATA[vite vue3 规范化与Git Hooks - 基于 vite 创建 vue3 全家桶项目(续篇）]]></title><link>https://blog.youkuaiyun.com/youyacoder/article/details/127320699</link><guid>https://blog.youkuaiyun.com/youyacoder/article/details/127320699</guid><author>youyacoder</author><pubDate>Fri, 14 Oct 2022 14:59:25 +0800</pubDate><description><![CDATA[hooks意思是“钩子”，也就是在执行某个操作之前或之后要做的事。git hooks 就是 git 操作的钩子，在 git 执行某个操作之前或之后要做的事，如 git 提交后、提交后、合并前、合并后、rebase前、rebase后等。pre-commitpre-commit是git commit执行前的钩子，会在获取提交描述信息且提交前被调用，根据该钩子决定是否拒绝提交。可以在这个钩子中对代码进行 eslint 检查。commit-msgcommit-msg也是git commit。]]></description><category></category></item></channel></rss>