９９３５

前阵子给公司业务写了一个 Vue 组件，想着可能会在很多项目里复用，于是就将它封装成的 npm 包。

处理完后觉得应该准备一份在线文档，本打算继续用 docsify 来写文档（因为用过熟悉），但考虑需要在文档里增加组件的演示代码，最好能在 markdown 文件里直接写 vue 代码，并且还要支持 ElementUI ，因为我的组件是基于 ElementUI 开发的。

做了一系列的调研，最后选择使用 VuePress 做为文档开发框架。

先简单介绍一下，vue-automation-admin 是一款开箱即用的 Vue 中后台管理系统模版。但是后台框架市面上已经有不少，为什么我还要重新造轮子呢？这就要从 vue-element-admin 说起了。

每个互联网开发公司，内部都少不了前端和接口的开发人员，而在开发过程中，最不可缺少的就是接口文档。

我司当然也不例外，自从几年前将前后端分离，拆分出前端组和接口组时，我就写了一份给接口组用的接口文档模版的静态页面。

其实就是简单的两个页面，一个列表页，一个详情页，接口人员直接在 PHP 里将拼装好数据的 HTML 代码输出到页面上，就有了接口文档。

而这份文档的界面风格，一用就是这么多年，经历了上百个项目，终于在前几天，实在有点看不过去了，借着手头没什么工作任务，用了3-4天时间，和一位接口小伙伴配合，整了一份全新的接口文档模版出来。

因为这个属于技术部内部自产自销的产品，一切目标就是「为了让内部开发小伙伴用得爽」为前提，所以在UI、交互方面，都是自己说得算，开发过程极度愉悦。

而这篇文章就是要回顾一下，我在这3-4天的时间里，到底做了些什么，有什么小亮点、小技巧。

发现这个问题是因为最近给我司的商城系统扩展了一个功能，就是所有路由都需要带上 shopid（店铺ID）。

这个功能实现并不复杂，在前置导航守卫里就能处理。

1
2
3
4
5
6
7
8

router.beforeEach((to, from, next) => {
    if (!to.query.shopid) {
        to.query.shopid = store.state.global.shopid
        next(to)
    } else {
        next()
    }
})

众所周知，Vue 中的 keep-alive 可以对组件进行缓存，搭配上 vue-router 的 <router-view> 则可以实现页面缓存。

但网上大多数的方案都是采用在 router 的 meta 属性里增加一个 keepAlive 字段，然后在父组件或者根组件中，根据 keepAlive 字段的状态使用 <keep-alive> 标签，实现对 <router-view> 的缓存，如下：

1
2
3
4

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

如果要对页面动态控制是否需要缓存，则是在 beforeRouteLeave() 里去控制 keepAlive 的状态。

这个方法看似简单，但问题挺多，网上的解决方案似乎也不太理想，我甚至连尝试都懒得去尝试。

因为这个方案为了解决一个问题，反而创造出了一堆问题，为了解决这一堆问题，又引入了各种“奇思妙想”、“剑走偏锋”的骚操作，光是看大家的代码就让我头大。

在思考并搜索还有什么更好解决方案的时候，我无意翻看到 Vue 的官方文档，在 keep-alive 的介绍里看到， 2.1.0 里新增了 include 和 exclude 这两个属性，这似乎给我了一点思路。

于是带着这两个关键词，重新去百度里搜寻了一番，果然，已经有现成的解决方案了。

这个问题其实百度一下就有一堆解决方案，但是却很少有文章去分析他们各自的优势和劣势，而我这篇文章，也是在具体项目开发中，踩过一些坑后的心得和总结。

公司内部不同类型的项目越来越多，有基于 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 ，建议熟悉了解后再阅读本篇文章。