項(xiàng)目說明

> [NuxtIMChat項(xiàng)目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui開發(fā)的仿微信聊天實(shí)例。實(shí)現(xiàn)了消息發(fā)送、圖片/視頻預(yù)覽、下拉刷新/長按彈窗、朋友圈等功能。

技術(shù)架構(gòu)

運(yùn)用技術(shù)：nuxt.js+vue.js+vuex

UI組件庫：vant (有贊移動(dòng)端vue.js組件庫)

字體圖標(biāo)：阿里iconfont圖標(biāo)庫

彈窗組件：vpopup(基于vue自定義彈框)

本地存儲(chǔ)：cookie-universal-nuxt: ^2.1.4

初步了解Nuxt.js

Nuxt.js 是一個(gè)基于 Vue.js 架構(gòu)開發(fā)的服務(wù)端SSR渲染通用應(yīng)用框架。讓你的項(xiàng)目網(wǎng)站輕松實(shí)現(xiàn)SEO功能。

大家可以去官網(wǎng)查看更詳細(xì)的資料。

https://zh.nuxtjs.org/

https://github.com/nuxt/nuxt.js

自定義組件介紹

項(xiàng)目中頁面大致布局都分為頂部、主體內(nèi)容、底部，其中頂部導(dǎo)航Navbar、底部Tab及彈窗都是自定義組件實(shí)現(xiàn)功能。

由于之前有過相關(guān)分享文章，這里不多介紹了。

vue自定義導(dǎo)航欄/標(biāo)簽欄Tabbar組件

vue自定義Popup組件|仿ios彈出框

模仿探探/陌陌卡片滑動(dòng)

項(xiàng)目中“遇見”頁面模仿了探探卡片拖拽滑動(dòng)切換功能。拖拽四周會(huì)出現(xiàn)不同的斜切視角。

大家如果對實(shí)現(xiàn)過程感興趣的話，可以去看看下面這篇文章。

Vue/Nuxt仿探探/Tinder卡片式滑動(dòng)堆疊效果

nuxt.config.js配置

Nuxt.js 默認(rèn)的配置涵蓋了大部分使用情形，可通過 nuxt.config.js 來覆蓋默認(rèn)的配置。更詳細(xì)配置信息可以去查看官網(wǎng)文檔。

https://zh.nuxtjs.org/guide/directory-structure

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中配置全局meta信息，也可以單獨(dú)在相應(yīng)頁面配置。

聊天模塊

剛開始是使用textarea實(shí)現(xiàn)。不過textarea中不能插入圖片，對于emoj表情需要做轉(zhuǎn)義處理。于是就改為使用了div的可編輯屬性來實(shí)現(xiàn)插入圖文表情。

大家如果有其它好的方法實(shí)現(xiàn)編輯器功能，歡迎留言討論！

好了，基于Nuxt實(shí)現(xiàn)IM聊天功能就介紹到這里。希望大家能喜歡~~

最后附上一個(gè)Flutter實(shí)例項(xiàng)目

Flutter+Dart聊天室|flutter仿微信界面|flutter跨端聊天實(shí)例

總結(jié)

以上是生活随笔為你收集整理的imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。