10 2022 档案
摘要：
上文 《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 变量存储的颜色。类似的场景还有暗黑模式等。
本文提供解决上述问题的思路。
阅读全文
摘要：
在 《JS 模块化》系列开篇中，曾提到前端技术的发展不断融入很多后端思想，形成前端的“四个现代化”：工程化、模块化、规范化、流程化。在该系列文章中已详细介绍了模块化的发展及四种模块化规范。本文简单聊聊规范化中的 git 规范。
阅读全文
在 《JS 模块化》系列开篇中，曾提到前端技术的发展不断融入很多后端思想，形成前端的“四个现代化”：工程化、模块化、规范化、流程化。在该系列文章中已详细介绍了模块化的发展及四种模块化规范。本文简单聊聊规范化中的 git 规范。
阅读全文
摘要：
在《基于 vite 创建 vue3 项目》一文中整合了 pinia，有不少伙伴不知道 pinia 是什么，本文简单介绍 pinia。主要包括三方面： pinia 的基本用法，在《基于 vite 创建 vue3 项目》中 demo 的基础上简单重构。 如何持久化 pinia 中的数据，保证浏览器刷新时
阅读全文
在《基于 vite 创建 vue3 项目》一文中整合了 pinia，有不少伙伴不知道 pinia 是什么，本文简单介绍 pinia。主要包括三方面： pinia 的基本用法，在《基于 vite 创建 vue3 项目》中 demo 的基础上简单重构。 如何持久化 pinia 中的数据，保证浏览器刷新时
阅读全文
摘要：
在项目或产品的迭代过程中，通常会有多套环境，常见的有： dev：开发环境 sit：集成测试环境 uat：用户接收测试环境 pre：预生产环境 prod：生产环境 环境之间配置可能存在差异，如接口地址、全局参数等。在基于 vue-cli （webpack） 的项目中只需要添加 .env.xxx 文件，
阅读全文
在项目或产品的迭代过程中，通常会有多套环境，常见的有： dev：开发环境 sit：集成测试环境 uat：用户接收测试环境 pre：预生产环境 prod：生产环境 环境之间配置可能存在差异，如接口地址、全局参数等。在基于 vue-cli （webpack） 的项目中只需要添加 .env.xxx 文件，
阅读全文
摘要：
在 《基于 vite 创建 vue3 全家桶》一文整合了 *Element Plus*，并将 *Element Plus* 中提供的图标进行全局注册，这样可以很方便的延续 *Element UI* 的风格 —— 通过 *el-icon-xxx* 的方式使用图标（如果有问题的朋友可以先阅读前面的文章：*基于 Vite 创建 vue3 全家桶项目*）。
阅读全文
在 《基于 vite 创建 vue3 全家桶》一文整合了 *Element Plus*，并将 *Element Plus* 中提供的图标进行全局注册，这样可以很方便的延续 *Element UI* 的风格 —— 通过 *el-icon-xxx* 的方式使用图标（如果有问题的朋友可以先阅读前面的文章：*基于 Vite 创建 vue3 全家桶项目*）。
阅读全文
