vue
主要记录一些学习使用过程中遇到的问题及解决办法等
Pisces_224
当你想成功的时候,你就一个理由;当你想放弃的时候,你有千万个理由。
展开
-
Vue中的el-date-picker时间选择器的使用
1、value-format属性设置需要什么格式的时间2、type类型选择datetime、date。原创 2023-07-05 10:29:57 · 6452 阅读 · 0 评论 -
Vue项目打包dist目录介绍
② .css.map文件是一个Source map文件,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。① .css文件是项目要用到的css文件,当你做webpack打包的时候,会把所有的css样式打包到这里。③ 其他.js文件是使用路由懒加载打包后的文件,按需导入路由,文件的名字是路由懒加载配置中的分组名称。① app.js:放的是项目中各个页面的逻辑代码,将格式进行了压缩。存放的是项目里的所有js文件,原创 2023-06-08 11:49:12 · 2943 阅读 · 0 评论 -
vue2下npm安装国际化i18n包报错
vue国际化插件i18n安装原创 2023-04-26 15:52:44 · 981 阅读 · 0 评论 -
关于Vue使用 i18n插件导致Date Picker日期控件出现英文错乱
vue使用i18n国际化插件,日期控件英文错乱原创 2023-04-24 14:34:52 · 580 阅读 · 0 评论 -
Vue el-table表格数据文件大小转换为B、kb、M、G、T等
vue表格列文件大小字节转为kb、mb、g等转载 2023-03-24 17:05:48 · 965 阅读 · 0 评论 -
vue 邮箱、密码、手机号码等输入验证规则
Vue form表单邮箱、手机号、密码等验证规则原创 2022-11-29 10:54:56 · 6021 阅读 · 0 评论 -
转载:vue项目修改默认图标为自定义图标
vue修改浏览器默认图标及标题转载 2022-11-28 15:36:34 · 2021 阅读 · 0 评论 -
vue element编辑框根据值动态确认是否是必填项required true or false
vue el-form动态确认编辑框是否为必填项:require: true/false原创 2022-11-25 10:49:12 · 4702 阅读 · 0 评论 -
vue报错:Invalid prop: type check failed for prop “gutter“. Expected Number with value 100...
vue报错原创 2022-08-23 16:12:12 · 2177 阅读 · 0 评论 -
关于vue中ruleForm设置校验规则 type:number 不起作用
vue 校验规则原创 2022-08-21 09:09:54 · 2206 阅读 · 0 评论 -
label设置标签属性
label标签原创 2022-08-21 09:01:23 · 2217 阅读 · 0 评论 -
vue form表单使用el-select下拉框 获取后台数据可供选择
vue下拉框原创 2022-08-11 19:46:38 · 8139 阅读 · 3 评论 -
Vue页面表格数据 为隐私性进行掩码处理用*号代替
隐私数据掩码处理原创 2022-07-29 11:03:19 · 1586 阅读 · 0 评论 -
Vue之 el-input文本框拿到大量数据时自动换行显示
vue文本框原创 2022-07-28 19:55:08 · 5539 阅读 · 0 评论 -
vue 表单提交报错:Error in v-on handler (Promise/async):“ Error: Unknown rule type String”
vue 报错原创 2022-07-01 16:54:23 · 1944 阅读 · 1 评论 -
Vue 关于el-card、el-table组件的一些设置
1. el-card 高度自适应<el-card class="el-card-define">...</el-card><style>.el-card-define { min-height: 100%; height: 100%;}</style>2. el-table-column即表格列内容超出设置变省略号这样表格每行高度就不会被撑开显得很难看。此时鼠标悬停上去会显示全部内容,但不支持复制,需拖拽将此列拉宽至全部显示该列内容原创 2022-03-16 14:53:34 · 10799 阅读 · 0 评论 -
js 对象、数组互转
如题1. 如何判断返回数据类型首先:typeof的返回值共有七种:number, boolean, string, undefined, object, function,symbol.1、numbertypeof(10);typeof(NaN);//NaN在JavaScript中代表的是特殊非数字值,它本身是一个数字类型。typeof(Infinity);2、booleantypeof(true);typeof(false);3、stringtypeof(“abc”);4原创 2022-03-07 15:22:02 · 715 阅读 · 0 评论 -
linux服务器tomcat部署vue项目的问题
① vue BASE_API_URL设置127.0.0.1+端口部署后访问不成功原因未知,尝试过几次,只能更换为服务器本身ip地址;② vue项目每次在tomcat上webapps下重新部署不用杀掉进程直接删除/覆盖, 将新版本直接上传即可,访问时刷新一下。...原创 2022-02-24 14:27:48 · 539 阅读 · 0 评论 -
vue之var和let声明变量
为什么推荐let而不是以前的var现在很多编辑器在你使用var声明变量时,var下面会有浅色的波浪线提示,此时建议我们使用let来声明。为什么呢?(闲得无聊,码码字)var 和let 的区别因为var创建的变量是挂载在window顶级对象上面的,全局变量比较多的情况下通通都会挂载到window顶级对象上面,如果跟之前定义的对象重复则会改变之前定义的值,变量造成污染var可重复声明一个变量,(改变变量之前定义的值);let不可重复声明;var定义变量会默认为全局变量,let则不会;let作用原创 2022-02-23 16:15:12 · 1529 阅读 · 0 评论 -
vue登录表单重置问题
举个例子<el-form :model="userLoginForm" :rules="loginRules" status-icon ref="userLoginFormRef" label-position="left" label-width="0px" class="de原创 2022-02-21 10:17:40 · 882 阅读 · 0 评论 -
VUE之v-if语句多个条件判断时的写法
v-if满足某个条件condition = 0时,我们常见写法为:v-if="condition === 0"假如我想同时满足多个条件时,要怎么写呢?① 普通写法:v-if="condition === 0 || condition === 1 || condition === 2"② 简洁写法:v-if="[0, 1, 2].includes(condition)"<!--括号里可以是字符串和数字-->③ 复杂用法:标签中: v-if="matchState(activ转载 2022-02-17 11:37:54 · 32356 阅读 · 1 评论 -
Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“
报错如下在vue获取后台系统的菜单menu时,报此错,length未定义,经排查,是vue访问后台获取menu list数组的长度时引发的。那么问题来了:后台menu菜单的length必然是>0的,但是这里未获取到就离谱。因为项目在上一个版本还是正常的。所以在跟之前版本的对比之下发现原因如下:原因后台新版本增加了jackson的配置类自定义。本来这个配置类是为了允许出现特殊字符/转义字符而设置的。其他没用,只好注释掉它了。objectMapper.setSerializationInc原创 2022-01-07 14:15:28 · 26068 阅读 · 2 评论 -
利用EasyExcel完整的springboot +vue前后端导出并下载excel表格
文章目录写在前面正文1. springboot后端引入easyexcel及使用1.1 引入依赖1.2 接口serviceImpl方法1.3 提供一个对list集合去重的方法(根据相同key,去除重复,合并value值)1.4 BizMergeStrategy合并策略类1.5 自定义ExcelUtil工具类2. vue前端调用后台下载excel接口实现点击按钮完成下载2.1 上图对应vue代码2.2 export_excel() 方法3. vue多种方式实现调用后台接口下载excel (本小节借鉴他人原创 2021-12-31 19:58:49 · 8775 阅读 · 0 评论 -
vue element-ui:el-popconfirm气泡框弹出点确认没反应
是这样,我vue使用了气泡框想要在点击按钮弹出确认框后,点击确认然后触发我的事件,但是无论如何就是没反应,即没有触发要调用的方法。这是我当时的代码:<el-popconfirm style="margin-left:20px;" @OnConfirm="export_excel(scope.row.wo_id)" title="导出表格?" > <el-button type="text" slot="reference" size="small"原创 2021-12-31 14:15:32 · 3077 阅读 · 0 评论 -
记录一份nginx.conf原始配置文件
原始配置文件内容#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types;原创 2021-12-27 20:29:03 · 4208 阅读 · 4 评论 -
clone vue项目使用npm install 时报错 解决
错误npm ERR! code EPERMnpm ERR! syscall opennpm ERR! path D:\JAVA\nodejs\node_cache\_cacache\tmp\d20eb799npm ERR! errno EPERMnpm ERR! FetchError: Invalid response body while trying to fetch http://registry.npm.taobao.org/@vue%2fcli-plugin-babel: EPERM:原创 2021-11-09 15:31:10 · 1249 阅读 · 2 评论 -
Error: Redirected when going from “/login?redirect=%2Fdashboard“ to “/xx via a navigation guard
错误转载 2021-11-08 09:55:06 · 4067 阅读 · 0 评论 -
vue项目npm run serve报错:throw error;Error:can`t found module ‘XXX’解决办法
问题down了一个vue项目,运行npm install后,再执行npm run serve,出现如题所示问题:Cannot find module 'execa'...这里转载一下一位同僚的博客;解决办法1. 删除vue项目下的node_modules文件夹;2. 删除vue项目下的package-lock.json文件(备个份以防意外)最后再重新打开项目,执行:npm installnpm run serve依赖安装成功,项目运行。转自:https://blog.csdn.n转载 2021-11-02 15:16:15 · 1515 阅读 · 0 评论 -
记录npm 在windows下cmd中报错以及idea下terminal安装依赖时同样报错
如题报错大致是这样的:npm WARN locking errno: -4048,npm WARN locking code: 'EPERM',npm WARN locking syscall: 'open',D:\Code\Project\2021-3-1\ruoyi-vue\ruoyi-ui>npm installnpm WARN locking Error: EPERM: operation not permitted, open ‘D:\Environment\nodejs\node原创 2021-11-02 15:00:24 · 556 阅读 · 0 评论 -
[vue-router] Duplicate named routes definition: { name: “XXX“, path: “/XXX“ }
Vue浏览器提示路由重定义,未加重定向的原因。const routes = [ { path: '/', redirect: { name: 'Home' } }, { path: '/', name: 'Home', component: Home, children: [ { path: '/index', name: 'Index', component: ()原创 2021-09-22 09:46:59 · 2525 阅读 · 0 评论 -
转载:vue路由mode模式:history与hash的区别
引言对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的,浏览器当前提供了以下两种支持:1.hash(默认) —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL转载 2021-08-31 14:57:43 · 250 阅读 · 0 评论 -
Uncaught (in promise) Error: Redirected when going from “xxx“ to “xxx“ via a navigation guard.
原因涉及到落于重定向的问题,虽然对正常功能没影响,但是看着浏览器控制台报错,就不爽。查了资料,他们都说是加个catch抛出异常:created() { const { params, query } = this.$route const { path } = params this.$router.replace({ path: '/' + path, query }) .catch(() => {}); // 触发路由导航重定向,把error抛出来,否则浏览原创 2021-08-31 14:53:06 · 779 阅读 · 0 评论 -
转载:vue $router和$route的区别
一、 router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象。。。经常用的跳转链接就可以用this.$router.push,和router-link跳转一样。。。 this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档https://router.vuejs.org/zh/guide/essentials/navigation.html r...转载 2021-08-31 13:45:08 · 131 阅读 · 0 评论 -
解决nginx部署前端项目后刷新浏览器报错404的问题
问题: Vue单页应用项目打包部署Nginx服务器后,刷新页面后,出现404。 原因: 加载单页应用后路由改变均由浏览器处理,而刷新时将会请求当前的链接,而Nginx无法找到对应的页面。 解决: 在Nginx配置文件nginx.conf中加入如下配置。(index.html根据实际页面配置) ...转载 2021-08-30 17:02:49 · 5533 阅读 · 5 评论 -
vue报错Error in render: “TypeError: Cannot read property ‘name‘ of undefined“
转载:https://blog.csdn.net/weixin_40739653/article/details/89186210原创 2021-08-25 21:52:46 · 289 阅读 · 0 评论 -
vue之v-for的使用
1.迭代普通数组 在data中定义普通数组data:{ list:[1,2,3,4,5,6]} 在html中使用 v-for 指令渲染<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p> 2.迭代对象数组 在data中定义对象数组data:{ list:[1,2,3,4,5,6], listObj:[ {id:1,...转载 2021-08-25 14:40:44 · 262 阅读 · 0 评论 -
vue之el-col栅格组件使用v-for循环添加&& v-if避免初始化报错”xxx“ undefined
需求&问题做一个展示页面,有四张卡片显示在同一行,卡片可点击跳转到详情页。一开始是用el-col写了四个,考虑到后期可能更多卡片,所以准备用v-for循环遍历list对象数组来添加卡片。顺带提一句,使用el-col是为了定义屏幕自适应,不同屏幕尺寸下一行显示几张卡片。代码<el-row :gutter="40" style="margin-top: 30px" > <!--分栏间隔--> <el-col :xs="12" :sm="12" :md="12原创 2021-08-25 14:38:58 · 5770 阅读 · 0 评论 -
解决vue关于el-tabs标签页pane中图表加载宽度不正常的问题
1. 先上图2. 代码<el-tabs type="border-card" style="width: 50%; float: left"> <el-tab-pane label="CPU占用 TOP5"> <cpu-chart /> </el-tab-pane> <el-tab-pane label="内存使用 TOP5" name="second-memory"> <memory-c原创 2021-08-25 13:10:20 · 2989 阅读 · 0 评论 -
vue之div让文字内容水平垂直居中
思想①让文字先垂直居中,再水平居中;②若遇到文字和div一起水平垂直居中,则外面再套一个div,先让它俩都垂直居中,再内部处理文字水平居中。代码line-height: 100px; // 控制元素垂直距离text-align: center; // 控制元素水平居中, 居左居右分别为left,right更多详情看这里: https://www.cnblogs.com/xiaozhumaopao/p/5803188.html...原创 2021-08-23 15:10:55 · 16172 阅读 · 0 评论 -
解决如何让两个div各占50%居于一行的问题
问题当我们连续写两个div时,总是会默认跳到下一行。最近就遇到个需求,必须两个div并排放到一行。而且,要求两个div各占50%。查了一下总结如下:父div包两个子div<div style="width: 100%;overflow: hidden; margin-top: 100px;"> <div style="float:left;width: 50%;float: left;"> <cpu-chart /> </div&g原创 2021-08-21 19:29:17 · 3811 阅读 · 6 评论