0%

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

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

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

阅读全文 »

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

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

其实就是简单的两个页面,一个列表页,一个详情页,接口人员直接在 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 ,建议熟悉了解后再阅读本篇文章。

阅读全文 »