基于Webpack/TypeScript/Koa的环境配置

TypeScript是一种开源编程语言,在软件开发社区中越来越受欢迎。TypeScript带来了可选的静态类型检查以及最新的ECMAScript特性。
作为Javascript的超集,它的类型系统通过在键入时报告错误来加速和保障我们的开发,同时越来越多对的库或框架提供的types文件能够让这些库/框架的API一目了然。我对这门语言垂涎已久,但是迟迟无法找到练手的地方。
很显然的,个人博客又一次的成了我的学习试验田😸。我放弃了上一版Vue单页面的框架,改为基于TypeScript/Koa的多页面应用。在改造的过程中,我试着将服务端(Koa)代码以及前端代码都使用TypeScript来开发,中间使用了webpack作为开发时前后端的桥梁。

Vue实现一个分页组件

分页是WEB开发中很常用的功能,尤其是在各种前后端分离的今天,后端API返回数据,前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代,分页功能都是必不可少的。
分页大多数(基本上)情况下都是对异步数据列表的处理,这里首先需要明白一下分页的流程。
在已知每页显示数据量pageSize以及当前页码pageIndex的情况下:

看懂前端脚手架你需要这篇webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
Webpack 官网
Webpack 中文指南

Vue2.0利用vue-resource上传文件到七牛

关于上传,总是有很多可以说道的。
16年底,公司项目番茄表单的前端部分,开始了从传统的jqueryvue 2.0的彻底重构。但是上传部分,无论是之前的传统版本,还是Vue新版本,都是在使用着FileAPI这款优秀的开源库,只是进行了简单的directive化。为什么呢?因为兼容性。没办法,公司项目不等同于个人项目,必须要考虑大多数浏览器。否则,上传部分完全可以利用Vue-Resource以及FormData来抛开对FileAPI的依赖。这让我深感遗憾,幸好这个简单的遗憾在个人博客Vue化重构的时候得以弥补。