风烟

nuxt启动项目报错。

head里面增加下面这个就可以网页用safari浏览器打开的时候就可以添加到主屏幕了。改正jpeg之后，添加到主屏幕就没有黑边了。也不会有白边，效果正好。苹果在制作圆角icon样式，用了png就会这样，经查我改成jpeg之后，没有透明度了，就好了。但是如果用png的话就会有黑边，和下面这样。

从npm升级到pnpm的时候，我安装的pnpm支持必须是node12版本以上，先使用nvm升级了一下node版本pnpm启动报错信息pnpm Module not found: Error: Can't resolve 'vue-hot-reload-api解决方案执行安装这个模块 pnpm install --save vue-hot-reload-api...

问题背景使用微信接口生成二维码jslet url = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + this.options.ticket; let that = this; wx.request({ url: url, responseType: 'arraybuffer', success (res) {

//这里this为页面对象var url = this.route //当前页面urlvar options = this.options //如果要获取url中所带的参数可以查看options参考链接https://segmentfault.com/q/1010000008005954

什么是CSRFCSRF（cross-site request forgery)跨站请求伪造：攻击者诱导受害者进去第三方网站，在第三方网站，向被攻击网站发送垮站请求，利用受害者在被攻击网站已经获取的登陆凭证。绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作。一个典型的CSRF攻击有着如下的攻击流程：受害者登陆a.com，并保留了登陆凭证(cookie)攻击者引诱受害者访问了b.comb.com向a.com发送了一个请求： a.com/act=xxx。浏览器会默认携带a.com的cooki

代码如下 var iframe = document.getElementById('iframe'); setInterval(() => { var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow; console.log(iframeWin.document.body.scrollHeight) if (ifra

使用puppeteer进行页面渲染的时候因为要登录才能获取到数据，我们不想走登录流程，想直接把cookie设置好，就需要设置cookies。按照下面的方式进行设置const cookies = { url: url, name: '', value: '' }; await page.setCookie(cookies); await page.goto(url);第一个参数是URL，也就是要增加cookie的URL地址。后面两个就是这个URL下面要增加的

报错原因npm install puppeteer的时候报下面这个提示ERROR: Failed to set up Chromium r901912! Set "PUPPETEER_SKIP_DOWNLOAD" env variable to skip download.{ Error: read ETIMEDOUT at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27) errno: 'ETIMEDOUT', cod

使用echarts-wordcloud做星图的时候，结果在安卓上面有些字明显重叠在一起了。echarts-wordcloudhttps://github.com/ecomfe/echarts-wordcloud经看文档，发现gridSize这个字段最有可能是控制字之前的间距，然后就使用这个属性进行设置，问题就解决了。style.gridSize = 19;...

Live ServerGitLensTODO HighlightWakaTime

生成npm link第一步跳转到对应npm包目录下面，执行sudo npm link，生成本地包，/usr/local/lib/node_modules/会在这个目录下面生成。使用npm link到对应项目下面，使用刚刚生成的link，npm link 包名。这样就可以把项目中以来的npm包指向到本地的项目下面了。yalc方式还有一种是yalc方式，在安装sudo npm i yalc -gyalc的时候提示我node版本过低，我现在版本是8，但是yalc依赖的node版本最小为10.只能等后续升

背景本地调试的时候发现图片不显示出来，线上没有问题，手机上也没有问题，就电脑Chrome有问题。经仔细查看，发现浏览器控制台有这个报错。看起来意思是说无法把cookie因为协议的不同进行跨站带过去。因为我网站的cookie是在a.com下面的，图片也是这个域名下面的，但是图片是https的链接，而我本地调试是http的协议。临时解决方案：地址栏打开chrome://flags/#schemeful-same-site，将选项设置为Disabled。这样这个错误就不报了，图片就正常显示了。

报错信息Oops! Something went wrong! :(ESLint couldn't find the plugin "eslint-plugin-@typescript-eslint". This can happen for a couple different reasons:1. If ESLint is installed globally, then make sure eslint-plugin-@typescript-eslint is also installed

问题代码 res = JSON.parse(xhr.responseText); var img = new Image(); img.onload = function() { document.body.appendChild(img); reslove(res); };}问题排查在onload之前进行debug在每一个关键节点尽心打断点排查。问题原因在reslove(res);的时候res为空，但是在JSON.parse(xh

使用jest配置单元测试的时候运行npm run test得到报错信息SecurityError: localStorage is not available for opaque origins解决方法就是更改jest.config.js里面的testEnvironment的字段为node 就行了module.exports = { verbose: true, testEnvironment: 'node'};package.json里面的scripts为"test":

报错信息node_modules/lodash.template/index.js:1558 throw result; ^SyntaxError: Unexpected token = at Function (<anonymous>) node_modules/lodash.template/index.js:1550:12问题背景使用vue-server-renderer编译，插入html到模版中const fs = require('fs')

内联js代码放在body前面，操作dom的部分，因为页面还没有渲染，导致操作失败，不起作用，不能放在前面js放在后面，页面已经渲染完成，这个时候操作dom页面会闪一下，不合适js一般建议放在底部，因为js不同于html和css，他是阻塞式加载，浏览器加载js的时候，其他资源不可以并行加载。并且js的下载和执行都属于加载，只有js执行完成，其他资源才开始加载js引擎和gui渲染引擎是互斥的，js执行过程中gui引擎会挂起（渲染的当前状态会被保存），当js执行结束后，渲染线程才会继续...

目标有app跳转到app目标页，无app跳转到下载页，或者跳转到appstore。方案一先跳转app对应页面，然后过2s钟跳转下载页。然后中间检测如果visibilitychange事件触发，或者pagehide触发，则清除跳转到下载页的定时器。window.location.href = localPageUrl;let timer = setTimeout(() => { window.location.href = downloadUrl;}, 2000);docume

css通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换在模版中来实现骨架屏使用一个Base64的图片来作为骨架屏使用图片作为骨架屏； 简单暴力，让UI同学花点功夫吧；小米商城的移动端页面采用的就是这个方法，它是使用了一个Base64的图片来作为骨架屏。使用专门的.vue 文件来完成骨架屏使用专门的.vue 文件并自动插入静态骨架屏自动生成骨架屏...

方式1(全路径引用)在我的需要用到lodash的a.vue文件中import cloneDeep from 'lodash/cloneDeep'然后就可以直接用 cloneDeep(xx);方式2(使用插件优化)npm install lodash-webpack-plugin -Snpm install babel-plugin-lodash -S这两个插件优化引用模块是 ES6 规范import {isEmpty, isObject, cloneDeep} from.

<video controls controlslist="nodownload" id="video" src=""></video>

This dependency was not found:* swiper/dist/css/swiper.css in本地拉取远程master代码，然后执行报这个错误，经查是本地vue-awesome-swiper版本不对，因为之前安装过，导致报错，应该是版本不一致导致然后删除node_modules模块重新安装也不行，经发现是自己的package-lock.json文件没有删除，导...

axios.interceptors.response.use( response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 if (err.response.status === 401) { } ...

ios输入框的maxlength限制200字符，但是实际可以输入超过200bug，这个but我在vue中改为使用watch检测input值改变，用js判断字符串长度来限制输入长度，解决。 watch: { inputText(value) { this.limitMaxLength(); } }, limitMa...

使用了fastclick之后，在输入框上绑定click事件，然后自动focus就可以了。<textarea class="input-content" @click="focus" :placeholder="placeholderText" v-model="inputText" :maxlength="maxInputTexLength"></textarea&g...

在使用vue动画的时候需要循环展示某个信息，我们使用@keyframes show-in { 0% { opacity: 0; transform: scale(.5) translateY(0); } 20% { opacity: 1; transform: scale(1) translateY(0);...

发现是父元素使用了这个属性-webkit-overflow-scrolling: touch;导致z-index失效。去掉这个属性就行了。

移动端做图片上传功能，大体上要经历以下几个步骤。利用fileReader，读取blob对象或者file对象，将图片转为data uri的形式利用canvas，在页面上新建一个画布，利用canvas提供的api，将图片画入到这个画布中利用canvas.toDataUrl(),进行图片的压缩，得到图片的data url值上传文件步骤一当中，在进行图片压缩的时候，我们要先进性判断文件的大小...

npm run build的时候报错Module build failed: ModuleBuildError: Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64)解决方案Had to do...

核心代码使用contenteditable=&quot;true&quot;属性&amp;lt;div data-v-b0c64392=&quot;&quot; contenteditable=&quot;true&quot; spellcheck=&quot;false&quot; placeholder=&quot;输入评论...&quot; c

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

下载rpm源 MySQL Yum Repositorywget https://repo.mysql.com//mysql80-community-release-el7-1.noarch.rpm此地址是从 https://dev.mysql.com/downloads/repo/yum/ 找到的，本人选择第一个。安装rpm源 MySQL Yum Repositorysudo ...

移动端显示输入框框直接focus不会弹出软键盘解决思路我们让点击的时候可以通过点击label关联input，这个input(input1)不要通过display：none， 隐藏，我们要通过display: block;position: absolute;z-index: -1;left: -1000px;top: 0px;隐藏，这样其实我们点的时候就是点击输入框，然后键...

代码示例_hmt.push(['_trackPageview', '/virtual/login']);router.afterEach((to, from) =&amp;amp;gt; { console.log(to); console.log(to.path); window._hmt.push(['_trackPageview', to.path]);});参考文...

今天看了一天的前端的模块化的解决方案，发现如果是初学者会有很多的疑问，网上看了很多文章渐渐才有了头绪。首先模块化的方案其实一直都用，从我们最基本的函数来说可以说就是一个模块化的过程，可是这个模块化的过程会有很多的弊端，首先就是变量冲突的问题，命名冲突的问题，全局作用域的污染，一旦项目构建的越来越大，会导致我们越来越痛苦，所以出现了很多的解决方案，模块化就是目前比较流行的一种方法，es6出来完全就实现

解决办法在蒙层弹起的时候将body设置为fixed定位在蒙层消失的时候将body恢复原位popupVisible(newValue) { if (newValue) { document.body.style.position = 'fixed'; document.body.style.width = '100%'; document....

两种解决办法在对象设置的时候设置增加新字段，通过新复制对象来设置state.obj = Object.assign({},state.count)使用vue的set进行设置新字段Vue.set(state.count, 'count', 0);...

经过dom层层注释缩小反馈终于找到问题所在。问题经过我在弹起弹窗的时候，设置了popupVisible为true然后触发了vue的updated生命周期钩子函数然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘然后就导致了底部页面向上滚动解决办法去掉updated函数里面的重绘方法...

他的思路就是在我们本地mock数据的时候，我们定义json数据规则，然后mockjs根据规则，生成对应的数据，然后使用这个数据，作为你对应的响应进行返回就可以了。读取mock配置文件生成mock数据层const fs = require('fs');const path = require('path');const Mock = require('mockjs')module.exp...