解决 ElementUI 1.X 中 Table 表头错位的问题

ElementUI 是一个还算不错的组件库,基于 Vue 或者 React 的都有,这儿说的是 Vue 版本,ElTable 组件在 Chrome 中使用时会存在表头错位的问题,通过查看 DOM 发现 thead 中被自动插入了一个 th.gutter,在 CSS 中对其设置为 display: none; 即可解决该问题。

Webpack 开启 preload / prefetch

首先你需要 Webpack 3.x 才可以完整的拥有这些功能,然后安装 preload-webpack-plugin

然后在 webpack 配置里面加上:

上面的代码会执行默认设置,所有动态加载的内容会以 preload 的形式加载,但这样会报 warning,并且也是非必要的,所以我们稍作修改,使用 prefetch 的方式,闲时加载:

升级 Webpack 至 3.x

把 Webpack 从 2.x 升级到 3.x 以后,发现 HMR 无法正常使用了,每次修改文件,页面都会通过 reload 的方式来刷新内容,而不是 Module Replacement 的方式,搜了一大圈,找到办法,注释掉下面的配置即可(via):

NVM 使用淘宝镜像

nvm 是一个好用的 nodejs 版本管理工具,但由于众所周知的原因,当使用 nvm 下载安装 nodejs 时,有时候会出现龟速甚至无法下载的情况,其实他是可以换源的。

MAC / Linux 下只需要执行如下命令即可:

Windows 的方案点这里

关闭 VSCode 中的 Minimap

无法理解很多人喜欢在编辑器里面显示 minimap 的习惯,反正我是一直都关闭的,然而最近一次更新以后,vscode 里面出现了 minimap,并且在「用户设置」里面设置 “editor.minimap.enabled”: false 也无法关闭,搜了半天,发现更新以后,工作区设置里面多了一项 “editor.minimap.enabled”: true,怒删,问题解决。

原文参考:

After the upgrade, for some reason the workspace settings had minimap.enable set to “true”. I didn’t put that in there, but it got there somehow during the upgrade.

解决 GitHub 和 Bitbucket 速度慢的问题

使用 GitHub 或者 Bitbucket 管理 git 代码时,有时候会遇到 git clone 或者 git push 特别慢的问题,并不是因为 github.com 的这个域名被限制了。而是 github.global.ssl.fastly.net 这个域名被限制了。
所以只要把 github.global.ssl.fastly.net 这个域名添加到 proxy 的路由表里面即可(设置方法你懂的)。

Number 类型的 input 输入框中输入浮点数

在 HTML5 中,input 元素有了一个好用的 type: Number,当我们把一个 input 设置为 Number 类型以后,它就可以接收 max、min 等参数设置最大值最小值,达到原生表单控制的目的:

但是这么一弄,问题来了,当我们输入浮点型的数字时就会报错,难道它只能接收整数吗?显然不是的,他不光可以接受浮点型,还可以控制输入到小数点后几位,以及每次增加的步幅(step),当我们需要精确到小数点后两位时,只要把 step 设置为 0.01 即可:

Have fun!

Vue Syntax Highlight with pug in Sublime Text

jade 这个项目组也是够任性的,说改名就改名,造成了 sublime 里面代码高亮失败,升级了 Vue Syntax Highlight 后依然无果,最后查明原因(via),原来还要安装一个 pug 的插件才可以,完整的支持如下:

1. 打开 Package Control:Install Package,输入 Vue Syntax Highlight,安装;
2. 参照 1 的方法,输入 pug,安装。

Have fun!

解决 Jetty Runner 1.2.0 与 JDK7 不兼容的问题

今天手贱把 Jetty Runner 自动升级了最新版本 1.2.0,发现项目跑不起来了,报错「Unsupported major.minor version 52.0」,查了一圈发现最新版 Jetty Runner 介绍中有一条「Minimum requirement: JVM / JDK / JRE v8」,这就坑爹了,卸载最新版,降级为上一个版本 1.1.3,完美解决问题。

下载地址:https://plugins.jetbrains.com/plugin/7505,选择版本 1.1.3 后的 download,之后在 IntelliJ IDEA 的 Preferences -> Plugins 中,选择 「Install plugin from disk」即可。

Vue Pikaday

Pikaday 是一个干净小巧不依赖其他库(如 jQuery 等)的日期选择库(只能选日期不能选时间),如果只需要一个简单的日期选择功能,又不想要加载 jQuery 甚至 Bootstrap 这样的大部头可以考虑选择。

最近在使用 Vuejs 做项目,就把这个日期选择库包装了一下,是他可以作为一个组件在项目中使用,组件源代码如下:

使用这个组件以前需要做一点微小的工作,首先安装 pikaday:

然后将所需的 css 文件引入(scsscss);
接着在项目中使用组件:

hava fun!