Vue.js
文章平均质量分 69
Vue.js系列
Vam的金豆之路
开源 JavaScript 库 Strve.js 作者
展开
-
Vite+Vue2+Composition-api+<script setup>+TypeScript搭配如何开发项目?
好久没写文章了,今天终于有时间可以安安静静写文章了。前言Vite相信大家都用过,它是一种新型前端开发与构建工具,能够显著提升前端开发体验。我们在搭建Vite项目,选择Vue模板之后,默认会下载Vue3模板。如果你的公司现在还没有准备使用Vue3,而在使用Vue2,那么这篇文章值得你继续看下去。下面,我将带大家如何搭建一个 Vite+Vue2+Composition-api+<script setup>+TypeScript 搭配使用的项目。这篇文章很干,请大家点点赞哦!安装所需依赖又到原创 2021-09-26 21:55:14 · 1113 阅读 · 3 评论 -
Vite@2.6.0-beta.0 is out!
2021/9/20 · 20:54 Vite官方在推特发送了关于发布2.6.0-beta.0版本的消息。 消息大概内容是:Vite@2.6.0-beta.0出来了!请帮助我们测试此测试版,并加入chat.vitejs.dev与他人合作。查看更改日志:https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md我们打开这个更改日志网址。下面我们来看下到底更新了什么内容。Bug Fixes避免显式公共路径的错原创 2021-09-22 10:04:55 · 411 阅读 · 0 评论 -
如何高效二次封装Element UI弹窗
首先定义一个Element UI 组件,并且二次封装它。<template> <el-dialog :visible.sync="visible" width="30%" :show-close="false" :custom-class="'dialog-box'"> <slot name="header"> <p class="tit">{{ tit }}<span class="close" @click="closeVi原创 2021-09-09 09:24:38 · 1119 阅读 · 0 评论 -
基于Vue实现跨表格(单选、多选表格项,单表格限制)相互拖拽
前言今天,我们将使用Vue.js来实现一个跨表格相互拖拽。在开发这个业务之前呢,也调研了网上很多解决方案,但个人感觉不太符合现在做的这个需求。所以,压根就自己再开发一套,方便以后维护。什么需求呢?就是多个表格之间可以实现相互拖拽,即A表格中的表格项可以拖拽到B表格,B表格的表格项可以拖拽到C表格,并且它们之间可以单选、多选表格项相互拖拽。然后,D表格加以限制,每次只能够拖入一项,需输入密码,密码正确后,被拖入的一项替换D表格中的表格项,被替换的D表格项放入A表格,只能被替换,不能被删除。文字太枯燥,我原创 2021-08-24 22:12:42 · 4154 阅读 · 2 评论 -
Vue对接 友盟
App.vue mounted() { const script = document.createElement('script'); script.src = 'https://s9.cnzz.com/z_stat.php?id=1280220358&web_id=1280220358'; script.language = 'JavaScript'; document.body.appendChild(script); }, watch: {原创 2021-08-17 11:11:15 · 1052 阅读 · 0 评论 -
【Vue项目】完美解决Element UI中Message组件(消息多次弹出)问题
resetMessage.jsimport { Message} from 'element-ui';let messageInstance = null;const resetMessage = (options) => { if (messageInstance) { messageInstance.close() } messageInstance = Message(options)};['error', 'success', 'in原创 2021-08-06 17:28:07 · 1465 阅读 · 1 评论 -
今天,学会这几个Vue高级实战技巧就够了!
前言今天,我们来分享几个不可不知的vue高级实战技巧。技巧自动注册组件我们平时可能这样引入注册组件。每次都得需要在头部引入,然后注册,最后在模板上使用。<template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div></template><script>import HelloWorld from './com原创 2021-07-14 23:56:56 · 2022 阅读 · 10 评论 -
当Vue2遇到Composition API,它们之间到底能擦出怎样的火花?
前言Composition API是什么?也称为组合式 API。如果你第一次听到这个词,请认真读完这篇文章。官网有这样一段解释:通过创建 Vue 组件,我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。仅此一项就可以使我们的应用在可维护性和灵活性方面走得相当远。然而,我们的经验已经证明,光靠这一点可能并不够,尤其是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应用时,共享和重用代码变得尤为重要。我们之前创建组件更多地是使用OptionAPI(data、computed、原创 2021-07-08 00:06:22 · 2406 阅读 · 3 评论 -
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event 解决方案
yarn add default-passive-eventsmain.jsimport 'default-passive-events';原创 2021-06-24 16:38:03 · 1032 阅读 · 0 评论 -
浅析Vue响应系统原理与搭建vue2.x迷你版
Vue2.x响应式原理怎么实现的?Vue 最独特的特性之一,是其非侵入性的响应式系统。那么什么是响应式原理?数据模型仅仅是普通的JavaScript对象,而当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率。简言之,在改变数据的时候,视图会跟着更新。了解概念之后,那么它是怎么实现的呢?其实是利用Object.defineProperty()中的getter 和setter方法和设计模式中的观察者模式。那么,我们先来看下Object.defineProperty()。MDN中它是原创 2021-06-24 00:30:59 · 559 阅读 · 2 评论 -
Virtual DOM到底有什么迷人之处?如何搭建一款迷你版Virtual DOM库?
为什么使用Virtual DOM手动操作DOM比较麻烦。还需要考虑浏览器兼容性问题,虽然有JQuery等库简化DOM操作,但是随着项目的复杂DOM操作复杂提升。为了简化DOM的复杂操作于是出现了各种MVVM框架,MVVM框架解决了视图和状态的同步问题为了简化视图的操作我们可以使用模板引擎,但是模板引擎没有解决跟踪状态变化的问题,于是Virtual DOM出现了Virtual DOM的好处是当状态改变时不需要立即更新DOM,只需要创建一个虚拟树来描述DOM,Virtual DOM内部将原创 2021-06-21 21:08:57 · 289 阅读 · 0 评论 -
关于Virtual DOM理解和Snabbdom源码浅析
什么是Virtual DOMVirtual DOM(虚拟DOM),在形态上表现为一个能够描述DOM结构及其属性信息的普通的JS对象,因为不是真实的DOM对象,所以叫虚拟DOM。<div></div>{ sel: 'div', data: {}, chidren:undefined, elm:undefined, key:undefined,}Virtual DOM 本质上JS和DOM之间的一个映射缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我原创 2021-05-25 21:19:26 · 435 阅读 · 5 评论 -
尤老师在Vue Beijing平台的直播回放(无声版),之后会推出有声版
录屏时出现了一点小插曲,没有录上声音。不过过段时间我将会把有声视频整理出来,谢谢大家,希望大家理解。首先,很高兴可以跟尤老师面对面交流,也感谢Vue Beijing平台给我们这次与尤老师交流的机会。居然能够在尤老师下面,好激动~以上截取的画面是Vue2项目如何平滑升级到Vue3,尤大给出的回复是:可以实现。具体怎么操作可以观看之后整理的有声视频。今天,很感谢尤老师回答了我提出的一个问题。就是如何看待parcel2的?尤老师给出的答复是:太臃肿!为了零配置而零配置。为了达到零配置的效果,引入原创 2021-05-24 07:39:25 · 544 阅读 · 2 评论 -
尤大都说了,别用parcel了。但我还是整出了一款Vue3项目搭建工具parcel-vue-app
先放图弱弱的说一句,我真的错了。不该用parcel~前几天,尤大开直播说了造轮子的好处,主要还是锻炼自己。所以自己还是义无反顾地把这个项目搭建工具慢慢地造起来。这次升级这次版本是v1.0.5。我们来看下这次版本的预装依赖,我们的项目UI框架预先安装上了ant-design-vue@2.1.4,默认是按需加载。为什么这次是引入它,而不是element-plus,主要是考虑到parcel2针对babel.config.js这样的JS文件对组件样式引入实时检测不是很好,你必须手动刷新才能获取最新状态原创 2021-05-11 23:59:15 · 573 阅读 · 7 评论 -
从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么?
浏览文章前这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的。被反复使用的代码这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习。穿越时间的代码如果一段代码10年甚至15年,都还在使用。说明它的设计思想一定很棒。好调试的代码一个程序的代码很容易就调试成功,说明作者的项目结构能力很强,值得学习。前言今天,我们来搞一个新东西,名字叫基于Vue技术栈的全栈热重载生产环境脚手架。实话说,这个名字我想了很久。最终,还是以这个名字作为文章标题。我先拆分解释下:全栈的意思原创 2021-04-11 18:54:59 · 1254 阅读 · 0 评论 -
【Parcel 2 + Vue 3】从0到1搭建一款极快,零配置的Vue3项目构建工具
前言一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的。言归正传,我们切入正题。上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目。那么,今天我将会带领大家认识一个新的Vue3项目构建工具——parcel-vue-cli。这是什么?怎么以前没有听说过。有这样的疑问其实并不奇怪,因为这个构建工具是我自己开发的。你可能会这样问:“你自己开发的?这么厉害吗”?是的,豆哥其实就这么厉害。开玩笑啦!其实没有你想得那么厉害。都是搬砖人,主要看思路。好,不扯了!本篇文章我将带大家如何从0到原创 2021-03-30 01:22:57 · 2215 阅读 · 0 评论 -
使用Vite2+TypeScript4+Vue3技术栈,如何入手开发项目
前言今天,我们使用Vite2.0+Vue3+TS来试玩一下,开发一个demo项目。实战我们,打开Vite官方网站(https://cn.vitejs.dev/)。Vite (法语意为 “快速的”,发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源原创 2021-03-21 23:14:56 · 1670 阅读 · 1 评论 -
我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开源)
前言之前,一直想开发一款属于自己的Markdown编辑器,主要是自己平常写文章可以更加灵活操作,另外扩宽自己的视野也是非常不错的选择啊!所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器,都很优秀。不为超过他们,主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。完成项目一览调研Markdown编辑器国内、国外关于Markdown编辑器有很多。editor.md网址:https://pandao.github.io/editor原创 2021-03-07 23:28:38 · 4501 阅读 · 18 评论 -
vue 封装弹窗组件注意
父组件<template> <div> <p @click="onDelete"> 打开 </p> <!-- 弹框 --> <code-dialog :status.sync="deleteDialogStatus" /> </div></template><script>import codeDialog from原创 2021-02-26 10:11:32 · 500 阅读 · 0 评论 -
从0到1搭建一款页面自适应组件(Vue.js)
组件将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。建议在组件内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。使用前请注意将body的margin设为0,否则会引起计算误差。fullScreenContainer.vue<template> <div id="full-screen-container" :ref="ref"> <template v-if="ready"> <slot>&l原创 2021-02-19 23:01:37 · 1476 阅读 · 0 评论 -
「快速学习系列」我熬夜整理了Vue3.x响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性APIreactive作用: 创建一个响应式数据。本质: 传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建一个新的对象)的方式。<template> <div class="reactive"> <butt原创 2021-02-16 01:27:52 · 463 阅读 · 0 评论 -
过年了,基于Vue做一个消息通知组件
前言今天除夕,在这里祝大家新年快乐!!!今天在这个特别的日子里我们做一个消息通知组件,好,我们开始行动起来吧!!!项目一览效果很简单,就是这种的小卡片似的效果。源码我们先开始写UI页面,可自定义消息内容以及关闭按钮的样式。Notification.vue<template> <transition name="fade" @after-enter="handleAfterEnter"> <div class="notification" :style="s原创 2021-02-12 00:01:26 · 1376 阅读 · 3 评论 -
Vue.js与ElementUI搭建无限级联层级表格组件
前言今天,回老家了。第一件事就是回家把大屏安排上,写作的感觉太爽了,终于可以专心地写文章了。我们今天要做的项目是怎么样搭建一个无限级联层级表格组件,好了,多了不多说,赶快行动起来吧!项目一览到底是啥样子来?我们来看下。正如你所看到的那样,这个组件涉及添加、删除、编辑功能,并且可以无限级嵌套。那么怎样实现的?我们来看下。源码直接给出源码,就是这么直接。<template> <div class="container"> <el-button原创 2021-02-09 23:06:47 · 2096 阅读 · 0 评论 -
沉寂了一周,我开发了一个聊天室
前言最近一周没有发文章了,我在这里向大家说一声抱歉。今天,我们来从零开始开发一款聊天室。好,我们现在就开始。了解WebSocket开发聊天室,我们需要用到WebSocket这个网络通信协议,那么为什么会用到它呢?我们首先来引用阮一峰大佬的一篇文章一段话:初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起。举例来说,我们想了解今天的天气,只能是客户端向服务原创 2021-02-06 20:06:45 · 432 阅读 · 0 评论 -
基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 正式发布
前言今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!线上地址体验基于vue3.0和vue-vam-video,我开发了一款在线视频播放器。网址:https://www.maomin.club/site/videoplayer/源代码:https://github.com/maomincoding/videoplayer插件一览界面简约可配置流畅播放支持Vue2和Vue3支持m3u8格式支持多种事件NP原创 2021-01-24 23:02:56 · 3046 阅读 · 3 评论 -
vue按需引入第三方ui插件优化
components.jsimport { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBox11, decoration1 } from '@jiaminghi/data-view'const components = { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBox11, d原创 2021-01-24 02:34:23 · 738 阅读 · 0 评论 -
vue封装手机验证码
// 获取验证码let endMsRes = new Date().getTime() + 45000;localStorage.setItem("myEndTime", JSON.stringify(endMsRes));this.codeCountDown(endMsRes);// 存储验证码时隔 codeCountDown(endMsRes) { this.BtnStatus = false; this.countDownTime = Math.ceil((e原创 2021-01-21 11:24:53 · 341 阅读 · 0 评论 -
从Vue源码中我学到了几点精妙方法
话不多说,赶快试试尤大大教给我们的这几个精妙方法吧!在工作中肯定会用得到。立即执行函数页面加载完成后只执行一次的设置函数。(function (a, b) { console.log(a, b); // 1,2})(1, 2);通常,全局变量被作为一个参数传递给立即执行参数,这样它在函数内部不使用window也可以被访问到。(function (global) { console.log(global); // Window对象})(this);多层嵌套三目运算符三目运算符嵌套原创 2021-01-01 17:18:09 · 410 阅读 · 0 评论 -
从0到1搭建一款Vue可配置视频播放器组件(Npm已发布)
前言话不多说,这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器。我们平时在PC端网站上观看视频时,会看到有很多丰富样式的视频播放器,而我们自己写的video标签样式却是那么丑。其实像那些网站都是基于原生video标签进行开发的,只不过还得适当加工一下,才会有我们所看到的漂亮的视频播放器。开发在具体开发之前,我们需要明确我们需要做什么?封装一个可配置的视频播放器;适用于Vue.js;应用于PC端网站;视频播放器常用的功能必须要有;发布到Npm;好,明确了以上几原创 2020-12-29 01:38:03 · 1806 阅读 · 0 评论 -
你是否有一个梦想?用JavaScript[vue.js、react.js......]开发一款自定义配置视频播放器
前言沉寂了一周了,打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器,为什么会有如此想法?是因为之前看一些学习视频网站时,看到它们做的视频播放器非常Nice!于是,就打算抽空开发一款属于自己的视频播放器。话不多说,一起来实战吧!项目展示(这只是一张图片哦~)这张图就是我们的成品,还等什么?赶紧来实战吧!实战我会把完整源码放在github上,欢迎来star,地址在文末。首先,我们会使用最原生的JavaScript来实现,老大哥肯定要打头阵啊!一、JavaScripti原创 2020-12-21 01:18:35 · 465 阅读 · 0 评论 -
手把手教你实现一个Vue无限级联树形表格(增删改)
前言平时我们可能在做项目时,会遇到一个业务逻辑。实现一个无限级联树形表格,什么叫做无限级联树形表格呢?就是下图所展示的内容,有一个祖元素,然后下面可能有很多子孙元素,你可以实现添加、编辑、删除这样几个功能。资源JavaScript框架:vue.jsUI框架:Element UI源码这里需要重点说明的是,主要使用了递归的算法以及给数据标识的重要性。详细说明可以在源码中查看注释,也可以通过删改代码融会贯通。<template> <div class="contain原创 2020-12-01 16:58:14 · 2854 阅读 · 3 评论 -
手把手教你用前端实现短视频App(滑动切换)
点此链接,查看公众号文章原创 2020-11-13 10:55:08 · 1526 阅读 · 0 评论 -
Vue.js与Node.js一起打造一款属于自己的音乐App(收藏)
点击此链接,跳转公众号文章原创 2020-11-13 10:06:59 · 439 阅读 · 0 评论 -
Vue3.0系列——「vue3.0学习手册」第一期
vitevite是尤大大开发的一款意图取代webpack的工具。其实现原理是利用ES6的import会发送请求加载文件的特性。拦截这些请求,做一些编译,省去webpack冗长的打包时间。并将其与Rollup捆绑在一起用于生产。在开发过程中没有捆绑。源代码中的ES Import语法直接提供给浏览器,浏览器通过本机npm install -g create-vite-appcreate-vite-app projectNamecd projectNamenpm installnpm run dev原创 2020-10-23 23:53:58 · 1580 阅读 · 0 评论 -
Vue3.0系列——「vue3.0性能是如何变快的?」
前言先学习vue2.x,很多2.x内容依然保留;先学习TypeScript,vue3.0是用TS重写的,想知其然知其所以然必须学习TS。为什么学习vue3.0?性能比vue2.x快1.2~2倍按需编译,体积比vue2.x更小组合API(类似React Hook)更好的TS支持暴露了自定义渲染API更先进的组件vue3.0是如何变快的?diff方法优化vue2中的虚拟dom是进行全量的对比。而vue3新增了静态标记。在与上次虚拟节点进行对比的时候,只对比带有patch fl.原创 2020-10-12 11:10:23 · 1255 阅读 · 0 评论 -
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
前言图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。效果展示原图片大小:82KB压缩后的图片大小:17KB测试是不是特别good!!!看到上面的压缩后的图片,可能你还会质疑图片的清晰度,那么看下面(第一张图为压缩后的图片):教程这么好的工具,那我们来看看怎么用代码实现它。首先你可能需要一些Vue.js和Node.js的基础,另外你可能还需要一点对.原创 2020-10-01 11:03:29 · 1472 阅读 · 2 评论 -
Vue 3.0 有哪些新特性值得我们提前了解
一、迎接 Vue 3.01. 简介 Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段。已合并所有计划内的 RFC已实现所有被合并的 RFCVue CLI 现在通过 vue-cli-plugin-vue-next 提供了实验性支持2. 新特性 重点关注:更快更省Object.defineProperty ——> Proxy重构 Virtual DOM完全的TypeScript团队开发更轻松架构更灵活,阅读源码更轻松可以独立使用V原创 2020-05-27 08:54:22 · 3150 阅读 · 0 评论 -
2分钟实现一个Vue实时直播系统
前言我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下。第一步,购买云直播服务首先,你必须去阿里云或者腾讯云注册一个直播服务。也花不了几个钱,练手的话,几十块钱就够了。这里我拿阿里云举例,购买完了,配置好推流域名跟播流域名,下面我们将进行地址生成。记住下面生成的地址,下面会用到。第二步,下载本地推流工具https://obsproject.com/第三步,设置OBS在第一步中图片底部有推流地址,需要注意,分为两部分填入下方图所示。在AppName字段 为分原创 2020-05-12 23:43:51 · 10265 阅读 · 4 评论 -
Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
今天,我们使用Vue CLI3 做一个移动端适配 。前言首先确定你的项目是Vue CLI3版本以上的。一、移动端适配包1、安装移动端适配包npm i lib-flexible -S2、在main.js引入适配包import Vue from 'vue'import App from './App.vue'import 'lib-flexible' // 引入适配包Vu...原创 2020-04-26 17:13:36 · 2802 阅读 · 0 评论 -
Vuex的热更替你知道多少?
前言我们在使用Vuex的时候,会时不时的更改Vuex内的数据,但是页面不会随之更新,如果数据量大,一个数据依赖另一个数据的话,这样我们要是再刷新页面的话会把以前依赖的数据清空,效率特别低。所以,今天我总结了怎么实现Vuex热更替的功能。实现首先,我们这里使用了Vue CLI3。在根目录下的src目录下我们有一个存放Vuex的文件夹叫做store文件夹。首先我们分割成几个模块。下面我们把它...原创 2020-04-21 23:15:59 · 2356 阅读 · 0 评论