发表于 分类于 阅读次数：

公司内部不同类型的项目越来越多，有基于 jQuery 的，也有 Vue 的，还有小程序的，虽然已经有各种类型的项目模板，但每次有新项目，都要去手动拉取对应的项目模板，然后修改里面的配置，还得删掉一些演示代码，实在有些烦人，于是开发一个内部项目脚手架的想法孕育而生。

因为之前有了解过 vue-cli 的实现思路，它将项目模板和脚手架分离，模板存放在 git 上，然后在与用户交互的过程中下载不同的模板，这样模板可以单独维护，即便有更新，用户也不需要更新脚手架。

思路清晰了，下面就该动动手了。

阅读全文 »

发表于 分类于 阅读次数：

在 Vue 项目开发中，会引用各种第三方库来提高开发效率，这就导致打包后的 vendor.js 文件体积相当臃肿，在加载时页面空白时间过长，用户体验很差。

要解决这个问题也很简单，既然是第三方的库，那其实就没必要都放在项目里，可以通过 CDN 的方式引入，不仅能减小 vendor.js 的体积，在加载速度上，也会用提升。

那在 Vue 项目中，要如何实现通过 CDN 引入第三方库并正常使用呢，下面就跟着我一步步来操作吧。

阅读全文 »

发表于 分类于 阅读次数：

在维护一些开源项目的时候，会遇到需要将代码提交到多个开源仓库，比如 Github/Gitlab/Gitee 等等，一般的做法是借助 GUI 工具配置多个远程仓库，例如 Sourcetree 里就是这样。

但是这样也并没有很方便，因为提交的时候需要分别提交，例如我配置了 2 个仓库，就需要提交 2 次，如果仓库比较多，重复性的操作就会比较多，而且容易出错，忘记提交了哪些仓库，哪些仓库还没提交。

阅读全文 »

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

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

而在 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 ，于是，我想到了另一种解决方案。

阅读全文 »