足各路

记录一次接手别人代码的经历 - TinyMCE自定义表情包

ios真机调试遇到的图片问题汇总。图片不显示(已解决)，base64图片过大导致页面卡住(未完美解决)。有没有大佬遇到类似问题的，救救我！😭😭

简单聊一聊我在项目中是如何封装axios以及如何统一管理api接口，其主要目的是简化代码，使代码结构更清晰，便于后期更新维护。

足各路的博客v2.0正式上线！全新的界面、全新的体验！以lol英雄为背景，搭配卡片式风格，完成改版搭建。

在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！安装vscode 插件市场找到 korofileheader 注释插件，安装即可。配置依次点击 File → Preferences → Settings, 搜索setting.json打开setting.json文件，添加如下配置： "fileheader.customMade": { //此为头部注释 "Description": "", .

flutter打包时，终端无法打字。先做个记录，解决后会更新至此。知道如何解决的小伙伴，麻烦评论留言，万分感谢！！

Image.network加载网络图片无效的解决办法按照学习教程使用Image组件时，发现教程中图片可以显示，而自己的demo却显示不出图片。将图片地址扔到浏览器可以正常访问，神奇了~一、原因分析及解决方案1. 本地没有网络打开百度，如果无法正常显示界面，证明你电脑没有连接网络。2. 没有配置网络权限在android/src/main/AndroidManifest.xml中添加下列代码：<uses-permission android:name="android.permissio.

fullter 运行时报错

记录近期使用Quasar的心得及遇到的坑。什么是Quasar？Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源框架，允许作为Web开发人员的您快速创建多种类型的responsive++网站/应用：SPAs (单页应用)SSR (服务器端渲染的应用) (+可选的PWA客户端接管)PWA（渐进式网页应用）通过Cordova或Capacitor构建移动APP（Android、iOS…）多平台桌面应用（使用Electron）Quasar的座右铭是：编写代码一次并.

最近接触了一个vue UI框架 quasar，维护团队非常活跃，有望成为今后UI框架的潮流，推荐大家都可以去试试。根据官方文档创建了一个项目，使用VS Code打开项目（这里要夸一下Quasar团队，把VS Code配置项都列出来了，很贴心，配置VS Code）一、问题描述按照官方Eslint配置配置好后，打开项目，发现 vue<template>中$q出现红色下划线，虽然项目能正常运行，但这个提示一直在，强迫症必须要干掉它。如下图：二、解决办法经过查阅，发现是VS Code语.

19年6月24日 - 20年8月4日 ，感谢 rtzh一、公司初印象踏入公司，瞄了几眼，感觉比这些天面试的公司环境都要强。漂亮的前台小姐姐：“您好，请问有什么能帮到您？”我：“我是来面试web前端的。”前台小姐姐：“好的，跟我来，先坐着稍等一下，我去拿一份面试题。”我：“四处张望，还不错，加油，拿下这家。”前台小姐姐：“给您，做好了到前台找我哈。”我：“好的。”… 一些前端基础选择题，so easy 。我：“您好，做完了。”前台小姐姐：“稍等，我去请我们HR来和您谈一会。”HR：.

开发环境的首页和发布环境的首页展示内容的形式有所不同如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：module.exports = { chainWebpack:config=>{ // 开发阶段 config.when(process.env.NODE_ENV === 'production',con..

在配置autoprefixer时，按照之前的配置可以成功补全css浏览器前缀，但是结合postcss-pxtorem插件，px可以成功转换为rem，但css前缀无效。经过几个小时的鼓捣，终于让我发现了蛛丝马迹。哈哈哈，很开心，好激动！！一起来看一看博主陷入的困境吧。1. autoprefixer的配置根目录postcss.config.js文件中，配置代码如下：module.exports = { plugins: { 'autoprefixer': { overrid.

postcss-pxtorem是一款基于PostCSS插件，用于将像素单位生成rem单位。这款插件能够让开发人员直接按照设计图的尺寸开发，并且能自动将像素单位编译转换成rem。前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem，然而每次在制作过程中需要自己计算rem值，非常不便。接下来介绍一下postcss-pxtorem的使用。一、postcss-pxtorem 配置步骤1. 安装postcss-pxtorem依赖cnpm install postcss-pxtorem --s.

Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀 。它是 Google 推荐的，并在Twitter和阿里巴巴中使用。可以实现css3代码自动补全，也可以运用到sass、less中前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。Au.

Gzip压缩——减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。一、打开控制台Chrome浏览器F12打开控制台，进入调试界面二、在表头单击鼠标右键如下图：勾选Content-Encoding后，在表头会多出Content-Encoding这一列，用于判断是否开启Gzip三、未开启Gzip如未开启Gzip，Content-Encoding是空值。如下图：四、已开启Gzip如已开启Gzip，Content-Encoding会显示gzip.

默认情况下，vue项目的开发模式和发布模式，共用同一个打包的入口文件(即src/main.js)，但是开发阶段和上线阶段代码往往会有细微的差别。一、为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件：发开模式的入口文件为：src/main-dev.js发布模式的入口文件为：src/main-prod.js默认情况下，vue-cli3.0生成的项目，隐藏了webpack配置项，如果我们要配置webpack,需要在项目根目录中创建vue.config.js文件来配置.

gulp 用自动化构建工具增强你的工作流程！前端开发中，之前使用gulp打包的时候一直很顺利，但今天打包压缩js时，出错 ，错误提示：unable to minify JavaScript。度娘搜索了一圈，尝试了其他博主的方法， 并没有解决我的问题。gulpfile.js中代码：gulp.task('js', function () { return gulp.src('src/js/*.js') // 找到目标原文件，将数据读取到gulp的内存中 .pipe(concat('bui.

生成打包报告命令行形式生成打包报告vue-cli-service build --report通过vue-cli的命令选项可以生成打包报告--report选项可以生成report.html 以帮助分析报告内在vue控制台生成打包报告点击任务=>build=>运行运行完毕, 点击右侧分析，控制台面板查看报告通过控制台和分析面板，可以方便的看到项目中存在的问题...

项目中有这样一个需求，使用百度地图，对河北省省边界进行描边，省份以外添加半透明遮罩。一、setTimeout(function(){ // 省/市外 添加遮罩 getBoundary('河北省');}, 1000);//指定省市进行描边处理，省市外进行半透明遮盖。function getBoundary(city){ var bdary = new BMap.Boundary(); bdary.get(city, function(rs){//获取行政区域 .

二、 多域名接接口封装以下转载自掘金一位大佬，附链接：vue中Axios的封装和API接口的管理axios的封装根据需求的不同而不同。这里非常感谢评论里一些很中肯的建议，我也对此进行了思考和针对不同需求的改善。主要有以下改变：优化axios封装，去掉之前的get和post断网情况处理更加模块化的api管理接口域名有多个的情况api挂载到vue.prototype上省去引入的步骤h...

初次使用 ElementUI，发现很多需要注意的点，一不留神就会出现自己给自己埋下的坑。本次主要讲解 Form 表单中，自定义校验规则中的注意点。先来看一下埋坑代码以上代码是ElementUI中自定义校验手机号的使用，此时代码不会报错，但在提交表单时，用到validate方法对整个表单进行校验，会发现这个方法不会执行，百思不得姐啊。。接下来一起来填坑自己埋下的坑，自己总要解决的 ~...

常用插件大全、非常好用、可以达到事半功倍的效果 ~下拉刷新、上拉加载 mescroll上下左右、滑动 better-scroll移动端调试 Vconsole图片预览、放大缩小、旋转 viewerjs对象转URL, 并以&拼接 qs本地存储 storeJS动画库 Velocity.js其他插件，博主会在发现并测试使用后，继续更新，请时刻关注 ~...

双击页面时，会出现蓝色背景，此时可在css添加如下样式即可解决此问题。-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;...

开发过程中，遇到这样一个需求，需要判断用户使用的设备是移动端还是手机端，相对应的跳转不同地址。以下三种方式均可以判断。1.判断pc端function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone"...

使用swiper5时遇到的坑在使用swiper5时，创建了一个轮播图，有多张图片，但是总是卡在第二张图片，且点击左右箭头切换图片时，也不会切换，依然卡在第二张图。（效果图如下）不管怎么操作，一直卡在第二张图这里。经过不断修改，最后终于解决了此问题。代码如下var swiper1 = new Swiper('#swiper1', { initialSlide :0, observ...

一.动态时间1.setInterval() 实现html部分：&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;meta charset=&amp;amp;amp;amp;am

这应该是vue项目在适配移动端时候，最简单的方法之一下面是基本步骤（使用cnpm）1.下载并引入lib-flexiblecnpm install --save lib-flexible在main.js中导入：import 'lib-flexible/flexible'2.引入px2rem-loadercnpm install --save px2rem-loader3.将px...

刚打开项目，发现昨天好好的项目不能运行，报错了！！！一脸懵逼。。。如图：报错原因：项目外层的目录名发生更改解决办法：删除node_modules文件夹 , 重新npm install , 运行项目，OK，运行成功~~~...

1.节点属性的设置 对象.属性名=值; 对象[属性名]=值; obj.setAttribute(pro,value) 2.节点属性值的获取： 对象.属性名 对象[属性名] obj.getAttribute(pro) 注意：前两种设置和获取属性的方法，均需要注意特殊情况 class ---&amp;amp;amp;amp;amp;amp;amp;amp;gt; className for ---&amp;amp;amp;amp;amp

String 对象 不等于 string每一个字符串均为 String对象的一个实例 String对象 -属性： length 字符串中字符的个数 -索引: 从0开始 取出字符串中的字符 str[索引] -遍历: for 注意： 1.字符串中每一个字符均为string类型 2.字符串本身不能被修改方法： charAt(...

一.DOMDOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口）。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM是为了让开发人员通过js的方式操作HTML页面或者XML页面1.节点加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理...

匿名函数有两种用法： 1.赋值 var a=function(){}; 2.自我执行这里我总结了4种匿名函数调用方法： //1. function show(){ document.write('ni hao'); } show(); //2. (function(){ document.write('wo hao'); })();...

1.菱形 var n=7; for(var i=0;i&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;n;i++){ for(var k=0;k&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;n-i;k++){ document.write('&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp'

1.根据用户输入的数据，判断水仙花数（三位数），例如：（153=1111+555+33*3）每位数字的立方和等于该数即为水仙花数。如果是水仙花数，则输出“是”，否则输出“否” 。(三位的水仙花数共有4个：153，370，371，407。) var num = prompt(&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;请输需要判断的水仙花数(三位数):&amp;amp;

一、事件详解： 事件不会自己执行，需要触发(即事件被触发之后才可执行) 事件三要素： - 事件对象 - 事件名称 - 事件处理函数 常见事件写法： - 嵌入式(传统事件绑定) 优点：简单易懂 缺点：将JavaScript代码与html代码混为一起，不利于多人协作开发 例如：(直接在HTML中写入JS代码) &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;button onclick=&amp;amp

一、数组简介1.什么是数组：数组就是一组数据的集合，即一组数，其表现形式就是内存中的一段连续的内存地址。2.数组定义： 1. var arr = new Array() 2 .var arr = new Array(item,item,item...); 定义时即初始化 3. var arr = new Array(length) 定义指定长度的数组 4. var arr ...

一、数组方法总结一.栈方法栈是一种后进先出的数据结构，也就是最新添加的项最早被移除。而栈中项的插入（入栈）和移除（出栈），只发生在一个位置——栈的顶部。1.push()push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾。返回：修改后数组的长度。 var arr = []; arr.push(&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;red&amp;amp;amp;amp;amp;amp;amp;amp;amp;am

显示1行的方法 text-overflow:ellipsis;//显示为省略号 可以用clip,不显示省略号，将溢出部分裁掉 white-space:nowrap;//文字不换行 overflow:hidden显示2行的方法 word-break:break-all;//强制换行 text-overflow:ellipsis;//显示为省略号 display:-web...

PC端是网上找的一位国外大神写的。附上链接：https://meyerweb.com/eric/tools/css/reset/index.htmlhtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, ci...