发表于 更新于 分类于 阅读次数：

精灵图想必对大家来说都不陌生，就是将多个小图整合到一张图上，以此减少浏览器向服务器请求的次数，从而提高网页的加载速度。

而在 Vue 项目中，我通常会使用 webpack-spritesmith 这个 npm 包来制作需要的精灵图，而这篇文章主要是针对 webpack-spritesmith 的一些高阶使用技巧。

如果你没使用过 webpack-spritesmith ，建议熟悉了解后再阅读本篇文章。

阅读全文 »

发表于 更新于 分类于 阅读次数：

在 Vue 中，我们通过 Vue.component('MyComponentName', { /* ... */ }) 的方式来进行全局组件注册，但如果需要全局注册的组件很多，这时代码就会变得比较臃肿，例如：

1
2
3
4
5
6
7
8
9
10
11
12
// 注册 5 个全局组件
import ExampleComponent1 from './components/exampleComponent1/index'
import ExampleComponent2 from './components/exampleComponent2/index'
import ExampleComponent3 from './components/exampleComponent3/index'
import ExampleComponent4 from './components/exampleComponent4/index'
import ExampleComponent5 from './components/exampleComponent5/index'

Vue.component('ExampleComponent1', ExampleComponent1)
Vue.component('ExampleComponent2', ExampleComponent2)
Vue.component('ExampleComponent3', ExampleComponent3)
Vue.component('ExampleComponent4', ExampleComponent4)
Vue.component('ExampleComponent5', ExampleComponent5)

下面我们就针对这块痛点，做些优化。

阅读全文 »

发表于 更新于 分类于 阅读次数：

导航一直是后台系统里不可缺少的一块，在 jQuery 时代，我通常会将导航的信息以数组的形式存放在某个 js 文件里，然后通过遍历数组动态渲染到页面上。

到了 Vue 后，这一方式似乎没什么变化，但工作量却变多了，因为 Vue 多了一步路由配置，不配置路由则不能跳转到需要的页面，也就是我要维护两份数据，一份是路由，一份是导航数组，而且这两份数据的相似度极高。

这一痛点其实在 vue-element-admin 里已经解决了，在通读源码后，我决定自行实现一个通过嵌套路由动态生成后台导航的功能。

阅读全文 »

发表于 更新于 分类于 阅读次数：

后台开发离不开权限，不同的用户登录，根据不同的权限，可以访问不同的管理目录。但在使用 vue-element-template 里内置的权限模块功能后，发现作者提供的权限模块扩展性不是很好，所以这篇文章就是记录我是如何基于作者原有的权限模块进行的一次重构。

阅读全文 »

发表于 更新于 分类于 阅读次数：

问题描述

通常，在写组件的时候，会在组件里用 $emit 方法携带参数传出组件的自定义事件，比如这样

1
2
// 子组件
this.$emit('test', this.param)
1
2
<!-- 父组件 -->
<Component @test="test"></Component>

但是会碰到这样一个需求，就是在父组件调用子组件自定义事件的同时，还需要传入其它的参数。

这时候如果直接带上自定义的参数，就无法接收到子组件传出参数，那有什么办法可以同时都接收到呢？

阅读全文 »

发表于 更新于 分类于 阅读次数：

在移动端，不管是在 App、H5，还是小程序，滚动加载已经成了列表页的标配功能。

但最近在学习小程序的时候，发现一个问题，就是如果第一页的数据如果无法撑满一屏，这时候无法滚动页面，也就导致不能触发加载第二页的数据。

对于这个问题，最简单的办法就是把每页加载的条目加大，比如原先一页 10 条，那就改成一页 15 条，或者 20 条，保证一页的数据能撑满一屏就可以。

但做为一个技术人员，这样的解决方案难免有点不 geek ，于是，我想到了另一种解决方案。

阅读全文 »

发表于 更新于 分类于 阅读次数：

写完这篇年终小结，意味着我的 2018 年正式结束了，因为公司放假正好是今天开始。当然很巧的是，我在这个独立博客写的第一篇文章也是 1 月 31 日，时间刚好整一年。

其实这篇文章早就写好了，为了凑这天整整等了一周。😂

阅读全文 »

发表于 更新于 分类于 阅读次数：

官方已经把 HBuilder 正式升级为 HBuilder X 了，在测试途中发现 HBuilder X 打包 IOS 应用失败，也没有提示任何失败原因，但用 HBuilder 打包则可以成功打包，所以本文还是基于 HBuilder 进行演示，如果你是使用 HBuilder X ，部分设置操作可对照参考。

准备一个 Vue 项目

依托 Vue CLI ，我们先快速初始化一个 Vue 的项目，这里我已经创建好并成功运行了。

阅读全文 »

发表于 更新于 分类于 阅读次数：

昨天在学习 vue-element-admin 的时候发现一个神奇的现象，因为我的编码习惯是使用 4 个空格做为缩进，但在 VS Code 里编辑 vue-element-admin 项目的时候，发现一保存，编辑器就会对代码进行格式化（我以 4 个空格缩进写的代码会被格式化成 2 个空格缩进），这个“黑科技”突然就引起了我的性趣兴趣，于是一路顺藤摸瓜，发现了今天的主角 —— ESLint

阅读全文 »