1、我的项目简介
Nuxt.js是目前比拟热门的服务端渲染SSR框架。凭借其更好的SEO、更快的内容达到工夫(*首屏渲染速度快*) 加之基于Vue.js技术开发，更易于上手，取得了很多技术开发者的青眼。
nuxt_chatroom我的项目是基于nuxt+vue+vuex+vant等技术开发的仿微信|Tinder界面聊天实例。实现了卡片式翻动、音讯发送/表情gif、图片/视频预览、红包/朋友圈等性能。
成果片段
啧啧，成果还能够吧，上面就来解说下实现过程。
2、技术框架
- 应用技术：nuxt.js+vue.js+vuex
- UI组件库：vant-ui (有赞挪动端vue.js组件库)
- 字体图标：阿里iconfont图标库
- 弹窗组件：vpopup（基于vue自定义弹框）
- 本地存储：cookie-universal-nuxt: ^2.1.4
大家如果对Nuxt.js不相熟的话，能够先去官网看看材料。其实只有你会vue，上手就非常简单的。
https://zh.nuxtjs.org/
https://github.com/nuxt/nuxt.js
3、我的项目目录构造
想理解更多Nuxt.js目录构造及应用阐明，能够去参看上面链接。
https://zh.nuxtjs.org/guide/d...
4、对于自定义组件
我的项目中 顶部Navbar、Tabbar及弹窗 均是自定义组件实现的，这里不作过多解说，感兴趣的能够去看看上面的分享文章。
Nuxt/Vue仿咸鱼Tabbar凸起成果|vue自定义导航栏
Vue自定义弹框组件|仿android/ios弹窗成果
5、仿Tinder|探探卡牌翻动
遇见页面原型参考了社交App探探的卡片滑动成果。整体分为 顶部导航、滑动区、底部标签栏 等三个局部。
这里不过多介绍，感兴趣的能够去看上面的这篇分享文章。
Vue|Nuxt.js仿探探卡片式左右拖拽|vue仿Tinder
6、nuxt默认布局
nuxt我的项目中，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我的项目中是通过<nuxt />来显示主体内容的，而vue中则是应用<router-view />。
nuxt.config.js配置文件
nuxt.js的默认配置文件，能够配置 meta、路由信息、css/js及插件引入、webpack等配置。
https://zh.nuxtjs.org/guide/configuration/
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} ], // ...}nuxt.config.js中的meta是全局配置的，如果独自页面配置，参考如下：
<script>export default { // 配置页面 meta 信息 head() { return { title: '这里是题目信息 - 题目信息', meta: [ {name:'keywords',hid: 'keywords',content: '关键字1 | 关键字2 | 关键字3'}, {name:'description',hid:'description',content: '形容1 | 形容2 | 形容3'} ] } }, // 自定义布局页面 layout: 'xxx.vue', // 中间件解决 middleware: 'auth', // 异步解决 async asyncData({app, params, query, store}) { let uid = params.uid let cid = query.cid return { uid: uid, cid: cid, } }, // ...}</script>7、Nuxt聊天模块
一开始思考聊天模块的编辑框应用input或textarea实现。可是文本框中只能插入emoj字符 (:32 :微笑:)，不能插入emoj图片表情，不是本人想要的成果。
如上图：于是就应用了div的可编辑性能contenteditable来插入图文内容。
<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>通过一系列解决，编辑器反对多行文本输出、光标处插入emoj表情等性能。
如下图：在vue.js我的项目中如何获取上传视频的第一帧作为封面图？
网上的很多的解决方案，会使截图呈现黑屏状况。起初通过重复调试，终于实现了这个成果。
let file = this.$refs.chooseVideo.files[0]if(!file) returnlet size = Math.floor(file.size / 1024)if(size > 3*1024) { alert('请抉择3MB以内的视频') return false}// 获取视频地址let videoUrlif(window.createObjectURL != undefined) { videoUrl = window.createObjectURL(file)} else if (window.URL != undefined) { videoUrl = window.URL.createObjectURL(file)} else if (window.webkitURL != undefined) { videoUrl = window.webkitURL.createObjectURL(file)}let $video = document.createElement('video')$video.src = videoUrl// 避免挪动端封面黑屏或透明确屏$video.play()$video.muted = true$video.addEventListener('timeupdate', () => { if($video.currentTime > .1) { $video.pause() }})// 截取视频第一帧作为封面$video.addEventListener('loadeddata', function() { setTimeout(() => { var canvas = document.createElement('canvas') canvas.width = $video.videoWidth * .8 canvas.height = $video.videoHeight * .8 canvas.getContext('2d').drawImage($video, 0, 0, canvas.width, canvas.height) let videoThumb = canvas.toDataURL('image/png') console.log(videoThumb) }, 16);})大家有趣味的话，能够本人去弄一弄试试哈。如果有其它好的办法，欢送交换探讨！
OK，基于Nuxt.js仿微信聊天室我的项目就分享到这里。心愿对大家有些帮忙！✍????
最初附上个Flutter我的项目实例
flutter+dart聊天室|flutter仿微信App聊天界面|flutter聊天实例