webpack+vue+vux+express+lowdb实践

发布时间:2019-05-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了webpack+vue+vux+express+lowdb实践脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

花了一天时间,做了一套加班报名系统,前端基于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

webpack+vue+vux+express+lowdb实践

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

webpack+vue+vux+express+lowdb实践

exPRess + lowdb

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

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

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

webpack+vue+vux+express+lowdb实践

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

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

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

nginx

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

例:

http://ticket.imlianer.com/yypt

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

webpack+vue+vux+express+lowdb实践

General

  • Webpack 使项目组件化

  • Vue 文档看得很舒服

  • Vux 提供了各种完善的组件

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

脚本宝典总结

以上是脚本宝典为你收集整理的webpack+vue+vux+express+lowdb实践全部内容,希望文章能够帮你解决webpack+vue+vux+express+lowdb实践所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。