前言
趁着国庆假期给自己充充电，于是就学习捣鼓了下Nuxt项目。Nuxt.js是一个基于Vue.js的服务端SSR渲染框架，能够让你的vue页面也具备SEO功能。
NuxtJS拥有的star高达30.7K+。说明还是很受开发者欢迎。大家可以自行去官网查阅使用资料。
https://zh.nuxtjs.org/
https://github.com/nuxt/nuxt.js项目介绍
Nuxt-ChatRoom 基于Nuxt.js+Vue+Vuex+Vant等技术构建的移动端仿微信App界面聊天实例。实现了消息发送/gif表情、图片/视频预览、消息下拉刷新、长按菜单、朋友圈等功能。
技术栈
- 框架技术：Nuxt.js+Vue.js+Vuex
- UI组件库：Vant（有赞Vue移动端组件库）
- 弹框组件：VPopup
- 字体图标：阿里iconfont字体图标库
- 本地存储：cookie-universal-nuxt（服务端存储Cookie）
一睹效果
vue自定义headerBar及tabBar
项目中用到的顶部导航栏及底部导航分别封装在components目录下的headerBar.vue和tabBar.vue组件。
由于之前有一篇基于Vue.js自定义导航栏的分享文章，这里就不作过多介绍。
vue自定义弹框组件VPopup
项目中使用到的弹窗场景均是自己开发的Vue弹窗组件VPopup。
糅合了Vant组件库中的 Popup弹出层、Notify通知、Dialog对话框、Toast加载框及ActionSheet底部弹出框 等功能。
前两天写了一篇分享文章，这里也不作详细介绍。
nuxt.config.js配置
一些简单的常用配置，具体详细配置可自行去参看官网文档。
https://zh.nuxtjs.org/guide/configuration/export default {
// 端口配置（可选）
server: {
port: 3000,
host: '192.168.253.1'
},
/*
** 页面头部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',
],
}Nuxt默认布局
nuxt中默认布局页面是ayouts目录下default.vue文件。
在vue项目中是通过 <router-view /> 来显示主体内容，而在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/ucenter.vue ，然后在相应的页面调用即可。
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'ucenter'
// ...
}
</script>xxx.vue页面的开发模式基本还是和之前vue页面开发一样，只是可以自定义如下一些配置项。
export default {
// 自定义布局组件
layout: 'ucenter',
// 中间件验证
middleware: 'auth',
// 顶部meta信息配置
// head: {
// title: '管理页',
// },
head() {
return {
title: `${this.title} - 标题内容`,
meta: [
{name:'keywords',hid: 'keywords',content:`关键字1 | 关键字2 ...`},
{name:'description',hid:'description',content:`描述1 | 描述2 ...`}
]
}
},
// 异步获取传来数据
async asyncData({app,params,query,store}) {
//console.log(app.$cookies.get('token'))
//console.log(app.$api.getArtileList())
let id = params.id;
let cid = query.cid;
let user = store.state.user;
return {
id: id,
cid: cid,
user: user
}
},
//...
}Nuxt聊天模块
聊天页面把编辑框分离成了一个单独组件调用。
<!-- //vue实现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>编辑框支持多行文本换行、光标处插入gif表情、删除光标处内容等功能。
vue中如何上传视频并截取视频第一帧作为封面？？我猜很多同学都困扰这个问题吧
网上很多介绍说下面这种方法可以实现。不过这种方法使得截图会出现白屏或黑屏的情况。
let $video = document.createElement('video')
$video.addEventListener('loadeddata', function() {
setTimeout(() => {
var canvas = document.createElement('canvas')
canvas.width = $video.videoWidth * .8
canvas.height = $video.videoHeight * .8
canvas.getContext('2d').drawImage($video, 0, 0, canvas.width, canvas.height)
let img = canvas.toDataURL('image/png')
console.log(img)
} , 16);
})后来自己经过反复测试修改后，完美解决了canvas视频截图出现黑屏问题。
handleChooseVideo() {
let file = this.$refs.chooseVideo.files[0]
if(!file) return
let size = Math.floor(file.size / 1024)
// 判断视频大小
if(size > 5*1024) {this.$vpopup({content: '请选择5MB以内的视频！'})
return false
}
// 获取视频地址
let videoUrl
if(window.createObjectURL != undefined) {
videoUrl = window.createObjectURL(file)
} else if (window.URL != undefined) {
videoUrl = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
videoUrl = window.webkitURL.createObjectURL(file)
}
let $video = document.createElement('video')
$video.src = videoUrl
$video.play()
$video.muted = true
$video.addEventListener('timeupdate', () => {
if($video.currentTime > .1) {
$video.pause()
}
})
$video.addEventListener('loadeddata', function() {
setTimeout(() => {
var canvas = document.createElement('canvas')
canvas.width = $video.videoWidth * .8
canvas.height = $video.videoHeight * .8
canvas.getContext('2d').drawImage($video, 0, 0, canvas.width, canvas.height)
let img = canvas.toDataURL('image/png')
} , 16);
})
}如果感兴趣的话可以去测试下，如果大家有更好的方法，欢迎留言讨论。
好了，今天的分享就到这里。希望对大家有所帮助，写文不易，记得多支持一下哟~~