xuefeng11111的博客

fullcalendar v5的变化还是很大的，而且出来时间不长，网上关于fullcalendar的问题大多是v3、v4版本的，在这里记录一下vue中使用v5版本添加自定义事件的方法参考地址：Add custom right click context menu in FullCalendar v4这里是通过options对象的方式进行配置需要用到eventDidMount钩子函数进行配置options:{ eventDidMount: arg => { const eventI.

是vuter插件导致的问题，可以在setting.json文件中作如下设置"vetur.validation.interpolation": false,

vue动态编辑删除query路由报错如果是通过$route.query获取的query进行删除之后再进行跳转的时候，vue路由会报重复跳转的错误解决方案将query对象克隆一份deleteType() { const query = this.$route.query const newQuery = JSON.parse(JSON.stringify(query)) if (newQuery.type && newQuery.type === 'edit') {.

vue对元素的宽高变化看了一下，基本都是用的定时器解决的，刚好看到JS的一个属性方法，可以专门监测元素的尺寸变化CDN地址：https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver实现代码如下directives: { resize: { mounted(el, binding) { // 这里使用debounce防抖处理，防抖的延时时间可以通过自定义指令的参数传过来，如`v-resize:300`表示300m.

el-table分页的时候保持之前的选中项状态需要在el-table上设置row-key属性，并在el--table-column中type='selection'一项设置:reserve-selection="true"<!-- 设置row-key --><el-table :row-key='row => row.id'> <!-- 设置reserve-selection --> <el-table-column type="selection"

刚接到一个需求，要求在一个页面进行视频点击下载，而不是点击之后跳转到新页面进行预览之前做过下载图片都是通过转成base64的形式进行下载，但是视频文件太大，这种方式肯定是不行的，后来网上查了一下，可以通过转换成Blob格式进行下载，这种方式可以是可以，但是有一个问题，就是必须等ajax请求完成之后，才会弹出下载框，而且这种方式其实文件已经下载到内存中了，在你点击下载之后就直接可以下载下来了，但是如果文件1G大小还通过这种方式下载的话就太不人性化了后来，才发现，这个问题解决的话需要后端进行处理需要后端设

贴上错误信息，方便搜索引擎查找类似错误Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your

这是由于jest本身不支持ES6语法规则，所以需要配置babel参考地址：https://www.jianshu.com/p/458f13dab96b

通过vitejs创建vue3项目的时候并没有选择单元测试的选项而看网上的教程可以直接使用命令vue add vue-jest进行安装但是安装完成之后，运行测试命令的时候报错：‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序或批处理文件。网上找了半天都在说是vue-cli或者包丢失，但是验证并没有什么卵用后来终于发现，是项目中vue-cli-service问题解决方法由于vue-cli现在已经改成@vue/cli，所以现在安装vue-cli-service应该如下安装n

这是vite对根目录的访问做了限制参考vite文档：https://cn.vitejs.dev/config/#server-fs-strict可以在vite.config.js中作如下配置server: { fs: { strict: false }}

最近接手的一个NuxtJS项目，在npm run dev启动项以及更改JS文件之后项目更新非常缓慢，最长的时候40~50s解决方案网上找了半天，后来在github中nuxt.js的Issues中找到答案，原来是eslint-loader的原因参考：https://github.com/nuxt/nuxt.js/issues/8244解决方法方法1：如果你的项目用的是nuxtjs2.x版本，那可以先把ESlint关闭方法2：如果你的项目用的是nuxtjs3.x版本，那么可以试一下将esli.

相信很多人进行项目配置的时候都会这样命名xxx/index.vue可能刚开始这样的命名并没有什么问题，但是当index.vue文件多起来之后，当你debugger的时候可能就会发现，找不到你要定位的文件了，但是我们这样的文件命名确实是符合规范的，所以我们就需要找到一个解决的办法这个问题的答案网上一搜一堆，但是无非就是设置source-map，但是真的管用吗，至少我试过很多次是不管用的直到有一次，偶然发现了一个方法，可以解决这个问题，虽说有点取巧，但是确实是真的解决了方法如下首先，我们先打开要d

先贴上报错信息方便他人查找:[Vue warn]: Error in render: “TypeError: Cannot read property ‘0’ of undefined” found in当我看到这个问题的时候真的是无从下手，这是什么错？虽然报错了但是页面却也正常的渲染出来了，什么鬼？~~~后来在网上查了之后才明白，原来是父组件给子组件传递的初始值是异步获取的，也就是...

animate.css的动画方案丰富无比，足以满足我们的需要，今天将一下animate.css在vue中的使用方法记录一下，以免下次再使用又得上网上找半天，嘎嘎…参考博客 Vue.js - Transition过渡动画的使用6（配合vue-router、vue-navigation使用）首先我们先进行安装$ npm i -S animate.css在main.js中进行引入...

先上一个参考链接，觉得帮助很大: Vue 2.0学习笔记：Vue.extend构造器的延伸然后拿vue官网的话解释vue.extend：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。什么意思，我的理解其实就是创建一个自己的类，可以通过类的实例化动态创建dom元素接下来以Loading实例演示一下用法首先，我们创建一个Loading文件夹，并在其中创建ind...

有时候我们在某个地方用到相同的组件的时候，或许会稍作一些样式的调整，但是又不想改变整个组件的样式，那这怎么办呢参考博客: vue里面父组件如何修改子组件样式看了网上的介绍，感觉最好的方案还是使用深度作用选择器.a &gt;&gt;&gt; .b {} // 此处.b即为组件内的class// 如果是less或者sass预处理器要用'/deep/'.a { /deep/ .b {...

一直以来都对filter的用法的理解有误错误理解const a = [1,2,3,4,5]const c = a.filter(item =&gt; { return item})console.log(c) // 输出[1,2,3,4,5]如果我们将上述代码改成下面的形式，输出会是什么结果呢const a = [1,2,3,4,5]const c = a.f...

网上也搜了很多的教程，但是很多都只给了如何配置，具体配置如下：const express = require('express')const app = express()var appData = require('../data.json')var seller = appData.sellervar goods = appData.goodsvar ratings = appData.rat...

        最近想用vue+jquery+bootstrap做一个项目，刚开始不知道怎么引入jQuery和bootstrap，弄了小半天，终于弄好了，特此记载一下过程        1、首先，安装jQuery            npm install jquery --save        2、 然后在build/webpack.base.config.js中添加以下代码        ...

&lt;div id="app"&gt;&lt;input type="checkbox" v-model='arr' name="" id="" value="aa"&gt;aa&lt;input type="checkbox" v-model='arr' name="" id="" value=&

用法一：直接监听某个属性&lt;div id="app"&gt;&lt;input type="text" v-model="name" /&gt;{{name}}&lt;/div&gt;new Vue({el: '#app',data: {name: ''},watch: {name(newVal, oldVal) {console.log..

刚接触vue的项目，很多东西需要学习在使用v-lazyload实现图片懒加载的时候，在main.js中引入图片地址的时候出现了问题我发现如果引入的路径是根目录下的/static中的图片，没有任何问题，但是如果引入的是assets目录下的图片就找不到图片后来去网上查了一下才知道，原来是main.js中的图片除了/statci目录外都需要通过reqiure('图片路径')的方式进行加载通过r...

vue中通过better-scroll实现商城分类的左右联动先上代码&amp;amp;lt;div class=&amp;quot;mall&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;wrapper&amp;quot; ref='wrapper'&amp;amp;gt; &amp;amp;lt;ul class=&amp;quot;ca

better-scroll的文档介绍的有点简单，去网上搜了一下才明白上拉加载的用法参考博客https://blog.youkuaiyun.com/skyblacktoday/article/details/80534105#commentBox主要实现代码如下scrollInit () { const wrapper = document.querySelector('.wrapper') ...

/** * @Desc: better-scroll初始化 * @Author: tomorrow-here * @Date: 2019-01-17 11:40:44 */ scrollInit () { const wrapper = document.querySelector('.wrapper') this.scroll = new BScroll(wrap...

昨天通过hbuilder将做了一部分的vue项目进行打包成app测试，发现打包成的app点击手机的返回键的时候直接退出了app，并不会返回上一页于是去网上查了一下终于解决了这个问题参考博客链接：https://blog.youkuaiyun.com/qq_25252769/article/details/76913083说明：我项目中没有用mui.js，所以用下面的方法就可以了，如果用了mui.js的...

打包vue项目将config目录下的index.js中的proxyTable内容清空host 设置为localhost, 端口号为8080getData文件中的axios设置默认URL, 并将所有的请求接口的/api去掉axios.defaults.baseURL = 'https://自己的接口域名地址'运行打包命令$ npm run build修改dist目录下的i...

官网: https://surmon-china.github.io/vue-awesome-swiper/首先，当然是进行安装了$ npm i -S vue-awesome-swiper然后在main.js中进行全局引入并使用注意： 引入的时候需要将css也一起引入import VueAwesomeSwiper from 'vue-awesome-swiper'import...

刚刚才发现，vue中的router-link好像在动态绑定class方面有问题，如下图如果这个样子动态绑定router-link的class和div的class，你会发现，div的class动态绑定没有问题，当鼠标经过div的时候，div的颜色会发生改变，但是如果你的鼠标经过router-link的时候，你会发现，router-link的颜色并不会发生改变，我把动态绑定的方法几乎试遍了，还是没有解...