前端
文章平均质量分 54
你吃香蕉吗?
踏上山巅的每一步都有可能跌落,重要的是可以告诉自己继续走下去,并且是这样做的,那么,你终会看到满天繁星,日出东方。
展开
-
从头搭建一个基于webpack的项目
使用webpack搭建vue2 或 vue3项目原创 2023-08-24 09:46:22 · 1365 阅读 · 0 评论 -
聊一聊localStorage、sessionStorage和cookie
sessionStorage共享原创 2023-05-10 16:43:06 · 698 阅读 · 0 评论 -
玩转webpack(02):webpack基础使用
webpack5内置了terser-webpack-plugin,如果需要额外配置需要安装terser-webpack-plugin并进行一系列调整。webpack默认只支持js和json两种文件类型,通过loaders去支持其他文件类型并且把他们转化成有效的模块,并且可以添加到依赖图中。(6)新建文件webpack.prod.js,并将原有的webpack.config.js改为webpack.dev.js。webpack-dev-middleware将webpack输出的文件传输给服务器。原创 2022-11-30 10:44:13 · 733 阅读 · 0 评论 -
玩转webpack(03):webpack进阶使用
一、自动清理构建目录二、自动补齐CSS3前缀三、移动端px自动转换为rem四、静态资源内联五、多页面应用打包通用方案六、使用source map七、基础库分离(externals)八、提取页面公共资源九、Tree Shaking的原理和使用十、Scope Hoisting的原理和使用十一、代码分割和动态import十二、在webpack中使用ESLint** eslint-loader安装报错?十三、webpack打包库和组件原创 2022-12-10 14:48:19 · 1076 阅读 · 0 评论 -
JS: 数组和树的相互转换
树转数组,实现的要点还是在于递归查找,定义一个空数组,去接收没有children属性的每一项。原创 2022-07-28 16:58:05 · 2684 阅读 · 2 评论 -
js对象:实现继承的几种方式及优缺点
js对象继承的集中方式原型链继承、构造函数继承、组合继承(构造函数式继承+原型链继承)、拷贝继承(原型式继承)、寄生式继承、寄生组合式继承、使用ES6中class关键字原创 2022-07-10 19:26:39 · 375 阅读 · 0 评论 -
js对象:检测属性是否存在
检测属性是否存在一、in二、hasOwnProperty()三、propertyIsEnumerable()四、!== 或===原创 2022-07-10 16:14:58 · 2329 阅读 · 2 评论 -
vue3:递归组件
vue3中可以直接使用组件文件名来递归组件,常用于页面菜单树的开发效果图父组件<template> <Tree @tree-click="treeClick" :data="data"></Tree></template><script setup lang="ts">import Tree from '@/components/treeItem.vue';import { reactive } from 'vu..原创 2022-04-16 17:25:58 · 5464 阅读 · 1 评论 -
Vue3:父子组件传参
一、父组件给子组件传参父组件通过v-bind绑定要传给子组件的数据,在子组件中通过defineProps接收传过来的值父组件:<template> <Child :data="cMasterwork" :sMasterwork="sMasterwork"></Child></template><script setup lang="ts">// 这里只需要引入即可使用组件,不需要注册import Child from '.原创 2022-04-14 15:09:16 · 7570 阅读 · 0 评论 -
vue3:Ref全家桶
ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property,指向该内部值。非响应式:<template> <div> <span>{{ msg }}</span> <el-button @click="handleChangeMSG">change msg</el-button> </div></template>&l原创 2022-04-13 16:21:42 · 987 阅读 · 0 评论 -
vite、vue3警告:Component inside <Transition> renders non-element root node that cannot be animated.
一、问题代码<template> <section> <router-view v-slot="{ Component }"> <transition name="fade" mode="out-in"> <component :is="Component" :key="$route.path" /> </transition> </router-view>原创 2022-04-12 21:02:57 · 1758 阅读 · 2 评论 -
Vue中实现鼠标拖拽排序
一、实现效果二、实现要点1、HTML draggable 属性:draggable 属性规定元素是否可拖动2、在拖动时获取拖动元素的唯一ID,获取拖动的元素进入有效的放置目标时的ID和下标3、原创 2022-04-06 09:10:15 · 1086 阅读 · 0 评论 -
Axios封装
一、全局loading效果通常在vue项目中使用最多的第三方请求库就是axios了,以此来实现与后台的数据交互。而在我们请求后台数据的时候,响应时间是不确定的,用户可能不知道我点了按钮之后它“怎么”了?所以我们通常需要一个loading效果,来告诉用户:我点了按钮之后又反应了,它让我等一会儿。 但如果我们在每次请求的时候都去手动加一个loading效果,这无疑是很麻烦的,包括后期的维护成本也是很高的,而且当有多次请求同时触发时,相应的会多次触发loading。 ...原创 2022-03-13 16:40:20 · 2572 阅读 · 1 评论 -
文件预览:使用xlsx预览excel文件
前端预览excel文件、前端预览Markdown、xlsx原创 2022-02-23 09:49:56 · 5786 阅读 · 15 评论 -
Vue3和Vue2的区别
Vue3和Vue2的区别vue3和vue2生命周期对比原创 2022-02-17 22:17:51 · 18229 阅读 · 1 评论 -
文件预览:Markdown文件预览
文件预览、Markdown文件预览、pdf文件预览、word文件预览、txt文件预览、图片文件预览等...mavon-editor实现Markdown文件预览、编辑功能原创 2022-02-15 16:28:17 · 2171 阅读 · 0 评论 -
github提交代码:Logon failed, use ctrl c to cancel basic credential prompt. remote: Support
完成以上操作后:回到git黑窗口,继续提交,在githup第一次弹出的登陆框(会弹出两次)中输入你githup的账号和密码,第二次弹出后输入git账号,密码换成上面截图步骤完成后生成的token。...原创 2022-02-15 15:51:38 · 844 阅读 · 0 评论 -
禁止鼠标右键
<div class="pdf-view" oncontextmenu="self.event.returnValue=false" onselectstart="return false"> <div id="viewerContainer" ref="container"> <div id="viewer" class="pdfViewer"></div> </div> ...原创 2022-02-11 14:08:37 · 576 阅读 · 0 评论 -
vite2:全局自动导入api
1、在vite中读取某个目录下的所有文件:import.meta.globEager 或 import.meta.glob2、vue3中给挂载全局属性:config.globalProperties3、vue3中使用全局属性:getCurrentInstance4、API全局自动导入原创 2022-01-03 18:34:12 · 1864 阅读 · 3 评论 -
vue实现PS效果,鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字(类似QQ截图输入文字)、vue图片上传转base64...
vue实现PS效果,鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字(类似QQ截图输入文字)、vue图片上传转base64...原创 2021-12-08 15:47:09 · 98876 阅读 · 1 评论 -
文本超出显示省略号在项目中的使用
文本超出div宽度显示省略号文本超出指定div宽度显示省略号原创 2021-12-06 11:45:37 · 250 阅读 · 0 评论 -
elementUI无线滚动+监听滚动条触底
elementUI无线滚动、vue监听滚动条触底原创 2021-12-02 10:12:01 · 2664 阅读 · 0 评论 -
一篇关于工作中对CSS的浅显思考
CSS是前端开发工程师必不可少的一项专业技能,它一开始给我的感觉是简单的,没有上手难度的,但往往在日常的工作中又总会给我带来巨大困扰。 CSS在我看来,要写它简单,要写好却难如登天,尤其是当项目中对UI的还原度非常之高时,你可能会发现你任何一处细微的修改都不是那么容易完成,而且时常会出现你的目标位置更改影响了其他位置的样式混乱等问题。 有仔细想过以上问题出现的原因,大概可以分为以下几点: 1、页面的排版布局本身就是不够合理的; ...原创 2021-11-23 15:59:05 · 790 阅读 · 0 评论 -
文件下载---文件流下载文件
使用文件流方式直接下载文件原创 2021-11-19 13:40:48 · 3398 阅读 · 2 评论 -
文件下载---图片下载
图片点击下载原创 2021-11-19 11:19:11 · 1743 阅读 · 0 评论 -
浏览器全屏——screenfull
一、npm包地址screenfull - npm二、安装使用安装:npm install screenfull使用import screenfull from 'screenfull';// methods中的方法,绑定此方法fullscreen () { if (!screenfull.isEnabled) { // 判断当前浏览器是否可全屏 this.$message('您的浏览器不能全屏'); return false;原创 2021-10-25 18:33:18 · 233 阅读 · 0 评论 -
GET和POST两种请求方法的区别
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题,你的内心充满了自信和喜悦。你轻轻松松的给出了一个“标准答案”: GET在浏览器回退时是无害的,而POST会再次提交请求。 .转载 2021-08-18 10:03:52 · 111 阅读 · 0 评论 -
Git常用命令
1、初始化git仓库a)git init2、查看仓库状态a)git status3、将文件添加到暂存区b)git add .4、提交暂存区内容c) git commit -m “描述信息”5、远程仓库连接a)git remote addorigin(自定义地址名) 仓库地址6、查看关联的仓库地址以及地址名a)git remote -v7、将本地仓库内容push到远程仓库a)git pushoriginmaster8、复制远程仓库代码...原创 2021-08-03 13:26:02 · 297 阅读 · 0 评论 -
Array.map和Array.forEach无法使用return结束方法
现象: 在使用map和forEach循环遍历数组时,使用return无法结束掉整个循环体,循环依旧会进行下去,表现效果相当于continue;代码示例:解决方法: let numFlag = resultData.every(item => { if (item.number < item.putStorageNumber) { this.$message.error("入库数量不能大于采集数量"); ...原创 2021-07-29 11:43:34 · 841 阅读 · 0 评论