webpack+vue+vux+express+lowdb

3 minute read

花了一天时间,做了一套加班报名系统,前端基于 webpack+vue+vux,后端基于 express+lowdb。 以前在项目中也都接触过 webpack+vue,第一次尝试使用 vux,发现竟然出奇的好用。 如果需求对视觉要求不高,还是非常推荐把 vux 引进到项目中的。

项目地址

webpack + vue

初学者自己尝试搭从零开始搭 webpack 环境比较困难,官方文档太渣有一定因素,这里还是推荐使用 vue-cli 一步到位。

当然,光使用 vue-cli 生成的默认配置很难满足所有项目的需要,所以还需要对 webpack 有一些了解才行。

推荐一篇文章,对 webpack 解释的特别好 基于 webpack 搭建前端工程基础篇

他们家的公众号推的文章质量也很不错,推荐关注一下。

vue 2.0 已经发布了,目前我还使用的是 1.0.26 版本,包括对应的 vue-router 也是 1.0 版本,看了半天 vue-router 2.0 版本的文档,怎么也跑不起来,后来才发现是自己看错文档了。

vux

vux 提供了各种各样的组件,基本上拿来就能用。

express + lowdb

本着快速建站的原则,本来想尝试一下 koa,想想这样可能会影响整个开发的进度,本次的主题是对 vux 的学习,所以 koa 只能下次再玩了。

lowdb,是一个基于文件存储的非关系型数据库,轻量级,便于携带型,拷个 json 文件就可以随意备份恢复了。

需要注意的是,lowdb 读写文件默认都是同步的,将 lowdb 的写配置成异步写入能极大的提升性能。

如果你的数据比较多,几十万条几百万条的,那还是早点换正常点的数据库吧,比如 MySQL。

lowdb 的数据查找、筛选等操作基于 lodash 库,要掌握增删查改,还是要先学习一下 lodash 库的。

lodash 是一个功能库,增强了很多针对对象、数组、字符串的功能方法,类似 underscore。

nginx

vue-router 开启 history 模式后,需要配置一下 nginx 才能使它正常的工作,才不会出现 404。

例:

http://ticket.imlianer.com/yypt

如果不配置 nginx rewrite 直接访问带 path 的链接会报 404。

General

  • Webpack 使项目组件化
  • Vue 文档看得很舒服
  • Vux 提供了各种完善的组件

有了这些,开发一个项目将会变得很轻松。