摘要： 
前文已经初始化了 workspace-root，从本文开始就需要依次搭建组件库、example、文档、cli。本文内容是搭建 组件库的开发环境。 阅读全文
前文已经初始化了 workspace-root，从本文开始就需要依次搭建组件库、example、文档、cli。本文内容是搭建 组件库的开发环境。 阅读全文
摘要： 
上文已经搭建了 pnpm + monorepo 的基础环境，本文对 workspace-root 进行初始化配置，包括：通用配置文件、公共依赖、ESLint。 1 通用配置文件 在项目 根目录 下添加下面的配置文件。 添加 .editorconfig 编辑器格式配置文件 [*.{js,cjs,ts, 阅读全文
上文已经搭建了 pnpm + monorepo 的基础环境，本文对 workspace-root 进行初始化配置，包括：通用配置文件、公共依赖、ESLint。 1 通用配置文件 在项目 根目录 下添加下面的配置文件。 添加 .editorconfig 编辑器格式配置文件 [*.{js,cjs,ts, 阅读全文
摘要： 
前两篇文章分享了基于 vite3 vue3 的组件库基础工程 *vue3-component-library-archetype* 和用于快速创建该工程的工具 *yyg-cli*，但在中大型的企业级项目中，通常会自主搭建这些脚手架或加速器。优雅哥希望每位前端伙伴能知其所以然，故接下来的文章将进入 *Vue3 企业级优雅实战* 系列，整个系列将包括五大部分： 阅读全文
前两篇文章分享了基于 vite3 vue3 的组件库基础工程 *vue3-component-library-archetype* 和用于快速创建该工程的工具 *yyg-cli*，但在中大型的企业级项目中，通常会自主搭建这些脚手架或加速器。优雅哥希望每位前端伙伴能知其所以然，故接下来的文章将进入 *Vue3 企业级优雅实战* 系列，整个系列将包括五大部分： 阅读全文
摘要： 
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架。在 npm 上发布了两个月，11月1日进行了大升级，发布 1.1.0 版本：支持创建 vue3 全家桶项目和 vue3 组件库项目。具体如下： vue3 全家桶项目 使用 yyg-cli 创建的 vue3 全 阅读全文
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架。在 npm 上发布了两个月，11月1日进行了大升级，发布 1.1.0 版本：支持创建 vue3 全家桶项目和 vue3 组件库项目。具体如下： vue3 全家桶项目 使用 yyg-cli 创建的 vue3 全 阅读全文
摘要： 
这几天 程序员优雅哥 搭建了一个组件库的基础脚手架：
vue3-component-library-archetype
在这个脚手架的基础上，大家可以使用内置的 cli 快速创建新组件，按照套路开发组件及文档即可。脚手架很大程度上简化了环境的搭建、打包的配置、类型定义的抽取等工具，开箱即用，大家可以将注意力集中到组件本身的开发上。 阅读全文
这几天 程序员优雅哥 搭建了一个组件库的基础脚手架：
vue3-component-library-archetype
在这个脚手架的基础上，大家可以使用内置的 cli 快速创建新组件，按照套路开发组件及文档即可。脚手架很大程度上简化了环境的搭建、打包的配置、类型定义的抽取等工具，开箱即用，大家可以将注意力集中到组件本身的开发上。 阅读全文
摘要： 
上文 《Vitepress搭建组件库文档（上）—— 基本配置》已经讨论了 vitepress 搭建组件库文档的基本配置，包括站点 Logo、名称、首页 *home* 布局、顶部导航、左侧导航等。本文进入最重要的部分 —— 如何像 *Element Plus* 那样一遍代码就可以展示组件的效果和源代码。 阅读全文
上文 《Vitepress搭建组件库文档（上）—— 基本配置》已经讨论了 vitepress 搭建组件库文档的基本配置，包括站点 Logo、名称、首页 *home* 布局、顶部导航、左侧导航等。本文进入最重要的部分 —— 如何像 *Element Plus* 那样一遍代码就可以展示组件的效果和源代码。 阅读全文
摘要： 
在 vite 出现以前，vuepress 是搭建组件库文档不错的工具，支持以 Markdown 方式编写文档。伴随着 vite 的发展，vitepress 已经到了 1.0.0-alpha.22 版本，很多博客还是基于 0.x 版本，1.0.0 与 0.22 配置略有差别，尤其是一些 vitepre 阅读全文
在 vite 出现以前，vuepress 是搭建组件库文档不错的工具，支持以 Markdown 方式编写文档。伴随着 vite 的发展，vitepress 已经到了 1.0.0-alpha.22 版本，很多博客还是基于 0.x 版本，1.0.0 与 0.22 配置略有差别，尤其是一些 vitepre 阅读全文
摘要： 
1 v-model 1.1 理解 v-model v-model 是 vue3 中的一个内置指令，很多表单元素都可以使用这个属性，如 input、checkbox 等，咱可以在自定义组件中实现 v-model。v-model 本质上是一个语法糖： 绑定父组件传递过来的 modelValue 属性； 阅读全文
1 v-model 1.1 理解 v-model v-model 是 vue3 中的一个内置指令，很多表单元素都可以使用这个属性，如 input、checkbox 等，咱可以在自定义组件中实现 v-model。v-model 本质上是一个语法糖： 绑定父组件传递过来的 modelValue 属性； 阅读全文
摘要： 
在开发中会遇到这样的需求：获取子组件的引用，并调用子组件中定义的方法。如封装了一个表单组件，在父组件中需要调用这个表单组件的引用，并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能，首先要在子组件中暴露父组件需要调用的函数，然后去父组件中获取子组件的引用，最后通过子组件的引用调用子组件暴 阅读全文
在开发中会遇到这样的需求：获取子组件的引用，并调用子组件中定义的方法。如封装了一个表单组件，在父组件中需要调用这个表单组件的引用，并调用这个表单组件的校验表单函数或重置表单函数。要实现这个功能，首先要在子组件中暴露父组件需要调用的函数，然后去父组件中获取子组件的引用，最后通过子组件的引用调用子组件暴 阅读全文
摘要： 
1. JS 中使用 SCSS 变量。如在 scss 中定义了一个颜色，*el-menu* 组件使用该颜色作为背景色，此时需要获取 scss 变量，通过 *background-color* 属性将该变量值传递给 *el-menu* 组件（当然你也可以在 JS 中重新定义一个变量存储该颜色）。
>2. SCSS 中使用 JS 变量。如动态换肤功能，用户选中某个颜色作为主题色，整个系统的主题色都切换为这个主题色。用户选择的这个颜色使用 JS 变量存储，SCSS 中需要使用该 JS 变量存储的颜色。类似的场景还有暗黑模式等。
本文提供解决上述问题的思路。 阅读全文
1. JS 中使用 SCSS 变量。如在 scss 中定义了一个颜色，*el-menu* 组件使用该颜色作为背景色，此时需要获取 scss 变量，通过 *background-color* 属性将该变量值传递给 *el-menu* 组件（当然你也可以在 JS 中重新定义一个变量存储该颜色）。
>2. SCSS 中使用 JS 变量。如动态换肤功能，用户选中某个颜色作为主题色，整个系统的主题色都切换为这个主题色。用户选择的这个颜色使用 JS 变量存储，SCSS 中需要使用该 JS 变量存储的颜色。类似的场景还有暗黑模式等。
本文提供解决上述问题的思路。 阅读全文