promot: 我是一名前端开发者，想要做一个针对后端开发人员的前端开发知识宣讲PPT，请帮我列一个PPT大纲，目的是让他们更好的了解前端开发当准备为后端开发人员做前端开发知识宣讲的PPT时，可以考虑以下大纲：...

由于一些客户端测试包存在安全限制，仅支持白名单内的域名才能访问，对调试本地代码带来很多不便，如果不想代码改动一次就部署一次那就继续看下去吧~

项目打包配置需要区分环境变量进行区别配置，但这个变量为平台注入的值，非 NODE_ENV，需要获取到注入的值进行配置上的区分，因此利用 node 中的子进程去执行打包命令，在执行文件中进行区分。

背景系统监控发现页面有异常请求： {代码...} 控制台报了一个 404 的错误，但是页面展示正常，逻辑未受到影响。出现问题的页面代码： {代码...} 其中 data.imgUrl为接口返回数据。原因&解决实际上出现这个问题主要是由于 vue 的渲染机制，解决方法也很简单：给url的变量设置一个默认值判断接口请求完再进行页面渲染...

存：localstorage.setItem('key', key-value);取：localstorage.getItem('key');

有release、test两个分支，test上进行修改提交后，merge到release分支，但merge后想撤销此次merge操作，那要怎么操作呢？

存：localstorage.setItem('key', key-value);取：localstorage.getItem('key');

慎用eslint-disable

问题描述按钮样式为图标+文字，在使用flex布局写垂直居中时，iphone7手机上文字和图标却没有居中，居左显示。代码如下（已精简）： {代码...} 预期样式：实际样式：解决方式给icon和文字外再包一层标签，给外层标签设置flex垂直居中样式，代码如下： {代码...}

遇到过几次类似的问题，新建 pages 后，增加 App.vue、index.js 文件，git 可以识别出 index.js 为新增文件，但识别不到 App.vue文件。

存：localstorage.setItem('key', key-value);取：localstorage.getItem('key');

经排查发现在出现问题的手机内会报 Uncaught SyntaxError: Unexpected token … js 的错误，发现是打包后的组件文件出现的错误，再次定位发现是 oppovivo 部分版本手机不兼容 ES6，出现问题的组件是 Swiper，发现页面内引入 Swiper 的方式为以下这种 npm 安装组件包的方式：

今天在开发时遇到一个问题，如题目所示，起初毫无头绪，以为是元素适配的问题，或者下方有遮挡，但是定位元素后发现并不是上述问题。 图中所示为两个button按钮，在iOS和其他安卓手机中均显示正常，但是在vivoplay6中下方边框消失。 button是一个行内元素，这里简单介绍一下什么是行内元素： 设置宽高无效 对margin仅设...

webpack没有全局安装的话 webpack --config webpack.dev.config.js 命令会出错。要么全局安装，要么运行命令:

今天在写样式时，icon和文字都进行了垂直居中的处理，但是icon并没有垂直居中，后来发现由于 line-height 和 vertical 一起使用导致与预期样式不同，特此对 vertical-align 总结进行！

Canvas 点线动画案例 画圆： arc(x, y, r, start, stop) 画线： moveTo(x, y) 定义线条开始坐标lineTo(x, y) 定义线条结束坐标 填充： fill() 绘制： stroke() 1、画一个点 初始化 {代码...} 找到 <canvas> 元素 let canvas = document.getElementById("canvas"); 创建 context 对象 let ctx = canvas.getContext(...

如果一个元素具有 BFC，内部子元素无论如何都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外面的元素的; BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违 BFC 元素的子元素不会影响外部元素的设...

容器设置了 overflow:hidden，且每个列表高度和容器的高度一样高，这样保证永远 只显示一个列表。当我们点击按钮，如第三个按钮，会改变 URL 地址的锚链为#three，从 而触发 id 为 three 的第三个列表发生的锚点定位，也就是改变容器滚动高度让列表 3 的上 边缘和滚动容器上边缘对齐，从而实现选项卡效果。

1、什么是webpack 模块打包工具 ：分析项目结构，找到JS模块以及其它的一些浏览器不能直接运行的语言（less等），并将其打包为合适的格式以供浏览器使用。 2、webpack核心概念 主要有 6 部分： Entry : 输入入口，webpack构建第一步从这里开始 Moudle ：一个模块对应一个文件，从entry 开始递归找到所有依赖的模块 Chunk...

Gulp是一个自动化的前端构建工具，具有一些优点： 易于使用：通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。 构建快速：利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。 高质量的插件：Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。 易于学习：通过最少的 API，掌...

相信大家在写css属性的时候，会遇到一些问题，比如说：垂直对齐，垂直居中，背景渐变动画，表格宽度自适应，模糊文本，样式重置，清除浮动，通用媒体查询，自定义选择文本，强制出现滚动条，固定头部和页脚，自己在网上看到的一篇关于css的文章，感觉这里边一些常用的css代码片段对大家很有帮助，所以我就把这篇文章分享...

接收到表示错误的HTTP状态码时，fetch()返回的Promise不会被标记为reject（即使状态码为404或500）。fetch()会将Promise状态标记为resolve（但resolve返回值但OK 属性设置为 false）。网络故障或请求被阻止才会标记为reject。

利用 CSS3 的 Animation 可以创建动画，在许多页面中能够替代 Flash、JS 等，提升页面加载速度。众所周知，Animation 有 8 大属性，如下所述：

filter() Filter() 创建一个新数组，新数组中返回的值为经过检查指定数组中满足条件的所有元素。 ⚠️filter 不会改变原数组⚠️filter 不会对空数组进行检测 语法 array.filter(function(currentValue,index,arr), thisValue) 举个🌰： 过滤得到数组中大于10的值 {代码...} 结果： [20, 30, 40] map() map() 方法返回一个新...

Display:none显示隐藏不会影响animation动画，但是会影响transition过渡效果的执行，所以transition往往和visibility搭配

起因：扫码后弹窗分城市（北京、上海）区分页面，在进行命名定义时将 pages 扫码后弹窗下的页面命名为：scan_app_pop 和 scan_app_popsh，然而在页面上线后，发现上海的链接无法正确显示，页面无内容。经排查发现是nuxt router 动态路由的一个问题 ?