摘要：
大家在做后台管理系统时一般都会涉及到菜单的权限控制问题。当然解决问题的方法无非两种——前端控制和后端控制。我们公司这边的产品迭代速度较快，所以我们是从前端控制路由迭代到后端控制路由。下面我会分别介绍这两种方法的优缺点以及如何实现（不熟悉vue-router API的同学可以先去官网看一波API哈）。 阅读全文
摘要：
我们通常在做项目时可能会把第三方库打包到bundle中，比如下面这张图 如果不想把第三方库打包到bundle中，这就有了externals。官方的使用externals比较简单，只需三步—— 1.在HTML中引入第三方库的cdn 2.在webpack中配置externals 3.在js中引用 好，现 阅读全文
摘要：
最近在用webpack优化首屏加载性能，通过几种插件之后我们上线前后的速度快了一倍，在此就简单的分享下吧，先上个优化前后首屏渲染的对比图。 可以看到总下载时间从3800ms缩短到1600ms。 我们在用webpack时一般都会选择多入口文件吧，为的就是将自己的源码跟第三方库代码分离。这是之前的代码， 阅读全文
摘要：
其实说到性能优化，他的范围太广了，今天我们就只聊一聊通过webpack配置减少http请求数量这个点吧。 简单说下工作中遇到的问题吧，我们做的一个项目中首页用了十多张图片，每张图片都是一个静态资源，所以都会有http请求，为了减少请求，我们可以通过base64编码的方法来展示图片。webpack中有 阅读全文
摘要：
通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别)，我们现在来总结一下如何实现一个最佳方案。 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配，如下图 但是这个可能不会太精准，比如我的设备布局viewport可能是370px，这样只能使用320这一版本 阅读全文
摘要：
昨晚在家里写了一个demo放到github上，然后今天晚上来公司准备搞一下，但是git pull下来在本地修改之后push不到github上，然后发现公司电脑上并没有access权限，然后想起来还没配置ssh key。简单说下配置步骤吧—— 1.首先进入我的demo目录，让他自动生成一下ssh ke 阅读全文
摘要：
实现css水平垂直居中的方法有很多，在这里我简单的说下四种比较常用的方法： 1.使用CSS3中的Flex布局 对于flex，我们要了解的是它是一个display的属性，而且必须要给他的父元素设置flex属性(flex必须配合绝对定位使用！！！！！)，除了设置display：flex之外，还有另外两个 阅读全文
摘要：
rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。 rem是根据html根节点来计算的，而em是继承父元素的字体。比如下面一个demo 第一个span继承了它的父元素div的大小，所以是14px,第二个span是通过html来计算的，所以是40px。第一个img继承的body，第 阅读全文
摘要：
我们通常在写移动端页面时，往往都会在html页面中加入这样一段话 可能我们只知道这三个字段的含义（视口宽度等于设备宽度，屏幕缩放为1，禁止用户缩放），但是为什么要这么写，其原理又是什么呢？ 我们先看一个简单的demo吧。 该demo展示一个宽度为320px的div，我们在iphone5上面打开看一下 阅读全文
摘要：
大家再使用vue做项目时，查询功能当然必不可少，这就得使用vue强大的filter啦。其实vue内置的两个属性filterBy和orderBy已经能满足部分需求了，但是她更大的的魅力在于自定义filter（之后的文章中会分享），正好我最近做的项目中用到了这个。先给大家看下需求吧。如下图，这是一个通讯 阅读全文
摘要：
当我们在使用vue构建中大型项目时，通常会遇到某些经常用的方法以及属性，比如说搭建一个员工管理系统，请求的url需要一个共同的前缀，或者在某几个view中需要用到时间，这个时间是通过某方法格式化之后的等等，如果每次用到都写共同的代码，那样如果之后有变动的话维护起来会非常麻烦。 所以我们就得想办法抽出 阅读全文
摘要：
在开发中我们通常会遇到一个问题——如何通过一款编辑器(或者IDE)便捷的同步线上代码。目前比较热门的编辑器有sublime，atom等，他们都有sftp功能，鉴于本人更喜欢用轻量级的编辑器，那我就在这里分享下sublime的sftp吧。 首先确保sublime中安装了sftp插件，不知道怎么安装的可 阅读全文