NuxtJs聊天App实例|nuxt+vue仿微信界面

xiaoyan2015

项目简介
NuxtChatRoom项目是基于nuxt.js+vue+vant等技术开发的手机端App仿微信界面实例，实现编辑器光标处插入表情，图片/视频预览，长按菜单，红包/朋友圈等功能。



技术栈

• 使用技术：nuxt.js+vue.js+vuex
• UI组件库：vant-ui (有赞移动端vue.js组件库)
• 字体图标：阿里iconfont图标库
• 弹窗组件：vpopup（基于vue自定义弹框）
• 本地存储：cookie-universal-nuxt: ^2.1.4
  

vue/nuxt自定义导航+弹框
顶部导航 / 底部标签栏及弹出框是自定义组件实现。可以去参看这篇分享文章。

Vue|Nuxt自定义导航条/底部TabBar组件|vue仿咸鱼凸起Tab

Vue+Nuxt自定义弹窗|vue.js仿微信/ios弹层组件

vue/nuxt实现探探卡片滑动
“遇见”页面功能参考了探探/陌陌卡片拖拽堆叠效果。



如果对实现过程有兴趣的话，可以去看看这篇文章。

Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果

nuxt.config.js配置

1. export default {
   
2.   // 端口配置（可选）
   
3.   server: {
   
4.     port: 3000,
   
5.     host: '192.168.101.69'
   
6.   },
   
7.   /*
   
8.   ** 页面头部meta信息配置
   
9.   */
   
10.   head: {
    
11.     title: process.env.npm_package_name || '',
    
12.     meta: [
    
13.       { charset: 'utf-8' },
    
14.       { name: 'viewport', content: 'width=device-width, initial-scale=1, user-scalable=no' },
    
15.       { hid: 'keywords', name: 'keywords', content: 'Vue.js | Nuxt.js | Nuxt仿微信'},
    
16.       { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    
17.     ],
    
18.     link: [
    
19.       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    
20.       { rel: 'stylesheet', href: '/js/wcPop/skin/wcPop.css' },
    
21.     ],
    
22.     script: [
    
23.       { src: '/js/fontSize.js' },
    
24.       { src: '/js/wcPop/wcPop.js' },
    
25.     ]
    
26.   },
    
27.   /*
    
28.   ** 全局css配置
    
29.   */
    
30.   css: [
    
31.     '~/assets/css/reset.css',
    
32.     '~/assets/css/layout.css',
    
33.     '~/assets/fonts/iconfont.css',
    
34.   ],
    
35.   /*
    
36.   ** 全局插件列表
    
37.   */
    
38.   plugins: [
    
39.     '~/plugins/vue-global.js',
    
40.     // 通过这种方式引入本地js也可以（需设置ssr:false）
    
41.     // {src: '~/assets/js/fontSize.js', ssr: false}
    
42.   ],
    
43.   // ...
    
44. }

复制代码

meta信息可以在nuxt.config.js中全局配置，也可以在单独的.vue页面配置一些选项。

1. <script>
   
2. export default {
   
3.     // 用于配置页面的 meta 信息
   
4.     head() {
   
5.         return {
   
6.             title: '这里是标题信息 - 标题信息',
   
7.             meta: [
   
8.                 {name:'keywords',hid: 'keywords',content: '关键字1 | 关键字2 | 关键字3'},
   
9.                 {name:'description',hid:'description',content: '描述1 | 描述2 | 描述3'}
   
10.             ]
    
11.         }
    
12.     },
    
13.     // 自定义布局模板
    
14.     layout: 'xxx.vue',
    
15.     // 中间件验证
    
16.     middleware: 'auth',
    
17.     // 异步数据处理
    
18.     async asyncData({app, params, query, store}) {
    
19.         let uid = params.uid
    
20.         let cid = query.cid
    
21.         return {
    
22.             uid: uid,
    
23.             cid: cid,
    
24.         }
    
25.     },
    
26.     // ...
    
27. }
    
28. </script>

复制代码

聊天模块
一开始是考虑使用textarea实现编辑框功能，后来考虑到文本框不能插入表情图原因，于是就使用了div的可编辑属性来实现。

1. <template>
   
2.     <div
   
3.         ref="editor"
   
4.         class="editor"
   
5.         contentEditable="true"
   
6.         v-html="editorText"
   
7.         @click="handleClick"
   
8.         @input="handleInput"
   
9.         @focus="handleFocus"
   
10.         @blur="handleBlur"
    
11.         style="user-select:text;-webkit-user-select:text;">
    
12.     </div>
    
13. </template>

复制代码

好了，运用Nuxt.js开发聊天室实例项目就介绍到这里。希望对大家有些帮助！！
Flutter聊天室|dart+flutter仿微信App界面|flutter聊天实例