nuxt+vant-ui聊天实例|nuxt/vue仿微信模板
运用Nuxt.js+vue.js+vuex+vant-UI等技术构架开发的仿微信App界面聊天模板实例项目。实现了消息+表情发送、图片+视频查看、下拉刷新+长按弹出框、红包+朋友圈等功能。
使用技术
技术框架：nuxt.js+vue.js+vuex
ui组件库：vant-ui (有赞移动端vue.js组件库)
字体图标：阿里iconfont图标库
弹窗组件：vpopup（基于vue自定义弹框）
本地存储：cookie-universal-nuxt: ^2.1.4
下面展示一些具体的项目效果吧。
快速了解Nuxt.js
Nuxt.js是一个基于Vue.js 构建的服务端渲染框架。让你的网站也能实现SEO功能。Nuxt预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。例如异步数据加载、中间件支持、布局支持等。
Github上面拥有的star高达30.8K+。这就充分说明了很受开发者的青睐！
nuxt自定义组件介绍
项目中的 顶部导航条Navbar/底部Tab标签栏/弹出框 组件均是自定义实现功能。
之前有过相关的分享文章，这里就不作详细介绍了。
nuxt实现探探卡片滑动
项目中“翻一翻”页面实现类似探探卡片滑动功能。实现了拖拽滑动及点击下方按钮切换卡牌。
nuxt布局模板
<template>
<div class="nuxt__container flexbox flex-col">
<header-bar />
<div class="nuxt__scrollview scrolling flex1">
<nuxt />
</div>
<tab-bar />
</div>
</template>
大家也可以根据项目需要，自定义布局模板，只需在layouts目录下新建xxx.vue模板，然后在相应的页面通过 layout: 'xxx' 引入即可使用。
nuxt.config.js配置文件
export default {
// 端口配置（可选）
server: {
// port: 3003,
// host: '192.168.111.69'
},
// 页面头部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包含了大部分的全局配置信息，当然也可以在相应的.vue页面进行一些自定义配置选项。
<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>
聊天模块
另外聊天编辑框原本是使用textarea实现，考虑到文本框中不能插入表情图，后来就改为使用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>
好了，就分享到这里吧。希望对大家有点点的帮助哈！！✍
