grid布局
基本格子<div class="box"> <div class="item1">item1</div> <div class="item2">item2</div> <div class="item3">item3</div> <div class="item4">item4</div> <div class="item5&q...
网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候,网页只能识别硬件的物理像素,而非软件像素。物理像素:硬件本身的实际像素大小软件像素:设备尺寸限制,过大的像素并不能带来很好的体验,显示的内容过多反倒无法正常使用,于是有了软件像素,软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是:375px*812px;它的比是:3;那么它的物理像素就等于:(375*3)*(812*3)更多的对比可以去这个网站查看:mydevice然而实际上移动端设备都会有一个默认的宽度:980px,所以,即便我们没有设置meta viewport,网页也不可能真的使用...
子元素自身的order属性子元素的order的作用详解:默认情况下order的值都为0,如果这个值越小,那么就越靠近起始点,值越大,位置就越后,order其实用于移动元素的位置,而位置的方向则取决于父元素设置的:flex-direction子元素自身的align-self属性从正常角度,align-self是控制子元素y轴的对齐方式,也称侧轴对齐,这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果,最好配合:flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度:当主轴是...
windows和linux平台,他们之间的换行符是不一样的,mac之前也不一样,后来和linux保持统一。windows是CRLF,也就是\r\n;linux是LF,也就是\n;两个平台之间换行符不一样,在有代码规范要求的情况下,很容易就会触发报错,如eslint的报错:warning Delete ␍ prettier/prettier解决办法假设我们代码规范要求换行是LF;那我们需要进行以下配置:git提交时自动格式化换行符这个做法是防止有人本地编辑的时候没有改为LF的换行方式然后上传,导致别人拉库下来会运行报错。在项目根目录创建:.gitattributes 文件文件内写入:# L...
当有的时候,我们不想复制一个完整的文件或者文件夹的时候,我们可以通过链接映射的方式快速的将文件或者文件夹放置在某些地方。举个例子:我有一个A前端项目,再public目录下我需要放置另一个B前端项目打包后的dist目录,但是B项目是需要经常改动的,我不能每次改动一下就打包一次,然后把dist目录复制到A项目的public里面。显然这非常麻烦。如果我们将B项目的dist直接映射到A的public里面,那么每次打包,就不用复制了。怎么做?这就需要软连接或者硬连接了。什么是软连接和硬链接软链接软连接可以理解为windows下的快捷方式,但是快捷方式的删除不会影响到源文件,也不会被ide软件识别,...
起因我写了一个axios的get请求,他会在网页加载后运行,从服务器获取数据,根据status状态值来判断我是否需要进行弹窗提示,弹窗会有一个按钮,点击后会通过location.href跳转到另一个页面,在另一个页面,会有一个返回按钮,触发history.back()返回上一页。当然,在运行href跳转前,会通过api请求告诉后端,我已经点击了弹窗,下次请求不要再运行弹窗了。但是在下一个页面点击返回时,弹窗依旧会被弹出,后端说他没有看到请求记录,但是前端f12依旧可以看到api请求,并返回了200状态码。由于是手机调试,看不到具体的原因,只有在pc端,在不勾选停用缓存时,才能看到在请求的...
/* * @Author: mulingyuer * @Date: 2021-12-30 22:06:58 * @LastEditTime: 2022-01-03 05:22:30 * @LastEditors: mulingyuer * @Description: 手写promise * @FilePath: \undefinedc:\Users\13219\Desktop\promise.js * 怎么可能会有bug!!! */ /** * @description: 自定义promise * @param {fucntion} executor 执行器函数(同...
简介vscode通过ssh连接云服务器进行开发,服务器通过宝塔面板来进行可视化管理。系统采用腾讯维护的TencentOS Server,也就是centos的第三方维护版本。代码同步则使用git进行处理。[hide]服务器部署服务器部署相对简单。安装 TencentOS Server腾讯云里面有一台vps服务器,自己选择安装TencentOS Server 3.1版本,然后进行重装。安装宝塔宝塔官网:宝塔安装简单,自己ssh连接后安装即可,使用centos的安装链接。创建并绑定密匙在腾讯云管理页面左侧的菜单栏中找到密匙;这个密匙是用于ssh连接的,如果你懂ssh密匙链接,其实也可以跳过,只...
全局挂载vue3 对全局挂载做了调整,对全局挂载的方法增加的命名空间,用于独立存放,所以原先通过原型挂载的方式不推荐使用了。import { createApp } from "vue"; const app = createApp({}) app.config.globalProperties.$http = () => {}组件内调用最麻烦的<script lang="ts"> import { defineComponent,getCurrentInstance } from "vue"; ex...
fonts.less@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap'); .box { font-family: "Roboto"; }如果你再less文件中这么引入,那么一定是会报错的,这个报错要从两方面去理解:原生@import 语法被less占用less不支持在线css虽然less官方说如果你使用@import引入一个css文件,是会按照css原生语法去解析它的,但是它并没有说它支持一个在线链接,并且如果...
promise如果没有指定状态,那么就一直会处于pending中,如果长时间不处理,那么这个东西会一直存在于内存中,显然是不合理的。如果是一个超多请求项目,那么我们就需要考虑下性能问题了。promise中有一个rece方法,它接收一个promise作为值的数组,它的特性就是:哪个promise先执行,他就处理那一个,不管是resolve还是reject;在then中,他也只有一个值,不同于Promise.all方法返回的是一个数组,rece返回的值是最快完成的那个promise的返回值。利用这个特性,我们可以制作一个超时处理。function delayPromise(promise, ...
因为贫穷,所以在小黄鱼收了一个35包邮的E8820V2,但是默认的系统版本是v2.0.3;巨难用,想刷机,发现这个机器基本上都被人拿来做ap(桥接模式),要么就是升级了内存,用编码器直接刷的不死,但是本人没有这个条件,所以,只能找找看有没有官方的固件提供下载。找遍全网,只看到两个,一个是我目前用的官改固件,版本是:V2.0.8;还挺新,还有一个是原版固件,没有刷过,有兴趣可以尝试。这两个固件,除了原版我没有测试,官改的是可以直接用原装系统升级上去的,所以,实在是太棒了。感受官改的应该是精简了,反正感觉还可以,比之前的好很多。因为资源太少,所以我就分享一下吧,给和我一样的穷人一点希望。下载...
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
发现公司的项目,不管是vue2还是vue3,不管是新创建的还是旧项目,启动后Network永远是unavailable;就很离谱,导致每次想要局域网测试,只能手动在devServer中配置public属性,设置一个固定的本地ip地址。但是,你的ip地址并不是别人的ip地址,那么就会导致如果不小心上传了vue.config.js;那么同事一拉,哦吼,不懂得就说,哎呀,我的项目怎么启动不了了。这就很蛋疼了,所以我分析了一下这个问题的原因。首先,我的电脑的环境是没有问题的,网卡也是没有问题的,vue cli早就支持多个网卡了,所以多网卡问题就可以忽略。其实主要原因是因为一个不合法的ipv4地址...
前言作为一个刚入行没多久的前端菜鸡,对于自动化部署真的非常依赖啊,因为现在的开发更新都是很频繁的,代码更迭速度都很快,但是代码的部署却一直没有太大变化,总是需要自己将打包好的代码通过ftp等方式进行上传,非常的不方便,上传完,比如node后端服务,还需要手动安装对应的依赖,十分不便。当一个人要做前后端开发的时候,可能会导致大量的时候花费在这个繁琐而且没啥能力提升的事情上,做得多了还是影响开发的心情,幸福感大大降低。如果有一个功能,能自动监听我上传的代码,自动更新服务端的代码,并且安装依赖啥的都能自动完成,那么就非常方便了,毕竟现在大部分代码开发都依赖于git仓库管理。于是乎ci工具就诞生...
从uikit官方站点复制抽屉的代码本地运行,你会发现,它的抽屉默认居然是黑色的,根本不是官网上那种白色的样式。查询了好久,再github上issue上看到一些解释( OffCanvas only Dark),大概释义如下:官方的抽屉只有dark模式,不支持白色模式,也不支持反色的class(uk-light和uk-dark);而且官方对这个抽屉复写样式特别多,多到离谱,你能用上的元素,他都复写了,导致你就算把背景色复写成白色,你元素的字体颜色还是白色,而且nav组件的icon也被复写成白色svg了,这某种程度上复写样式基本无解了。唯一的解决办法就是不用官方的uk-offcanvas-ba...
简单说明externals这个属性,常用来做cdn的功能,在打包的时候不打包指定的库,比如vue,jquery,然后在html文件部分,手动引入库的cdn链接,但是,你在开发的时候,你还是需要npm或者yarn安装这个库,import引入使用,只是打包的时候会自动剔除。简单示例webpack.config.jsmodule.exports = { externals: { uikit: "UIkit", } }可以看到,externals是一个对象,对象里面有key和value,其中key的值就是package.json里面,安装的包的名字。而valu...
node的bash命令其实是有对应的指令字符的,但是,这个指令只能再linux,mac上才有生效,再windows是无效的,所以了解一下就行。命令说明&&顺序执行多条命令,当碰到执行出错的命令后将不执行后面的命令&并行执行多条命令||顺序执行多条命令,当碰到执行正确的命令后将不执行后面的命令|管道符windows上进行多命令"scripts": { "dev": "cross-env NODE_ENV=development webpack --env development --progress -...
找了很久,现有的库有两个:1. Mergenpm地址: Merge用法:import merge from 'merge'; const obj1 = { name: 2}; const obj2 = { value: 1 }; //合并 merge(obj1,obj2); console.log(obj1); //{name:2,value:1} //克隆合并-与目标对象无关联 const obj3 = merge(true,obj1,obj2); console.log(obj3); //{name:2,value:1} console.log(obj3...
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
有时候我们在vue中进行for循环,就会涉及到绑定唯一值key的问题,但是并不是任何时候都会存在所谓的唯一值,使用index下标明显是不合适的,官方也不推荐,除非你for循环出来的列表不用变化。所以一般常用的做法就是给for循环的对象添加一个属性,属性的值是随机的uuid或者时间戳。这样前端问题解决了,如果遍历的数据还需要提交到后端,那么不就多了一个属性,这个属性后端不需要的。所以,我们需要在提交数据前,对数据进行过滤。过滤又得for循环删除?那怎么行,有没有那种通用的,简单的方法。过滤方法/** * @description: 过滤对象中指定的属性,也可以拿来浅拷贝 * @para...
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...
最近评论