- 博客(52)
- 收藏
- 关注
原创 npm install 报错 npm ERR! request to https://registry.npm.taobao.org/axios failed, reason: certificate
从代码库拉下来的代码,npm install 安装所有依赖的时候,报错如下图所示。再次执行npm install就可以了,项目就可以正常起来了。经过检查,淘宝镜像于2024年1月22号,证书过期了。
2024-01-25 17:51:47
666
1
原创 路由跳转添加进度条
修改进度条的样式,在node_modules/nprogress/nprogress.css。2.引入nprogress和样式文件。3.在前置守卫添加进度条的展示。1.先安装nprogress。
2023-12-06 15:07:01
252
原创 vue项目退出登录,点击登录还是退出登录之前的页面
需求是点击登录,还是显示在用户管理菜单下,正常下项目登录进去都是首页。3.在登录页点击登录判断路径是否有query参数。页面现在用户管理菜单下,点击退出登录。2.点击退出登录,携带query参数。1.获取当前菜单的路径。
2023-12-06 10:12:10
384
原创 vue项目中添加刷新的按钮
点击导航的刷新按钮,刷新下方主体内容,我这边的项目分为左-上-下结构,上边为tabbar组件,下边为main组件,点击刷新整个流程是刷新按钮,去访问它父组件tabbar的兄弟组件main,使main组件内容进行刷新。这就涉及到组件之间数据传递了。在main组件里判断仓库中的refsh是否发生变化,再搭配nextTick函数使用,就可以完成就可完成帅刷新的效果了。在这里我使用的是pinia。在setting.ts设置一个变量refsh,方便main和tabbar访问。点击刷新按钮,获取到仓库中的值进去取反。
2023-12-05 14:33:23
412
原创 vue项目切换菜单添加特效
在<style scoped lang="scss"></style>里添加自己想要的特效就可以。我这边mian/index.vue是配置二级路由出口。关于导航的过渡特效,vue官网有教程。
2023-12-04 15:19:04
313
原创 vue3项目安装vite-plugin-mock 项目报错
vue3+vite项目安装了vite-plugin-mock之后,根据官网配置使用,vscode会出现波浪线,启动项目,发现运行不了。安装vite-plugin-mock2.9.6的版本即可。
2023-11-29 14:56:03
361
原创 项目中的svg图标的封装与使用
*所有的svg图标都必须放在assets/icons。2.在vite.config.ts中配置。下边我们封装一个svg组件。
2023-11-28 17:32:28
265
原创 vue3+vite+ts项目打包时出错
项目中引入了element-plus国家化的配置,然后进行项目打包,报下面的错误。在main.ts中添加。
2023-11-28 14:48:59
147
原创 使用NATAPP内网穿透详细步骤
在开发过程中,避免不了前端和后端不在一个局域网下,这时候,前后端联调的时候,前端访问不到后端的服务器,使用穿透就可以解决这个问题。5、下载之后,解压到任意目录,看见natapp.exe。看到这个界面就成功了,访问红框中的地址就可以访问了。3、击购买渠道 (选择免费渠道即可)7、运行natapp.exe,4、选择自己电脑版本进行下载。2、进行注册,然后登录。6.我的渠道获取自己的。
2023-10-27 17:49:29
563
原创 react组件通信
1.父组件提供要传递的数据-state2.给子组件标签添加属性值为state中的数据3.子组件通过props接受父组件中传过来的数据a.类组件使用this.props获取props对象b.函数式组件直接通过参数获取props对象props说明:props是只读对象,不能进行修改props可以传递任意数据(数字,字符串,布尔值,数组,对象,函数,JSX)1.父组件提供一个回调函数,用于接受数据2.将函数作为属性的值,传给子组件3.子组件通过props调用 回调函数。
2023-10-11 18:23:25
289
原创 前端axios发送请求,在请求头添加参数
3.在请求拦截器拦截,做处理(这里记住加一个判断,有name的值话才会加在请求头里,避免影响其他接口)1.在封装接口传参时,定义形参,params是正常传参,name则是我想要在请求头传参。成功发起发起之后,可以在控制台查看一下,有下边的效果就加上了,注意:这里修改请求头的信息,会有跨域的问题,需要后端配置信息。
2023-10-11 18:03:09
2425
原创 基于vscode配置setting.json格式化文档,适合vue,react
【代码】基于vscode配置setting.json格式化文档,适合vue,react。
2023-09-20 16:04:22
1127
原创 报错:A <route> is only ever to be used as the child of <Routes> element, never rendered directly.
如果出现这个问题是因为React目前推出最新的版本为18.0,在18.0版本中,React不再支持 ReactDOM.render,如果使用ReactDOM.render,控制台就会报错,但并不影响程序的正常运行。当你学习react路由遇到上面这个问题,先检查一下react-router-dom的版本,如果版本是6.0.0以上都会遇到这个问题。2.将<route></route>所有的标签放在<routes></routes>此时还会出现点击链接市无法跳转,将component改成element即可。
2023-09-18 18:16:17
342
原创 前端处理后端返回的数据中有\n\n字样的换行符标识
上面圈着的部分就是\n,前端需要将数据进行换行,对于这类型的数据,在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理,那么内容是不会在有换行符的位置进行换行显示的。pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。pre-line连续的空白符会被合并。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时会换行。使用v-html输出文本。以上两种方法都可以实现。
2023-08-08 17:03:24
5735
1
原创 vite基于vue3项目,打包之后的文件夹增加一个额外的文件夹
使用复制的方法,将healthcheck文件夹的内容放在public文件夹下边,安装依赖,配置vite.config.js配置即可。vite将项目打包之后,自动会生成一个dist文件,里边只有/assets,index.html,favicon.ico.这三个文件。现在需求是打包之后,dist文件夹下多怎加一个healthcheck的文件夹。在vite.config.js文件中导入。
2023-07-13 10:07:36
2703
原创 使用TypeScript实现贪吃蛇小游戏(网页版)
src下边的index.html页面是入口文件。/modules文件夹是用来存放所有类的。本项目使用webpack+ts所编写。index.ts是引入所有的ts文件。下边是项目的文件目录。
2023-07-07 18:30:48
1613
原创 vue3中的watch监听,有可能会遇到坑
1.监视reactive定义的响应式数据时,oldValue无法正确获取,强制开启了深度监听(deep配置无效)注意:一般开发中使用情况三就可以,如果操作其中的某个属性,单独给她拎出来就可以。2.监视reactive定义的响应式数据中某个属性时,deep配置有效。
2023-04-20 15:52:16
653
1
原创 el-date-picker选择日期之后,前后三个月不能选择,置灰
el-date-picker选择日期控件,选择一个日期之后,前三个月之前的日期不能选择,后三个月的日期也不能选择,变成置灰。
2023-04-12 14:04:45
1324
原创 Eelement的el-table的type=“expand“时,只展示一行
el-table的type="expand"时,可以将数据展开行,但是数据多同时展开多行不好看,所以需要设置 expand只展开一行,element提供了expand-change方法可以实现。
2022-10-25 11:47:19
2922
1
原创 vue项目打包之后,element的图标显示小方框
这里这个limit 配置项会指定文件大小,小于limit的图片无法生成图片并以64格式引入,大于limit的图片将以url加载。
2022-09-27 09:58:15
2720
原创 vue 父组件调用子组件,子组件的表单添加校验
如上图所示,上图的内容打开弹框,弹框是父组件调用的子组件,点击下边的按钮,这时需要走校验,然后校验在子组件写,父组件调用子组件的方法就可以。在子组件上加上ref,然后在父组件通过this.$refs.headerChild调用子组件的方法。子组件的methods里边加一个validate()方法,在里边判断校验。...
2022-07-21 14:52:39
3436
原创 <template>标签使用了v-if,表格有错位问题
element-ui的页签需要来回切换,el-table中使用了,然后在这个标签上使用了v-if,然后来回切换,el-table会有错位问题
2022-06-09 17:53:11
761
原创 element-ui的el-table表格复选框只能单选,不可多选
element的el-table表格复选框只能选中一条,选择下一条,上一条去掉勾选。使用文档中select方法,el-table绑定一个ref。具体代码实现如下toggleRowSelection:用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)...
2022-06-07 14:26:13
10475
原创 vue启动项目时报错:webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
前端运行项目时报错,排查一下以下这些原因:1:首先检查config下的index.js的ip是否填写错误2:有可能是依赖包的问题,可以吧文件夹中的node_modules删除,使用npm install或cnpm install重新引入。3:检查一下npm,node,webpack的版本和项目的支持版本是否对应(项目中package.json可以看相关版本信息)另外注意一下如果是mac本起项目报错:TypeError:fsevents is not a constructor,可..
2022-05-27 10:34:18
2825
原创 拉取代码和提交代码,出现提示语
git使用git push拉取代码和git pull提交代码,不能直接操作,是因为你的分支上游没有添加该分支名,输入git push 或者git pull会出现以下提示语然后输入vim . git/config,查看一下分支然后看一下里边是不是没有你当前分支名,使用:wq退出之后输入 git branch --set-upstream-to=origin/分支名然后git push 或者git pull 就可以了...
2022-04-22 11:03:25
613
原创 前端调起微信支付和支付宝支付
let params = JSON.parse(sessionStorage.getItem("params")); //发起支付-微信 function onBridgeReady(params) { WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": params.appId, //公众号名称,由商户传入 "t
2022-04-12 16:42:04
2688
原创 处理table数据,将后台返回的数据把列变成行,并且某列的数据一样的进行合并,动态表头
如果后台返回的数据是按列返回,而el-table渲染的数据是按行进行渲染的,所以需要将后台的数据进行一下转换,并且把某列的数据一样进行合并。如下图所示下边是后台返回的数据代码如下<el-table :data="tableList" border :span-method="arraySpanMethod" height="100%" size="mini"> <!-- <el-table-column label="名称.
2022-03-30 14:01:27
1101
原创 element的el-table的表头添加多列全选
el-table的数据<el-table :data="$common.datas.authority_user_manage" height="100%" :size="$common.entirety_size"> <el-table-column prop="no" label="登录名" :show-overflow-tooltip="true"></el-table-column> <el-table...
2022-03-10 10:28:17
2579
2
原创 js 将数字转换成千分符并保留小数点后两位值
transitSeparator: function(number) { if (!number) { return "0.00"; } if (typeof number == "string" && number.indexOf(",") > 0) { return number; } var stringValue = (number * 1).to.
2021-12-23 16:16:27
465
原创 js 将数字转换成汉字格式
transitText: function(number) { /* * 1、将数字转换成汉字 * 2、根据其数位添加其计数单位 * 3、判断0在不同位置的读法 * 3.0 个位:不转汉字 加计数单位 * 3.1 十位 转汉字 不加计数单位 * 3.2 百位 转汉字 不加计数单位 * 3.3 千位 转汉字 不加计数单位 * 3..
2021-12-20 18:31:05
1212
原创 elementUI中的el-steps组件在IE11中出现重叠,高度塌陷的问题
原因:因为我的布局是使用了flex布局,大概率因为IE浏览器不兼容flex布局解决方法:改变flex布局。然后给el-steps组件添加以下属性,然后就可以了.el-steps{ display: flex;}.el-steps .el-step { flex-basis:auto !important;}...
2021-12-01 10:22:17
1251
1
原创 echart折线图,线性渐变
setEchart(val){ // 基于DOM,初始化echarts实例(注意!Vue的DOM日怪的很,一般要腾个1秒才加载完) this.lineChart = this.$echarts.init( document.getElementById("charts")); onresize=()=>{ .lineChart.resize();//当页面大小变化→图标对应变化 } var xList = []; //X轴坐标值...
2021-11-26 16:39:25
1096
原创 echart报错:TypeError: Cannot read properties of null (reading ‘getAttribute‘)“
原因:由于echart需要的值没有获取到,明明接口返回数据了。因为数据渲染方法加到了create:{}里面了,说明数据还未取到,界面已经加载了解决方法:可以将数据渲染方法加到mounted(){}方法里,也可以将加载方法写到获取数据之后即可...
2021-11-26 13:50:02
13307
原创 控制台报错:Error in callback for watcher “data“: “TypeError: data.indexOf is not a function
从后台获取数据的result数据,通过打印result.data,发现result.data是个对象,而你写的表格需要是数组,所以报错了解决方法:1.让后台修改返回的格式2.定义一个新的空数组,直接在空数组push这个对象即可。即arr.push(result.data),这样就成功显示数据了。...
2021-11-15 11:40:03
11765
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人