Vue
落千
这个作者很懒,什么都没留下…
展开
-
Vue项目打包:禁止生成sourceMap文件
sourceMap的主要作用是让打包后的文件像未压缩的代码一样,方便调试和定位错误。然而,在生产环境中我们通常不需要这些文件,因为它们会增加应用程序的体积。原创 2024-04-11 10:33:06 · 231 阅读 · 0 评论 -
日期组件报错:Prop being mutated: “placement“
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"原创 2024-03-11 17:27:51 · 393 阅读 · 0 评论 -
vue+element项目打包上线后,图标偶然乱码问题
开发过程中,图标一直正常。直到打包发布,页面偶然出现图标乱码问题,再次刷新页面后,图标又正常显示。查看打包文件中,发现app.XXX.css中的css图标样式都是content:''原创 2023-03-27 15:59:57 · 1127 阅读 · 0 评论 -
创建的vue项目--打包
自创建的项目(未使用项目框架),使用weabpack打包,若出现空白页;若加载图片(img标签)成功,加载背景图片(css中)和字体文件失败。原创 2023-01-30 15:50:02 · 2359 阅读 · 1 评论 -
elementUI级联选择器切换数据源报错:Cannot read property ‘level‘ of null TypeError
开发时用到了动态cascader级联选择器,发现切换数据源的时候报错。原创 2022-12-02 10:22:25 · 1105 阅读 · 0 评论 -
npm install安装慢
npm install 默认使用的安装镜像是国外的镜像,所以在国内使用,会受到网络的限制,所以导致安装速度及其之慢,有的时候,会因为网速问题直接报错。如果没有报错就是已经切换成功,然后再次执行 npm install。更换npm的安装镜像源为国内的即可改变。或者可以在安装的时候指定其安装镜像。最后 我们可以查看一下。原创 2022-11-15 09:11:55 · 528 阅读 · 0 评论 -
vue-element-admin运行npm install 报错
尝试了好几种办法,修改.gitconfig文件,配置过tb镜像,也重新配置过GitHub的ssh,还是未能解决,最后参考了一篇直接删除依赖的文章,删除完就解决了。src/router/modules/components.js 搜索markdown,把相应路由代码删除。1、打开package.json把"tui-editor"删掉。Github 地址:(中文)原创 2022-10-08 16:15:01 · 1558 阅读 · 3 评论 -
wangeditor5跳转页面后无法输入内容,报错Cannot resolve a Slate node from DOM node: [object HTMLSpa](keep-alive缓存问题)
当时利用页面生命周期控制组件,注销富文本后重新初始化也没有解决,最后发现是keep-alive缓存导致的,通过设置keep-alive不缓存某些页面才解决了问题。下面针对keep-alive缓存进行记录。原创 2022-09-15 10:43:12 · 7000 阅读 · 4 评论 -
vue父组件调用子组件报错:Cannot read properties of undefined
父组件中直接通过ref调用子组件(headTop)中的(hideTab)方法,在子组件中定义了这个方法,但是一直报undefined。最后通过加入判断解决,先判断子组件存在,然后再调用子组件中的方法。原创 2022-09-15 10:10:08 · 2643 阅读 · 0 评论 -
引入wangeditor5运行报错:You may need an appropriate loader to handle this file type(es6兼容问题)
最近给使用的富文本wangeditor进行了一个升级,升到了目前最新的版本wangeditor5把wangeditor5引入vue项目中,启动项目一直报错一开始尝试很多方法都没解决,后来留意到控制台报错,猜测可能和es6中(…)的写法有关,所以后面具体查询了一下兼容es6的问题,了解到。原创 2022-09-15 09:53:29 · 2572 阅读 · 3 评论 -
报错:NavigationDuplicated: Avoided redundant navigation to current location(跳转了重复路由)
跳转重复路由报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location解决方案原创 2022-08-11 11:08:14 · 1991 阅读 · 0 评论 -
创建vue项目的安装汇总
2022年2月7日,vue3就成为了默认版本。并且vue3成为默认版本的同时,vuex也更新到了4版本。也就是,现在如果直接执行安装vuex,安装的是vuex4。而vuex的4版本只能在vue3中使用。在vue2的项目当中使用vuex的4版本,就会出现如上图所示的报错。那么,我现在用的是vue2,要安装vuex的3版本;(1)Vue2中,要用vuex的3版本;(2)Vue3中,要用vuex的4版本。可参考我另一篇详细描述的文章。...原创 2022-08-01 15:58:41 · 225 阅读 · 0 评论 -
vue 禁用滚动条 锁定屏幕
在某些场景会希望滚动条消失,无法滚动。例如预览图片时,点击图片预览大图后调用stop(),禁用滚动条;关闭预览时调用move(),取消禁用滚动条methods : { //禁止滚动 stop(){ var mo=function(e){ e.preventDefault(); }; document.body.style.overflow='hidden'; document.addEventListener(原创 2021-08-17 16:45:10 · 2043 阅读 · 1 评论 -
this.$nextTick()
在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象this.$nextTick(() => { console.log(this.$refs['hello'].innerText); });原创 2021-08-17 16:38:46 · 95 阅读 · 0 评论 -
axios请求失败,catch获取返回数据
this.$axios.put('url',obj).then((response)=>{ }).catch((error) => { console.log('error',error); console.log(error.response); });error.response可以获取到接口返回的数据,从而拿到message等提示信息原创 2021-08-17 16:36:18 · 1375 阅读 · 0 评论 -
vue用v-html渲染的图片,如何实现预览
在v-html属性标签的标签上添加getImg方法<div class="content" v-html="content" @click="getImg($event)"></div>getImg方法,通过$event可获取用户当前点击的元素相应的内容,这里可以获取所点击图片对应的src。判断拿到src后,添加图片的预览效果就可以了getImg($event){ console.log($event) console.log($event.target.curr原创 2021-08-17 16:23:51 · 1591 阅读 · 0 评论 -
VUE设置浏览器icon图标
一、将【favicon.png】格式图片转换为【favicon.bmp】格式ps打开图片- 存储为 BMP格式保存的【favicon.bmp】 格式的图片重命名为【favicon.ico】二、将【favicon.ico】图片保存到public文件夹在index.html文件中修改 <link rel="icon" type="image/x-icon" href="<%= BASE_URL %>favicon.ico">...原创 2021-02-22 10:02:03 · 283 阅读 · 0 评论 -
创建VUE项目的详细步骤
1.选一个存放项目的文件夹,例如在sum2.在电脑的搜索框输入cmd,启动cmd黑窗口3.在cmd黑窗口中输入 cd /d 文件路径,进入到该路径下4.在命令行继续输入vue init webpack “项目名称”(我的项目名称为sell,所以输入vue init webpack “sell”),回车后会进行如下选择5.在命令行输入cd 项目名称(我这里是输入cd sell),会发现路径进入了sell中6.然后给项目安装依赖,输入cnpm install。7.最后一步输入cnpm原创 2020-08-31 15:58:16 · 475 阅读 · 0 评论 -
vue引入lang=“less“的方法以及报错的解决方案
第一步:安装 less 和less-loadernpm install less less-loader --save第二步:修改webpack.base.conf.js文件找到build文件夹下的webpack.base.conf.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', op原创 2020-07-10 15:55:48 · 17247 阅读 · 2 评论 -
Invalid prop: custom validator check failed for prop "index".
使用element框架的NavMenu 导航菜单时,有一个index的属性,如果index的值使用的接口数据,就可能出现这个错误。这是因为 index 的值不能有空格,并且要为string类型,出现这个错误大多就是因为index填入了一个int型的数值。使用 toString() 将其转为字符串就不会报错了。<el-menu-item v-for="(item,index) in Lis...原创 2020-04-16 19:23:52 · 547 阅读 · 0 评论 -
vuetype check failed for prop "collapse". Expected Boolean, got String with value "true"
使用element框架的NavMenu 导航菜单时,collapse参数必须为boolean值当你在代码中直接写成collapse="true"的方式,会认为true是string类型,不是boolean类型,正确的写法应该为 :collapse=“true”,此时认为填写的是boolean值。<el-menu :default-active="activeIndex" class="...原创 2020-04-16 19:15:14 · 2977 阅读 · 1 评论 -
Vue项目中proxyTable解决axios的baseURL跨域问题
1.在Vue项目中config文件下的index.js添加proxyTable配置proxyTable:{ '/api': { target:'http://xxxxxx.com', changeOrigin:true, pathRewrite: { '^/api': '' } } }//api这个词可以任意换,但文下的词要...原创 2020-04-16 18:24:54 · 2771 阅读 · 2 评论 -
Vue项目中proxyTable解决axios跨域问题
1.在Vue项目中config文件下的index.js添加proxyTable的代码dev: {// 静态资源文件夹assetsSubDirectory: 'static',// 发布路径assetsPublicPath: '/',// 代理配置表,在这里可以配置特定的请求代理到对应的API接口// 例如将'localhost:8080/api/xxx'代理到'http://xxxx...原创 2020-04-16 18:11:47 · 973 阅读 · 0 评论 -
Vue使用swiper-详细介绍
Vue项目中使用swiper1.在项目中引入swipernpm install swiper --save-dev2.在Vue项目中需要用到swiper的组件里写入以下代码:<template> <div class="swiper-container"> <div class="swiper-wrapper"> <di...原创 2020-04-16 17:43:33 · 562 阅读 · 0 评论 -
Vue面试题
1.vue全家桶包含哪些?答案:vue全家桶与react全家桶介绍2.v-model是什么?怎么使用?vue中标签怎么绑定事件?答案:v-model可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件:<input @click=doLog()/>3.v-model的实现原理?答案:vue数据双向...转载 2019-10-16 15:05:15 · 347 阅读 · 0 评论 -
Vue.js起步学习
1.Vue简介Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。2.Vue安装方法一:在 Vue.js 的官网上下...原创 2018-03-14 14:20:25 · 402 阅读 · 0 评论