王尘宇

媒介

趁着国庆假期给本身充充电，于是就进修捣鼓了下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+VuexUI组件库：Vant（有赞Vue挪动端组件库）弹框组件：VPopup字体图标：阿里iconfont字体图标库当地存储：cookie-universal-nuxt（办事端存储Cookie）

一睹效果

vue自定义headerBar及tabBar

项目顶用到的顶部导航栏及底部导航别离封拆在components目次下的headerBar.vue和tabBar.vue组件。

因为之前有一篇基于Vue.js自定义导航栏的分享文章，那里就不做过多介绍。

基于Nuxt/Vue自定义顶部导航+底部导航

vue自定义弹框组件VPopup

项目中利用到的弹窗场景均是本身开发的Vue弹窗组件VPopup。

糅合了Vant组件库中的Popup弹出层、Notify通知、Dialog对话框、Toast加载框及ActionSheet底部弹出框等功用。

前两天写了一篇分享文章，那里也不做详细介绍。

基于Nuxt/Vue自定义弹框组件

nuxt.config.js设置装备摆设

一些简单的常用设置装备摆设，详细详细设置装备摆设可自行去参看官网文档。

https://zh.nuxtjs.org/guide/configuration/exportdefault{// 端口设置装备摆设（可选）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项目中是通过来显示主体内容，而在nuxt项目中则是利用来显示。

<template><divclass="nuxt__container flexbox flex-col"><header-bar/><divclass="nuxt__scrollview scrolling flex1"><nuxt/>div><tab-bar/>div>template>

当然也能够自定义规划，如：layouts/ucenter.vue，然后在响应的页面挪用即可。

<template>template><script>exportdefault{layout:ucenter// ...}script>

xxx.vue页面的开发形式根本仍是和之前vue页面开发一样，只是能够自定义如下一些设置装备摆设项。

exportdefault{// 自定义规划组件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 ...`}]}},// 异步获取传来数据asyncasyncData({app,params,query,store}) {//console.log(app.$cookies.get(token))//console.log(app.$api.getArtileList())letid = params.id;letcid = query.cid;letuser = store.state.user;return{id: id,cid: cid,user: user}},//...}Nuxt聊天模块

聊天页面把编纂框别离成了一个零丁组件挪用。

<template><divref="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(()=>{varcanvas =document.createElement(canvas)canvas.width = $video.videoWidth *.8canvas.height = $video.videoHeight *.8canvas.getContext(2d).drawImage($video,0,0, canvas.width, canvas.height)letimg = canvas.toDataURL(image/png)console.log(img)} ,16);})

后来本身颠末频频测试修改后，完美处理了canvas视频截图呈现黑屏问题。

handleChooseVideo() {letfile =this.$refs.chooseVideo.files[0]if(!file)returnletsize =Math.floor(file.size /1024)// 判断视频大小if(size >5*1024) {this.$vpopup({content:请选择5MB以内的视频！})returnfalse}// 获取视频地址letvideoUrlif(window.createObjectURL !=undefined) {videoUrl =window.createObjectURL(file)}elseif(window.URL !=undefined) {videoUrl =window.URL.createObjectURL(file)}elseif(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(()=>{varcanvas =document.createElement(canvas)canvas.width = $video.videoWidth *.8canvas.height = $video.videoHeight *.8canvas.getContext(2d).drawImage($video,0,0, canvas.width, canvas.height)letimg = canvas.toDataURL(image/png)} ,16);})}

若是感兴趣的话能够去测试下，若是各人有更好的办法，欢送留言讨论。

好了，今天的分享就到那里。希望对各人有所帮忙，写文不容易，记得多撑持一下哟~~