Vue.js
文章平均质量分 74
GHkmmm
cv工程师
展开
-
基于Nuxtjs的同构渲染实践
同构渲染属于是SSR的一种,特点在于可以使用同一套代码构建SSR资源和静态资源,使得应用可以同时具备SSR和SPA的优势。原创 2022-06-28 13:42:24 · 884 阅读 · 0 评论 -
Vue 客户端直传OSS跨域、HTTP到HTTPS、上传超时、限制大小问题
一、整体思路客户端先向服务端发送请求,请求格式如下ossPaht:oss绝对地址fileExt:文件后缀类型服务端签名,返回数据,格式如下signedUrl上传目标地址cdnUrl下载可使用地址contentType文件类型通过服务端返回的signedUrl,携带上传的文件请求signedUrl直传OSS二、问题跨域(这个不需要前端解决)协议冲突问题服务端返回的signedUrl是http协议但是客户端域名却是https,https无法向http发送请求解原创 2021-03-25 14:03:27 · 3471 阅读 · 0 评论 -
实现前端本地预览音乐文件歌名,歌手,音乐时长(Vue项目)
实现前端本地预览音乐文件歌名,歌手,音乐时长(Vue项目)获取歌名歌手名我们需要借助一个插件jsmediatags使用方法npm install jsmediatags --savenpm安装后 在main.js中引入// main.jsimport jsmediatags from 'jsmediatags';// 挂载到Vue的原型上,后面就能通过this直接调用Vue.prototype.jsmediatags = jsmediatags示例文件// xxx.vue<t原创 2020-11-06 15:12:07 · 1663 阅读 · 8 评论 -
关于批量上传音乐文件的解决方案(Vue项目)
需求项目是vue项目,要求添加多个音乐文件,然后一次传递到后端刚开始的想法是用一个数组(MusicList)包裹多个音乐对象传递到后端[ ... { album: File, music: File, lrc: File, name: string, artist: string, account: string, type: 0 或者 1 } {原创 2020-11-06 14:32:02 · 587 阅读 · 0 评论 -
Vue3如何检查子组件类型
需求:检查parent组件的子组件是否为children组件<parent> <children></children></parent>解决方法拿到context.slots.default(),其中包含了parent组件下所有子组件的信息然后遍历context.slots.default(),其中有type属性,通过type属性我们可以知道每一个子组件的类型,是div还是span还是children…import children f.原创 2020-09-30 15:26:57 · 784 阅读 · 1 评论 -
Vue项目部署Nginx踩过的坑
一、问题描述在开发环境中,使用的是在vue.config.js中配置devServer的方法解决的跨域,但是打包部署到服务器上后,发现还是无法访问服务端数据,后面查阅资料发现vue.config.js在打包后会失效,所以得在Nginx上配置反向代理实现二、实现反向代理location /api/ { proxy_pass http://<ip地址>/; #反向代理}三、刷新页面404解决配置nginxlocation / { try_files $uri $uri/原创 2020-09-13 10:42:29 · 445 阅读 · 0 评论 -
深入理解v-model
v-model的实质<input type="text" v-model="username"> 其实v-model实质上就是一个语法糖,等价于<input type="text" :value="username" @input="username=$event.target.value">相当于对input框的input事件进行了监听,其实在vue的源码中也是这么实现的想要手写实现修改props值的问题在日常开发中,我们经常会遇到需要修改props中的某个值的场原创 2020-08-06 11:53:51 · 281 阅读 · 0 评论 -
使用vite搭建Vue3项目
全局安装create-vite-app# yarnyarn global add create-vite-app@1.18.0 # npmnpm i -g create-vite-app@1.18.0创建项目目录# oreo-ui是项目名称cva oreo-uicreate-vite-app oreo-ui根据提示安装对应依赖1.cd oreo-ui2.npm install(or `yarn`)3.npm run dev(or `yarn dev`)预览项目在浏览器输入原创 2020-08-05 20:17:03 · 10881 阅读 · 1 评论 -
300行代码实现Vue的MVVM响应式原理
前言源码下载Vue的响应式原理是面试老生常谈的问题了,而大多数人会选择直接背答案这样的形式去应付面试,一旦面试官继续追问,便什么也答不上来了,所以,我希望能通过参考Vue源码的形式,动手编写代码(大概300行左右)实现一个简单的Vue的MVVM框架,从而让我们更好的理解Vue的响应式原理。我们会通过实现指令解析器Compile实现数据监听器Observer实现观察者Watcher来实现整个Vue的MVVM的响应式原理实现的功能不是很完善,如果大家有兴趣,可以自己补充,本次代码主要是完成整原创 2020-08-04 14:52:25 · 247 阅读 · 1 评论