### vue项目刷新效果 有时候，我们需要对当前页面进行刷新，让vue重新加载页面，这是一个很常见的页面效果 ### 实现方法 v-if 添加到 router-view 实现方法也很简单，就是在 router-view 中添加 v-if 即可实现刷新效果 注意：不是在app.vue中的 router-view添加哦，而是我们项目的layout组件中的router-view，如果是 app.vue 那么就会出现页面白屏的效果 ### 实现代码 通过状态管理vuex控制变量，通过点击按钮，刷新vuex数据，实现页面刷新 #### layout.vue html部分的代码 ```vue <transition name="fade-transform" mode="out-in"> <!-- 在这里添加 v-if 即可 --> <keep-alive :include="cachedViews" v-if="manualRefresh"> <router-view :key="key" />

### jszip nodejs 压缩文件使用的是``jszip` ```js const JSZIP = require('jszip') const zip = new JSZIP() // 构建本地Zip文件 function buildZip() { pushZip(zip, path.resolve(__dirname, './dist')); zip.generateAsync({ type: 'nodebuffer', compression: 'DEFLATE', compressionOptions: { level: 9 } }).then(function (content) { fs.writeFile(path.resolve(__dirname, './dist.zip'), content, err => { if (err) throw err; console.log('文件已被保存'); }); });

今天给大家推荐一个比较简单取巧的方法，那就是用css控制，在css或scss中覆盖elementui的样式即可 **css实现el-table type="selection"时,表头添加“全选”二字** ```css .el-table__header .el-table-column--selection .cell .el-checkbox:after { content: "全选"; } ```

问题是在请求新浪接口数据的时候遇到的： http://hq.sinajs.cn/list=股票代码 ### nodejs + axios 请求数据，同时解决乱码问题 问题现象：  axios是可以在服务端使用的，推荐代码如下，其中res是express返回数据的操作 ```js const axios = require('axios') const iconv = require('iconv-lite'); function getSharePrice ({ code, res}) { const url = 'http://hq.sinajs.cn/list=' + code axios({ method: 'post', url: url, responseType : 'stream' //将数据转化为流返回 }).then(result => { let

### css 实现按钮按下效果 核心代码 ```css .yes-btn { background-image: url('../assets/img/web/index/yes.png'); background-size: 100% 100%; margin-right: cssNum(26); } .yes-btn::before { opacity: 0; content: ' '; position: absolute; top: 0; left: 0; width: cssNum(97); height: cssNum(49); background-image: url('../assets/img/web/index/yes-active.png'); background-size: 100% 100%; } ```

### 报错原因，可能与 第三方库 vue-element-extends 有关 ### 常见表现 重新安装依赖或者 npm install 后出现改报错问题 ### 解决方案 1. 删除项目中的 node_modules 2. 删除 package-lock.json 3. npm cache clean --force 4. npm install

**小程序端代码写法** 1. axml文件代码： <view> <web-view id="web-view-1" onMessage="sendToH5Message" src={{webUrl}}></web-view> </view> 2. JS文件代码： Page({ data: { webUrl: String, }, sendToH5Message(e) { my.alert({ content: JSON.stringify(e.detail), }); console.log('E:' + e.detail); }, onLoad(query) { ///接收到的值 console.log(query.webUrl); this.setData({ webUrl: query.webUrl, }) this.webViewContext = my.createWebViewContext('web-vi

### Access denied 报错 这种情况一般是拉取代码没有权限，可能原因是：**账户么有权限， 或者是gitlab 、 git 修改密码后，导致读取的密码是原来的密码** 建议：macos - 钥匙串访问 - 搜索 gitlab 找到  然后，删除这个，再次使用 sourceTree 拉取代码就会提示输入用户密码，然后输入即可

### vscode 保存代码的时候自动格式化代码 #### 禁用 JS-CS-HTML Formatter这个插件 #### vscode 操作界面关闭 

nginx serve 配置中，默认第一个解析的域名服务，访问IP后可以直接IP访问

原因在于直接将视图添加到了cell上,改为将子视图添加到cell.contentview上即可正常触发点击事件

### 美化代码 html、css、JavaScript 都是可以美化的 ### 安装 ```bash npm install js-beautify ```` ### 使用 ```js // 导入依赖 import { js_beautify, css_beautify, html_beautify } from 'js-beautify' // 使用,css、html均是这种策略使用 code = js_beautify(code) ```

### 前端网页性能优化 #### 减少HTTP请求 #### CSS Sprites CSS 精灵雪碧图，将许多图片合并到一张图片上，达到减少HTTP请求的目的，从而优化性能 #### 合并 CSS 和 JS 文件 利用打包工具合并文件 #### 采用 lazyLoad 懒加载 #### 控制资源文件加载优先级 css在上，js在下（许多现代浏览器优化做的非常好，不会阻止流程） #### 利用浏览器缓存 * 强缓存和弱缓存 * 协商缓存 #### 减少重排（Reflow） 重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升 #### 减少 Reflow 减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style

### 判断 js 类型的方式 #### typeof 可以判断出'string','number','boolean','undefined','symbol' 但判断 typeof(null) 时值为 'object'; 判断数组和对象时值均为 'object' #### instance ```javascript function A() {} let a = new A(); a instanceof A //true,因为 Object.getPrototypeOf(a) === A.prototype; ``` #### Object.prototype.toString.call() 常用于判断浏览器内置对象,对于所有基本的数据类型都能进行判断，即使是 null 和 undefined ```javascript Object.prototype.toString.call(null);//”[object Null]” Object.prototype.toString.call(undefined);/

### JSON.stringify ```js JSON.stringify(value[, replacer[, space]]) ``` #### value: 必需， 要转换的 JavaScript 值（通常为对象或数组）。 #### replacer: 可选。用于转换结果的函数或数组。 如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。 如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。 ### 实例代码 ```js let str = JSON.stringify(myObject, null, 2); ``` #### space: 可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。spac

 勾选效果分别为，忽略接口请求白名单，忽略web-view加载页面白名单。不勾选则不可正常测试相应功能

回退命令： ```bash $ git reset --hard HEAD^ 回退到上个版本 $ git reset --hard HEAD~3 回退到前3次提交之前，以此类推，回退到n次提交之前 ``` 强推到远程： ```bash git push origin HEAD --force ```

### rem rem是全部的长度都相对于根元素<html>元素 通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem ### em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的font-size ### vw/vh 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。 ### px px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 一般电脑的分辨率有{1920*1024}等不同的分辨率 1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

### 水平居中 * 行内元素: text-align: center * 块级元素: margin: 0 auto * position:absolute +left:50%+ transform:translateX(-50%) * display:flex + justify-content: center ### 垂直居中 * 设置line-height 等于height * position：absolute +top:50%+ transform:translateY(-50%) * display:flex + align-items: center * display:table+display:table-cell + vertical-align: middle;

### @support 主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。 ### calc() 函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算 ### @media 媒体查询，可以检查当前屏幕的宽度，你可以针对不同的媒体类型定义不同的样式