02 2020 档案
摘要：Tree Shaking 只支持 import ES2015 import 这种静态引入 不支持require CommonJS 这种动态引入 前景提要： 当我们使用math.js文件的cube功能时，通常这样做： 我们只使用了math.js里面的cube但是用webpack打包 后出现下面这种情况
阅读全文
摘要：step one: https://babeljs.io/setup Choose your tool (try CLI) select webpack Step two： npm install --save-dev babel-loader @babel/core module: { rules
阅读全文
摘要：webpack中autoprefixer是配合postcss-loader使用的，首先安装相应资源： npm i -D style-loader css-loader postcss-loader autoprefixer 在webpack.config.js中 const path = requi
阅读全文
摘要：test.conf proxy_cache_path cache levels=1:2 keys_zone=my_cache:10m; server { listen 80; server_name testyhl.com; location / { proxy_cache my_cache; pr
阅读全文
摘要：cookie 服务器端返回数据的时候，通过Set-Cookie这个头设置一些内容，浏览器接收到数据后会将这些内容保存起来，在下次同域的请求中，浏览器会带上之前保存的内容。服务器通过对这个内容的比较，分辨是哪个用户请求数据。 a.通过Set-Cookie设置 b.下次请求会自动带上 c.键值对，可以设
阅读全文
摘要：[vuex] do not mutate vuex store state outside mutation handlers. import * as types from './mutation-types' import {playMode} from 'common/js/config' i
阅读全文
摘要：下载地址：https://github.com/microsoft/cascadia-code/releases/download/v1911.21/Cascadia.ttf 下载后右键点击下载的文件，安装 然后去自己用的编辑器中将字体样式修改成 cascadia-code
阅读全文
摘要：<template> <div class="search-box"> <i class="icon-search"></i> <input class="box" v-model="query" :placeholder="placeholder"> <i @click="clear" v-sho
阅读全文
摘要：我们第一次推送master分支时，由于远程库是空的，加上了-u参数，Git不但会把本地的master分支内容推送的远程新的master分支，还会把本地的master分支和远程的master分支关联起来，在以后的推送或者拉取时就可以简化命令。
阅读全文
摘要：缓存工作示意图： 在http协议里面，数据的验证方式，主要有两个验证头：Last-Modified 和 Etag。 Last-Modified 配合Last-Modified-Since或者If-Unmodified-Since使用，对比上次修改的时间验证资源是否需要更新。 Etag 是一个更加严格
阅读全文
摘要：缓存Cache-Control的特性 a.可缓存性 public : http请求返回的过程中，返回的数据可以在路径中的每个节点被缓存 private : 只有请求的浏览器才可以缓存请求到的数据 no-cache: 可以使用缓存，但是使用之前必需先通过服务器验证一下，如果源服务器验证 后说可以使用本
阅读全文
摘要：cors包含的限制： 默认允许方法： GET、HEAD、POST 默认允许的Content-Type text/plain、multipart/form-data、application/x-www-form-urlencoded 这三个也就是html的form表单可以设置的数据类型 请求头的限制
阅读全文
摘要：跨域是指在浏览器客户端，产生的行为。在curl客户端不存在跨域。 浏览器跨域案例展示： server.js const http = require('http') const fs = require('fs') http.createServer((req, res) => { console.
阅读全文
摘要：1.浏览器客户端 2.命令行客户端 展示一 展示二 展示三
阅读全文
摘要：HTTP方法 用来定义对于资源的操作 常用的有GET、POST 、PUT 、DELETE等 从定义上讲有各自的语义 HTTP CODE 定义服务器对请求的处理结果 各个区间的CODE有各自的语义 好的HTTP服务可以通过CODE判断结果
阅读全文
摘要：URI a.Uniform Resource Identifier/统一资源标志符 b.用来唯一标识互联网上的信息资源 c.包含URL和URN URL a.Uniform Resource Locator/统一资源定位器 b.http://user:pass@host.com:80/path?que
阅读全文
摘要：图1： 图2： 抓包工具： Wireshark 编辑 Wireshark（前称Ethereal）是一个网络封包分析软件。网络封包分析软件的功能是撷取网络封包，并尽可能显示出最为详细的网络封包资料。Wireshark使用WinPCAP作为接口，直接与网卡进行数据报文交换。 在过去，网络封包分析软件是非
阅读全文
摘要：HTTP/0.9 a.只有一个命令GET b.没有HEADER等描述数据的信息 c.服务器发送完毕，就关闭TCP链接 HTTP/1.0 a.增加了很多命令，比如说POST 、PUT b.增加status code和header。 status code是用来描述，服务端处理我们的请求后的它的一个状态
阅读全文
摘要：5.物理层主要作用时定义物理设备如何传输数据； 4.数据链路层在通信的实体间建立数据链路连接 3.网络层为数据在节点之间传输创建逻辑链路 2.传输层： 向用户提供可靠的端到端(Edn-to-End)服务 传输层向高层屏蔽了下层数据通信的细节 1.应用层 为应用软件提供了很多服务 构建于TCP协议之上
阅读全文
摘要：当多个组件需要处理同一个问题，并且处理该问题的逻辑又相似，非常推荐用mixin
阅读全文
摘要：安装了webpack-dev-server后 , 配置 "start": "webpack-dev-server" 然后运行 npm start 会开起一个web服务。 这时当我们的代码发生变化时，浏览器会自动刷新，显示变更后的代码所展示的内容。但是，这种情况下会将没有发生改变的部分也刷新，也就是全
阅读全文
摘要：html-webpack-plugin Introduction： The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for
阅读全文
摘要：官方讲解地址：https://webpack.js.org/guides/development/#using-webpack-dev-server The webpack-dev-server provides you with a simple web server and the abilit
阅读全文
摘要：官方文档地址：https://webpack.js.org/guides/development/#using-watch-mode You can instruct webpack to "watch" all files within your dependency graph for chan
阅读全文
摘要：// 开发模式下 module.exports = { mode: 'development', devtool: 'cheap-module-eval-source-map' } // 线上模式下 module.exports = { mode: 'production', devtool: 'c
阅读全文
摘要：#常用命令选项 默认覆盖 -n 不覆盖 -i 交互 -f 不交互直接覆盖 -u 只移动新的文件 -v 显示详细信息 #移动覆盖3个文件到/tmp目录 mv a.txt b.txt c.txt /tmp #重命名a.txt为b.txt mv a.txt b.txt
阅读全文
摘要：function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } function shuffle(arr) { let _arr = arr.slice() // 创建一个源数组
阅读全文
摘要：function addClass(el, className) { if (hasClass(el, className)) { return } let newClass = el.className.split(' ') newClass.push(className) el.classNam
阅读全文
摘要：var mode = { 0: 'sequence', 1: 'loop', 2: 'random' } var m = 1 function changeMode() { var newMode = (m + 1) % 3 console.log(mode[newMode]) m++ } chan
阅读全文
摘要：function _pad(num, n = 2) { let len = num.toString().length while (len < n) { num = '0' + num len++ } return num }let seconds = 8_pad(seconds) // '08'
阅读全文
摘要：<audio ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" :src="currentSong.url"></audio>I ready() { this.songReady = true } // 当音频能
阅读全文
摘要：<template> <div class="hello"> <div class="toggle" @click="fullScreen = !fullScreen" v-show="fullScreen">toggle</div> <transition name="normal" @enter
阅读全文
摘要：<template> <div class="a"> <div class="basic" ref="ba">基本元素</div> <chil ref="ccd"></chil> </div> </template> <script> import Chil from '.../chil.vue'
阅读全文
摘要：const express = require('express') const axios = require('axios') const bodyParser = require('body-parser') const app = express() const apiRoutes = ex
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片的onload
阅读全文
摘要：1. 2. 3. 4. 5. 6. 7.“动态路由”和“编程式路由”参数的接收方式：路由的参数 页面之间跳转的参数
阅读全文
摘要：使用setTimeout将touchmove等事件延时，可以提高性能。 在搜索功能中也可以使用函数节流 export function debounce(func, delay = 200) { let timer return function (...args) { if (timer) { c
阅读全文
摘要：如果项目里没有webpack.config.js这个文件，webpack会使用它本身内置在源码里的配置项。 webpack.config.js这个配置名称可以通过指令修改 npx webpack --config xxx.js 或者 npm webpack --config xxx.js
阅读全文
摘要：注释： options:{ importLoaders: 2 } 解决样式文件里使用@import 'xxx.xxx' 的问题 module: { rules: [{ test: /\.scss$/, use: [ 'style-loader', { loader: 'css-loader', op
阅读全文
摘要：npx 指令会先在项目的node_modules里面找资源包 npm info 包名称 [查看资源包的信息]
阅读全文
摘要：{ "name": "webpack-demo", "version": "1.0.0", "description": "learning webpack", "private": true, > 表示项目是私有的，不会发布到npm的线上仓库 "main": "index.js", > 向外暴露的
阅读全文
摘要：.ellipsis{ overflow: hidden white-space: nowrap text-overflow: ellipsis } 注意当添加了ellipsis样式的元素没有显示省略号样式时，可以给元素或者其父元素添加一个min-width: 0
阅读全文
摘要：在.eslintrc.js中配置： // add your custom rules here rules: { // no space before function name "space-before-function-paren": 0 }
阅读全文
摘要：.father { width: 100% } .child { width: 100%; height: 0; padding-bottom: 20%; background: green; overflow: hidden; } <body> <div class="father"> <div
阅读全文
摘要：第一步：搜索icon font，进入 https://www.iconfont.cn 第二步： 注册账户 第三步： 创建一个项目 1.点击图标管理->我的项目 2.新建项目 第四步：下载选择好的图标 第五步：添加相应文件，并修改引用路径 第六步：使用字体图标
阅读全文
摘要：vue-cli[2.x]中: 安装 npm install fastclick --save 使用： 在main.js中 ：先 import fastClick from 'fastclick' 然后 fastClick.attach(document.body) import Vue from '
阅读全文
摘要：新建一个border.css的文件，然后将代码复制粘贴，然后引用border.css样式文件，然后给需要添加边框的元素，加相应的类样式。 tips: border-bottom[一像素下边框]；border-topbottom[上下分别添加一像素边框] @charset "utf-8"; .bord
阅读全文
摘要：<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
阅读全文
浙公网安备 33010602011771号