- 博客(123)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 vue3项目+TypeScript前端项目 ———— elemnet-plus,svg图标配置，sass，mock数据
elementui-plus,svg图标配置，sass，mock数据
2024-05-21 06:29:37
989
原创 vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3
vue3,elementui-plus,pinia
2024-05-12 07:39:34
1172
原创 vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky
今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范，需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复，需要使用husky来做commit拦截，需要使用commitlint来统一提交规范，需要使用preinstall来统一包管理工具。下面我们就用这一套规范来初始化我们的项目，集成一个规范的模版。
2024-01-29 06:49:09
1376
原创 vue3项目+TypeScript前端项目——vue3中的组件通信方式
一种是原生的DOM事件另外一种自定义事件。原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change、mouseenter、mouseleave…自定义事件可以实现子组件给父组件传递数据。
2024-01-23 07:42:32
1074
转载 element-ui全局添加loading效果
有时候会有一个需求，就是跳转到一个页面的时候，必须要有loading，然后等该页面所有的接口都调完，才能关闭loading。中怎么处理呢？我们一般是在请求和响应拦截器中添加loading效果，我这边整理了以下两种方法。
2023-04-12 17:34:18
4864
1
原创 vue 自定义指令directive的使用场景
自定义指令示例1：弹窗拖拽 2，图片加载前的背景图，3.输入框聚焦，4.设置防抖自定义指令，5：点击按钮操作频繁给出提示
2023-04-12 14:22:25
937
原创 elementui的el-message重复点击，提示会一直叠加
elementui的el-message连续点击按钮会出现一排提示，注意体验很不友好，而且也不好看。
2023-04-10 17:00:32
1653
1
转载 Vue监听浏览器关闭(或者刷新)、切换标签页触发事件
参考：https://blog.csdn.net/Tjohn9/article/details/129412468。
2023-03-29 16:03:05
4365
原创 es6的generator
generator函数是es6引入的，主要用于异步编程generator最大特点是交出函数的执行权（即暂停执行，通过yield实现该功能）
2023-03-16 15:08:24
647
转载 vue-router的base和vue.config.js的publicPath区别和联系
如果要加前缀，三者要保持一致。vue-router的base官方文档解释：vue.config.js的publicPath官方文档解释：publicPath是控制静态资源访问路径。router的base是控制路由跳转前缀。nginx是控制静态资源放在服务器的位置，反向代理。history模式下，配置路由基准路径为app,vue.config.js配置文件的publicPath ‘./’时，一定要设置vue-router的base配置 文档参考：vue（1）-配置（1）publicp
2022-06-10 18:11:57
2954
原创 Java语言的环境搭建：下载并安装JDK
目录一.官方网址：二.安装JDK三.配置环境变量 path1.选中桌面”我的电脑”-右键选择属性，选择高级系统设置。2.点击环境变量：3.新建一项系统变量“JAVA_HOME”,值为 jdk 的安装路径。 4.配置系统变量:双击系统变量的 path，在变量值最前端添加 5.为什么要配置配置环境变量 path？检验 java.exe 命令 获取当前安装的 jdk 的版本信息如果没有配置的话，在dos命令行中敲入javac，会出现错误提示： 每次执行 java 的工具都要进入到bin目录下，是非常麻烦的。可
2022-06-09 15:26:37
196
原创 JAVA 基础——学习
常用的DOS命令特点一：面向对象两个基本概念：类、对象三大特性：封装、继承、多态特点二：健壮性吸收了C/C++语言的优点，但去掉了其影响程序健壮性的部分（如指针、内存的申请与释放等），提供了一个相对安全的内存管理和访问机制特点三：跨平台性跨平台性：通过Java语言编写的应用程序在不同的系统平台上都可以运行。“Write once , Run Anywhere” 原理：只要在需要运行 java 应用程序的操作系统上，先安装一个Java虚拟机 (JVM Java Virtual Machine) 即可
2022-06-08 18:14:15
463
转载 如何录屏，并且用ps去掉水印
一.录屏gif插件的介绍之前看到别人写博客的时候，有很多的gif图，感觉效果特别直观，我这边也介绍一个可以录屏的工具。就是他啦。蛮好用的。打开以后就是这样子，可以拖拽录屏的大小，位置。如果开会员的话，就可以去水印（因为下载的gif会自带水印）然后我觉得没必要，就没有开通会员。然后就用了photoshop把水印去掉了。二.ps如何去水印参考：https://www.jb51.net/photoshop/546616.html1、打开Ps，按住Ctrl + O后，选中待处理的gif图，点击打开。
2022-05-18 15:44:22
777
转载 直接打开网址可以跳转，通过window.open报错404
一.遇到的问题：直接在浏览器输入网址是可以打开的，但是从项目里跳转就不行。浏览器直接输入网址的http请求信息：项目里跳转的http请求信息二.问题原因从浏览器直接输入是没有referer的，从项目里跳转会带上项目的地址作为referer所以可能要跳转的服务器对referer进行了拦截。三.解决方案方法一第一种方法在谷歌浏览器有效，我在火狐上测试无效。window.open('javascript:window.name;', '<script>location.repl
2022-05-06 17:41:06
3982
2
原创 vuedraggable的使用
官网地址：https://www.npmjs.com/package/vuedraggableDraggable为基于Sortable.js的vue组件，用以实现拖拽功能。一.安装npm i -S vuedraggable或者引入：二.使用1.场景：单个列表内部简单的拖拽（不克隆）<template> <div class="twoPage"> <draggable :list="list" :disabled="!enabled
2022-04-27 17:11:04
8433
原创 el-form表单label添加icon提示和必填校验
像下面这样，表单前面必填校验，再在label前面添加Icon 提示悬浮文字。如何实现呢？如下：el-form-item标签上的label标签写在span的slot上 <el-col :span="12" v-if="addMenuForm.type == '0' || addMenuForm.type == '1'"> <el-form-item prop="url"> //标签
2022-04-23 22:32:19
5239
原创 vue中如何引入自动引入所有svg图标
一.前提1.要使用 svg 先安装对应的 loadernpm install svg-sprite-loader注意：如果按照下面配置正确发现svg依然无法显示可能s’v’g-sprite-loader的版本过高，重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev, 就可能正确显示svg。(vue3.0应该是没有这个问题的)2.webpack.base.conf.js修改 { test: /\.svg$/, load
2022-04-20 15:48:09
2505
转载 vue中的Input输入框里面插入tree树
使用的是vue-treeselect一个多选组件，具有对 Vue.js嵌套选项支持.支持嵌套选项的单选和多选模糊匹配异步搜索延迟加载（仅在需要时加载深度选项的数据）一.安装npm install --save @riophae/vue-treeselect或者引入： <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js">
2022-04-18 14:20:00
1580
原创 elementui的导航路由递归报错解决
menu.vue - 父组件：<template> <div class="menu"> <el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#0f2c70" text-color="#fff" active-text-color="#ffd04b" mode="horizontal" @select="handleSelect">
2022-04-17 20:57:18
775
转载 core-js/modules/es.error.cause.js 报错
当前core-js@2已经放弃维护了，所以要装3以上的版本。目前我用的是3.19.1我启动的时候出现的问题为This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/@babel/runtime/helpers/createForOfIteratorHelper.js, ./src/directive/permission/hasPermi.js and 5 others To ins
2022-04-13 17:57:27
2729
3
转载 get请求数组参数问题（序列化）
问题：当我们需要通过get方式传递一个数组作为参数 tag:[1,2,3,4]预期是解析为:https://www.cnblogs.com/enter?tag=1&tag=2&tag=3&tag=4然而真相是这样的：https://www.cnblogs.com/enter?tag[]=1&tag[]=2&tag[]=3&tag[]=4,后台是不可能解析到传递的参数。解决方法1、qs插件处理1、qs.stringify({ a: ['b', 'c'
2022-04-12 15:30:58
2682
原创 element UI-表格数据转换
第一种方法：使用formatter方法比如说：表格中的比例按照百分比显示，还是带 % 的这种，但是后端只是返回了一个 0-100 的数值，就需要前端自己做转换html:<af-table-column prop="XX" label="XX比例" :formatter="XXFormat" align="center"></af-table-column>XXFormat (row, column, cellValue, index) { return cel
2022-04-12 14:20:06
2984
转载 axios中http请求Content-Type以及post需要用qs.stringify而get请求时不用
一.前端向后端传输数据的方式1.前端向后端传输数据时，有get和post两种：如果是get传输，直接传在url后；如果是post传输，则在请求体body中传输。2.在body中的数据格式又有两种：一种是 json 数据格式，另一种是 字符串。具体要用哪种格式取决于后端入参的格式如果后端接收json数据类型，post 的 headers 需要设置 { ‘content-type’: ’application/json’ }，传给后端的数据就形如 { ‘name’:’edward’, ‘age
2022-04-07 15:52:09
760
原创 二进制流图片在前端页面展示的问题
问题：调用后台图片接口，后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。解决：1、先设置axios接收参数格式为"arraybuffer"：responseType:'arraybuffer'2、转换为base64格式图片数据在img标签显示：return 'data:image/png;base64,' + btoa( new Uint8Array(res.data).reduce((data, byte) => data + String.fromCh
2022-04-07 15:13:25
2856
转载 RSA非对称加密传输---前端加密&解密(VUE项目)
一.什么是RSA非对称加密实际开发过程中，后台生成一对公私钥，私钥存在服务器，把公钥给前端，前端加密后传给后端，这是相对比较安全的做法。就好像是：由后台B生成一对公钥和私钥存好，公钥就好比一把锁，钥匙就是私钥。后台B只需要把锁给前台A，前台A把那句话锁起来，交还给后台B，在这过程中，即使大家都能在浏览器看到前台A传过来的公钥(锁)，但不知道那句话是啥的，然后B拿到锁好的机密，拿只有自己才有的私钥(钥匙)解开，这个差不多就是非对称加密。二.使用jsencrypt.js官网：http://travis
2022-04-07 10:44:13
1450
原创 关于elementplus的button按钮里面的icon图标不显示的问题
1.安装：npm install @element-plus/icons-vue2.引入：import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'3.注册：components: { Search, Edit, Delete },4.使用： <div class="btnBox"> <el-
2022-04-04 10:21:14
2836
转载 关于Vue3里面的getCurrentInstance：可以获取挂载在全局的属性和获取上下文
Vue3 getCurrentInstance与ts结合使用的问题一、不能使用getCurrentInstance的ctx我们在获取Vue3中全局挂载的方法时会这么写：这里的ctx不是setup提供的ctxconst { ctx } = getCurrentInstance()这里ctx打包后在生产环境下是获取不到的，请各位没玩过生产的别不小心误导到别人啊哈，恰好在Vue3的issues中找到的。正确应该使用const { proxy } = getCurrentInstance()二、
2022-04-03 20:02:12
15039
原创 vue中使用echarts实现中国地图
第一种效果：不同省份颜色不同代码：注意：要实现这种效果，地图数据的name一定要是省份的名字，要不然颜色出不来<template> <div class="echartsMapAllDemo"> <!-- style的宽高一定要写，不写也不会展示echarts图 --> <div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:
2022-03-31 18:09:54
22039
31
原创 vue3.0-海螺
一.安装vue3.01.安装：npm install -g @vue/cli2.创建vue-app项目vue create vue-app3.项目配置一下就是我的配置Babel：将ES6编译成ES5TypeScript：JS超集，主要是类型检查Router和Vuex，路由和状态管理Linter/ Formatter：代码检查工具CSS Pre-processors：css预编译 (稍后会对这里进行配置)Unit Testing：单元测试，开发过程中前端对代码进行自运行测试
2022-03-20 22:49:06
2354
原创 vue中如何实现滚动页面的动画-animate.css和wow.js
两种方法：第一种方法：npm安装包animate.css和wow.js第二种方法：静态资源的引入第一种方法：1.引入静态资源包静态资源包，需要注意的是。必须放到static文件夹下面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"
2022-03-11 18:18:07
5017
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人