Nuxt-WeChat聊天室是基于Nuxt.js开发的手机端仿微信App界面聊天实例。运用nuxt.js+vue.js+vant+node等技术开发实现仿探探卡片滑动、消息发送、图片/视频本地预览、朋友圈等功能。

技术栈

• 编码技术：vscode nuxt.js+vue.js+vuex
• UI组件库：vant-ui: ^2.10.4
• 字体图标：阿里iconfont图标库
• 弹窗组件：vpopup（基于vue自定义对话框）
• 持久存储：cookie-universal-nuxt: ^2.1.4

目录结构

nuxt.js项目的目录结构和vue没有太大区别，只是多了一些结构性分层目录。如：layouts、middleware、pages、plugins等。

布局及配置

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>

当然大家可以根据项目需要，自定义模板也行，只需在相应的页面通过 layout: 'xxx.vue' 引入即可。

nuxt.config.js配置
默认配置文件可以配置一些 meta、路由信息、css/js及插件引入、webpack等信息。

export default {
  // 端口配置（可选）
  server: {
    // port: 3000,
    // host: '192.176.55.121'
  },
  /*
  ** 页面头部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聊天室 | nuxt.js仿探探'},
      { 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}
  ],
  // ...
}

自定义组件实现

项目中的 顶部导航栏、底部Tab标签栏、弹窗 等功能均采用自定义组件形式实现。

至于具体的实现过程，这里就不再介绍了。由于之前有过相关的分享文章，大家感兴趣的话，可以去看看哈。

vue.js|nuxt实现自定义导航栏Navbar+标签栏Tabbar组件

vue.js|nuxt实现自定义Popup弹出层组件|vue长按弹窗

模仿探探卡牌堆叠效果

项目中 “翻一翻” 页面整体分为 顶部导航+卡片滑动区+底部Tab栏，其中卡片区域效果仿制了探探/陌陌 拖拽滑动堆叠切换。

效果预览

详细的实现方法这里不多介绍，大家可以去看看下面这篇分享文章。

vue.js|nuxt仿探探/陌陌卡牌式滑动|vue拖拽翻牌效果

页面SEO配置

单独的 .vue 页面可以进行一些seo及其它选项配置信息。

<script>
export default {
    // 用于配置页面的 meta 信息
    head() {
        return {
            title: '配置标题信息 - 配置标题信息',
            meta: [
                {name:'keywords',hid: 'keywords',content: '网站关键词 | 网站关键词 | 网站关键词'},
                {name:'description',hid:'description',content: '网站描述 | 网站描述 | 网站描述'}
            ]
        }
    },
    // 自定义布局模板
    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>

下拉刷新/侧滑菜单

下拉刷新功能
下拉刷新使用了 Vant 组件库中的 van-pull-refresh 组件。

<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
    <!-- 下拉提示 -->
    <template #pulling>
      <i class="iconfont icon-down"></i> 下拉即可刷新...
    </template>
    <!-- 释放提示 -->
    <template #loosing>
      <i class="iconfont icon-up"></i> 释放立即刷新...
    </template>

    <!-- ... -->
</van-pull-refresh>

侧边滑动菜单

<van-swipe-cell v-for="(item,index) in recordList" :key="index">
    <!-- ... -->

    <!-- 右侧按钮 -->
    <template #right>
      <div class="swipe__cell-btns flexbox">
        <div class="nuxt__btn nuxt__btn-primary nuxt__btn--square" @click="handleTopMost">置顶</div>
        <div class="nuxt__btn nuxt__btn-primary nuxt__btn--square" @click="handleDelete">删除</div>
      </div>
    </template>
</van-swipe-cell>

OK，基于Nuxt.js+Vue实现仿微信界面聊天实例就分享这么多。希望大家能喜欢~~

最后分享一个Flutter实例项目

Flutter+Dart仿微信App聊天室|flutter聊天实例