基于vue2全家桶开发的匿名朋友圈及聊天应用

前言

学习了vue全家桶后一直想找个机会来写一个完整一点的项目，这次学校举办的比赛就是一个很好的契机。由于是自己瞎搞搞，所以写起来比较随心所欲，没有过多地从设计和产品的角度去思考。这个项目包括了图片上传、发布匿名消息、点对点聊天等功能，算是一个中规中矩的练手项目，适合刚接触vue全家桶的同学学习。

技术栈

vue2 + vuex + vue-router + webpack + websocket + es6/7 + fetch + sass

项目地址

demo预览地址（建议使用chrome浏览器的手机模式浏览）
github地址

项目经验总结

部署时使用了nginx的反向代理来实现跨域，同时开启了gzip压缩了静态资源的体积大小。相关文章：反向代理、gzip。
前端的布局要适配不同的屏幕大小和各种高清屏。为了解决这个问题我使用淘宝开源的Flexible方案。这个方案的原理是通过JS来检测dpr并设置meta标签，然后动态计算html标签的font-size以确定rem的基准值。于是在写css布局时就可以使用rem单位来实现不同屏幕的适配了。
如果使用vue自带的组件间通信api来处理数据的话，随着项目的增大数据的来源就会变得难以追踪。所以为了更好地管理前端的数据，引入了vuex来处理不同组件间的数据共享。

写在最后

如果发现代码bug或有什么问题，欢迎issue。如果你能从中学到些什么，也欢迎点个star！

转载于:https://juejin.im/post/59eaf9b26fb9a0450002302e

基于vue2全家桶开发的匿名朋友圈及聊天应用相关推荐

基于React全家桶开发「网易云音乐PC」项目实战(一)
网易云音乐PC项目实战项目简介 1.项目介绍项目使用到的技术栈 CSS使用Flex进行布局配置路径别名使用: carco 项目路由使用: react-router来管理使用react-rout ...
基于Vue2全家桶的移动端AppDEMO实现
好久没更新过Vue的小文章,上次做了一个基于Vue+Mint-ui的移动端AppDemo,集成了推送功能,然后通过cordova打包生成apk,移动端表现还不错,今天把这个小东西分享出来,希望有更多的 ...
基于React全家桶开发「网易云音乐PC」项目实战(三)
前言 hello大家好,我是"风不识途",很长时间没有更新了~,很多朋友一直在催更新(其实没有),本人最近在实习实在有点忙=.=,有时间的话可以将面试&实习经历总结一下.好 ...
基于React全家桶开发「网易云音乐PC」项目实战(二)
前言本篇开始做「网易云音乐PC」项目,建议最好有以下基础react.redux.redux-thunk.react-router,上一章只是对项目进行初步介绍认识,本章节会带你完成:网易云的基本骨 ...
基于React全家桶开发「网易云音乐PC」项目实战(四)
前言前言 hello大家好我是「风不识途」,如果首次阅读本系列请点击,正在学习React的小伙伴可以克隆该项目,参考学习,尝试做一些小功能,下面我们开始完成本系列最重要的音乐播放器列表▶需要完成内容 ...
Vue2全家桶+Element搭建的PC端在线音乐网站
目录 1,前言 2,已有功能 3,使用 4,目录结构 5,页面效果 1,前言项目基于Vue2全家桶及网易云音乐 Node Api实现,网站风格简约清新,体验比较流畅. 下载地址:https://gi ...
vue全家桶开发的一些小技巧和注意事项
作者:沉末_ https://juejin.im/user/5b7c1be9e51d4538b35bfc32 前言用vue全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来, ...
vue @input带参数_Vue 全家桶开发的一些小技巧和注意事项
前言用 vue 全家桶开发一年多了,踩过不少坑,也解决了很多的问题,把其中的一些点记录下来,希望能帮到大家.以下内容基于最新版的 vue + vuex + vue-router + axios + ...
基于Vue全家桶制作的的高仿美团APP
美团外卖APP ? 项目演示地址:http://39.108.232.27:9000 ? GitHub:github.com/bxm0927/vue- 基于 Vue 全家桶 (2.x) 制作的美团外卖 ...

基于vue2全家桶开发的匿名朋友圈及聊天应用

前言

技术栈

项目地址

项目经验总结

写在最后

基于vue2全家桶开发的匿名朋友圈及聊天应用相关推荐

最新文章

热门文章