VueMixinsLoader v1.0.2 release !
昨天闲来无事，逛逛 GitHub，突然发现有人 star 了我的项目 vue-mixins-loader，可给我激动坏了。本着有一个人用，就要维护到底的原则，我准备给这个 Loader 做一次优化。在实际用的过程中发现一个问题：使用时，会把项目中所有 .vue 文件都给注入 mixins 。比如有些外部引入的 .vue 组件，这就完全没有必要去注入 mixins 。所以，计划再新增一个 ...
VueMixinsLoader：类似 Mixin 功能的 Loader🦉
最近要给项目用到的组件库里的所有组件都要加一个 prop ，总共 126 个组件，如果是手动加，emm，也不是不可以，但就是有点呆，更何况如果后续有变动的话，又得重新来一遍。于是就想，如何用一种全局的配置，去统一给所有组件加 prop （这里没有使用 Vue.mixin 去全局混入，下文会作解释）。最后打算开发一个 Webpack Loader 去实现这个功能，刚好之前也没写过 Lo ...
当 JSON 字符串更新时添加提示动画🦄 <W17>
为了便于用户能直观地看到配置项的一些属性，于是把整个配置以一个 JSON 串的形式展示。本来打算以一个表格或者列表的形式展示，不过配置项中某些属性是 Object 类型，思来想去，还是 JSON 串更直观一点。但是当某个配置改变时，JSON 里的变动不是很明显（如下图所示）。当这个 JSON 里的属性太多时，就不容易能注意到是哪个配置变了。于是，就想能不能做一个属性变化的提示，当某个 ...
Vue 中如何取消 ViewDesign 中组件内部的指令 <W13>
最近需要做这样一个功能：当展开下拉框或者日期选择器的浮层面板后，点击某个区域，不会让浮层消失。如果有了解过组件库内部源码的话，这种浮层的点击外部后隐藏，大多数组件内部都是通过一个 clickOutside 的指令来实现，而目标功能就是需要实现一块 “禁区”，当点击 “禁区” 时不会触发 clickOutside。本文就是基于该功能的实现对这个指令进行探索，记录自己实现这个功能的全过程 ...
如何实现状态的「伪更新」? <W9>
最近要做一个与颜色选择器有关功能：当用户在颜色面板里预选颜色时，需要同时更新当前画布的颜色；如果取消选择，则将画布背景重置为初始颜色；如果确定了颜色，则更新当前画布颜色。比较容易想到的方法是，用两个变量分别记录初始值 originValue 与当前值 value ：如果只是选择，那就用去更新 value ；如果取消选择，重置为 originValue ；如果选中，将 originVa ...
Vue：beforeCreate -> created <W8>
如上图所示，Vue 在 beforeCreate -> created 阶段，按这个步骤进行初始化操作。按照这个顺序，也就意味着后者初始化的时候，可以使用前者已经初始化的变量。例如：在 data 中可以使用 methods 里定义的方法，也可以用 props 引入的属性进行初始化。 initInjectionsinject 的使用请参考官方文档。 先获取当前实例上注册的 i ...
Vue风格指南（选项、属性顺序）
Markmap * { margin: 0; padding: 0; } #mindmap { display: block; width: 100vw; height: 100vh; } ...
【掘金小册·Vue组件精讲-20】写在最后
亲爱的读者，到这里本小册就要结束了，你是否从中学习到了属于你的知识呢？我们来回顾一下小册的内容吧。 Vue.js 在开发独立组件时，由于它的特殊性，无法使用 Vuex、Bus 这样的第三方插件来做组件通信，因此小册提到了 3 种组件间的通信方法，都是支持跨多级的： provide / inject：由父 ...
【掘金小册·Vue组件精讲-19】拓展：如何做好一个开源项目（下篇）
持续运营 项目有了一定的规模和进展后，需要持续运营，让更多的人知道和使用。运营并不是个技术活，对于程序员来说，还是或缺的技能。最简单的运营手段，就是在一些技术社区分享“软文”，iView 在早期就是这样做的，还总结出了一个 “500 star 定律”，也就是说，每一次分享文章，差不多能在 GitHub 带来 500 个 star。star 对于 ...
【掘金小册·Vue组件精讲-18】拓展：如何做好一个开源项目（上篇）
iView 的故事 毕业四年以来，我一直觉得自己是一个很幸运的人，幸运参与过创业，幸运一路有大牛带，幸运开源了 iView 项目。 2016 年初，我还是一名普通的前端工程师，那时候还是 Vue.js 1.x 的时代，知名度也远不如现在，在大部分人眼中，Vue.js 就是一个轻量级的 Angular。 我 ...