0%

用过 vue-element-admin 的同学一定很清楚,路由的配置直接关系侧边栏导航菜单的展示,也得益于这种设计思路,几乎大部分后台框架都采用这个方案,当然也包括了我写的 Fantastic-admin 这个中后台框架。

但这个方案有个明显的问题,就是为了实现多级侧边栏导航菜单,则需要将路由配置成多级嵌套的形式,一旦超过两级,达到三级甚至更多级,就需要增加一个空布局页面(Empty.vue)用来给 component 使用,仅仅是为了生成层级菜单。此时就出现了一个问题,因为 keep-alive 是在 Layout 上处理的,所以超过两级以上的路由都会变得难以处理,也没有一个相对完美的解决方案。

阅读全文 »

CSS3 的 transformtransition 让开发者可以轻松实现转场、过渡的动画效果,但这并不代表谁可以做出一个流畅、清晰的动画效果。

在这篇文章里,我尝试在 Fantastic-admin 后台框架里去增加一些锦上添花的动画效果,并会分享我的设计思路。

本文观点为作者主观看法,有不同见解欢迎友好讨论。

阅读全文 »

前阵子给公司业务写了一个 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 引入第三方库并正常使用呢,下面就跟着我一步步来操作吧。

阅读全文 »