nuxt+vant-ui聊天實例|nuxt/vue仿微信模板
運(yùn)用Nuxt.js+vue.js+vuex+vant-UI等技術(shù)構(gòu)架開發(fā)的仿微信App界面聊天模板實例項目。實現(xiàn)了消息+表情發(fā)送、圖片+視頻查看、下拉刷新+長按彈出框、紅包+朋友圈等功能。
使用技術(shù)
技術(shù)框架：nuxt.js+vue.js+vuex
ui組件庫：vant-ui (有贊移動端vue.js組件庫)
字體圖標(biāo)：阿里iconfont圖標(biāo)庫
彈窗組件：vpopup（基于vue自定義彈框）
本地存儲：cookie-universal-nuxt: ^2.1.4
下面展示一些具體的項目效果吧。
快速了解Nuxt.js
Nuxt.js是一個基于Vue.js?構(gòu)建的服務(wù)端渲染框架。讓你的網(wǎng)站也能實現(xiàn)SEO功能。Nuxt預(yù)設(shè)了利用 Vue.js 開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。例如異步數(shù)據(jù)加載、中間件支持、布局支持等。
Github上面擁有的star高達(dá)30.8K+。這就充分說明了很受開發(fā)者的青睞！
nuxt自定義組件介紹
項目中的?頂部導(dǎo)航條Navbar/底部Tab標(biāo)簽欄/彈出框?組件均是自定義實現(xiàn)功能。
之前有過相關(guān)的分享文章，這里就不作詳細(xì)介紹了。
nuxt實現(xiàn)探探卡片滑動
項目中“翻一翻”頁面實現(xiàn)類似探探卡片滑動功能。實現(xiàn)了拖拽滑動及點擊下方按鈕切換卡牌。
nuxt布局模板
<template>??
? <div class="nuxt__container flexbox flex-col">??
? ? <header-bar />??
? ? <div class="nuxt__scrollview scrolling flex1">
<nuxt />
</div>??
? ? <tab-bar />??
? </div>??
</template>
大家也可以根據(jù)項目需要，自定義布局模板，只需在layouts目錄下新建xxx.vue模板，然后在相應(yīng)的頁面通過 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也可以（需設(shè)置ssr:false）??
? ? // {src: '~/assets/js/fontSize.js', ssr: false}??
? ],??
? // ...??
}
nuxt.config.js包含了大部分的全局配置信息，當(dāng)然也可以在相應(yīng)的.vue頁面進(jìn)行一些自定義配置選項。
<script>??
export default {??
? ? // 配置頁面 meta 信息??
? ? head() {??
? ? ? ? return {??
? ? ? ? ? ? title: '這里是標(biāo)題信息 - 標(biāo)題信息',??
? ? ? ? ? ? meta: [??
? ? ? ? ? ? ? ? {name:'keywords',hid: 'keywords',content: '關(guān)鍵字1 | 關(guān)鍵字2 | 關(guān)鍵字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實現(xiàn)，考慮到文本框中不能插入表情圖，后來就改為使用div的可編輯屬性contenteditable來實現(xiàn)功能。
<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>
好了，就分享到這里吧。希望對大家有點點的幫助哈?。?
