nuxt+vuex+vant聊天实例|vue+nuxt.js仿微信模板

xiaoyan2015 · · 1461 次点击 · 开始浏览    置顶
这是一个创建于 的主题,其中的信息可能已经有所发展或是发生改变。

> Nuxt.js一个基于Vue.js构建的SSR渲染框架,让你的网站也能拥有SEO功能。 > [NuxtChat聊天项目](https://juejin.im/post/6884050736968269832) 是基于nuxt.js+vue.js+vuex+vant等技术构建的移动端聊天实例。实现了消息发送、图片/视频预览、红包/朋友圈等功能。 ![](https://img-blog.csdnimg.cn/20201015074233331.gif) ![](https://img-blog.csdnimg.cn/2020101507432782.gif) ## 技术栈 - 技术框架:nuxt.js+vue.js+vuex - UI组件库:vant: ^2.10.4 - iconfont图标:阿里字体图标库 - 弹窗组件:vpopup(基于vue封装自定义弹框) - 本地存储:cookie-universal-nuxt: ^2.1.4 ## 目录结构 ![](https://img-blog.csdnimg.cn/img_convert/846fbdf25dfb35063e897b37afe7b465.png) 下面展示一些效果预览。 ![002360截图20201006094101981.png](https://static.studygolang.com/201019/db507f68ed5bbd4140c89b1d72cc798d.png) ![004360截图20201006094343496.png](https://static.studygolang.com/201019/ba58ecdc8b58ee2a4ef49e1baf1adf8d.png) ![006360截图20201006095144246.png](https://static.studygolang.com/201019/e78c1e5fe45984cc1e869991c59b1351.png) ![013360截图20201006100142415.png](https://static.studygolang.com/201019/7c6fe820b7d59a43f22cd4c5cb1f4375.png) ![014360截图20201006100106422.png](https://static.studygolang.com/201019/ed9476bc78ee70d5e3f0c62415800da0.png) ![018360截图20201006100427793.png](https://static.studygolang.com/201019/da181ad33365c38c4e72f0c2de604eb3.png) ![022360截图20201006100619688.png](https://static.studygolang.com/201019/0860d50571d10d68a689c853c1ff79a3.png) ![019360截图20201006100444782.png](https://static.studygolang.com/201019/f85456534b050b2cdd75fa55fda6da16.png) ![024360截图20201006101037824.png](https://static.studygolang.com/201019/40a0c8db5a2825bf0e043a7b76ca082d.png) ![026360截图20201006102257977.png](https://static.studygolang.com/201019/32f5128b7ea02c260dfa4433ed1e2cbb.png) ![029360截图20201006102626223.png](https://static.studygolang.com/201019/7c282b31952609da59af500534224a8e.png) ![030360截图20201006103033521.png](https://static.studygolang.com/201019/2320d133ad2cd0b66d22fae9cc2e442f.png) ![032360截图20201006103109737.png](https://static.studygolang.com/201019/57cdc6923f04addb2c1c10a5e6475bad.png) ![034360截图20201006110344172.png](https://static.studygolang.com/201019/540751adba8d8b6cb2009e825b532d78.png) ![035360截图20201006103822412.png](https://static.studygolang.com/201019/40053673e477038ee17235d9e17d8337.png) ![037360截图20201006104311641.png](https://static.studygolang.com/201019/785c22497ec24bc6810bfa49cff57970.png) ![040360截图20201006104829817.png](https://static.studygolang.com/201019/1295b67bf28e7e34419ee7bbb7a421bf.png) ## 布局及配置 nuxt.js项目中默认的布局模板是layouts目录下的default.vue页面。 ``` <!-- 布局模板 --> <template> <div class="nuxt__container flexbox flex-col"> <header-bar /> <div class="nuxt__scrollview scrolling flex1"><nuxt /></div> <tab-bar /> </div> </template> ``` **nuxt.config.js配置** 默认配置文件可以配置一些 meta、路由信息、css/js及插件引入、webpack等信息。 ``` export default { // 端口配置(可选) server: { port: 3000, host: '192.168.122.100' }, /* ** 页面头部meta信息配置 */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' }, { hid: 'keywords', name: 'keywords', content: 'Vue.js | Nuxt.js | Nuxt仿微信'}, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, { rel: 'stylesheet', href: '/js/wcPop/skin/wcPop.css' }, ], script: [ { src: '/js/fontSize.js' }, { src: '/js/wcPop/wcPop.js' }, ] }, /* ** 全局css配置 */ css: [ '~/assets/css/reset.css', '~/assets/css/layout.css', '~/assets/fonts/iconfont.css', ], /* ** 全局插件列表 */ plugins: [ '~/plugins/vue-global.js', // 通过这种方式引入本地js也可以(需设置ssr:false) // {src: '~/assets/js/fontSize.js', ssr: false} ], // ... } ``` ## 自定义Navbar+Tabbar+Vpopup组件 项目中的 顶部导航栏、底部Tab标签栏、弹窗 等功能均采用自定义组件形式实现。 ![](https://img-blog.csdnimg.cn/img_convert/a5051fc4afb57072ae9954b57627c2d2.png) ![](https://img-blog.csdnimg.cn/img_convert/51248eab8d8ef86b8c536382ac1004ab.png) ![](https://img-blog.csdnimg.cn/img_convert/2df9ce21a50b270eb7ef1a15a3f58871.png) 至于具体的实现过程,这里就不再介绍了。由于之前有过相关的分享文章,大家感兴趣的话,可以去看看哈。 [vue实现自定义导航栏Navbar+标签栏Tabbar组件](https://juejin.im/post/6881918921323216910) [vue实现自定义Popup弹出层组件|vue长按弹窗](https://juejin.im/post/6880827220563066894) ## vue|nuxt实现探探卡片效果 项目中 “翻一翻” 页面整体分为 顶部导航+卡片滑动区+底部Tab栏,其中卡片区域效果仿制了探探/陌陌 拖拽滑动堆叠切换。 ![](https://img-blog.csdnimg.cn/img_convert/e9b883abb3348fab4e3f114430cb1658.png) 详细的实现方法这里不多介绍,大家可以去看看下面这篇分享文章。 [vue/nuxt仿探探/陌陌卡牌式滑动|vue拖拽翻牌效果](https://juejin.im/post/6882911553008435208) ## 聊天模块 一开始考虑聊天模块的编辑框使用input或textarea实现。可是文本框中只能插入emoj字符 (:32 :微笑:),不能插入emoj图片表情,不是自己想要的效果。 ![](https://image-static.segmentfault.com/404/123/4041236277-0219cde0da7d2961_articlex) ``` <template> <div ref="editor" class="editor" contentEditable="true" v-html="editorText" @click="handleClick" @input="handleInput" @focus="handleFocus" @blur="handleBlur" style="user-select:text;-webkit-user-select:text;"> </div> </template> ``` ok,基于nuxt.js+vue+vuex仿微信聊天实例就分享到这里。希望对大家有些帮助! ![](https://sdkfiledl.jiguang.cn/community/15746/image/Fpmji0GOyQbyE9NLSBz_bRZKvdH-.gif)

有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1461 次点击  ∙  1 赞  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传