webpack+vue+vux+express+lowdb实践

awesome23 发布于2019-07-25 13:47 / 580人阅读

摘要：花了一天时间，做了一套加班报名系统，前端基于，后端基于。如果需求对视觉要求不高，还是非常推荐把引进到项目中的。提供了各种各样的组件，基本上拿来就能用。需要注意的是，读写文件默认都是同步的，将的写配置成异步写入能极大的提升性能。

花了一天时间，做了一套加班报名系统，前端基于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版本的文档，怎么也跑不起来，后来才发现是自己看错文档了。

webpack

vue

vux

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

Demo https://vux.li/

Document https://vuxjs.gitbooks.io/vux/content/

express + lowdb

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

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

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

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

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

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

lowdb

lodash

nginx

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

例：

http://ticket.imlianer.com/yypt

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

General

Webpack 使项目组件化

Vue 文档看得很舒服

Vux 提供了各种完善的组件

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

专线服务混合云 Vue+Express vue20开发实践 lowdb vux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39365.html

Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0
前端每周清单第 45 期: Safari 支持 Service Worker, Parcel 完整教

摘要：的另一个核心特性，苹果表示也正在开发中，按开发进度可能几个月后就能与我们见面。是基于的本地化数据库，支持以及浏览器环境。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端每周清单。本期是 2017 年的最后一...

赵春朋 2019-08-21 18:24 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
vue项目中安装和使用vux组件

摘要：是一款基于构建的移动组件库使用安装安装必须配合使用安装用以正确编译源码，否则会出现安装以正确进行语言文件读取在文件进行配置将代码赋值给变量在里加入完整的内容中添加 vux是一款基于Vue构建的移动UI组件库（https://doc.vux.li/zh-CN/） 1.使用npm安装vuxnpm install vux --saveshowImg(https://segmentfault....

yvonne 2019-08-26 10:15 评论0 收藏0