[关闭]
@yqlar 2020-07-21T06:53:31.000000Z 字数 24526 阅读 1364

笔记

笔记

若笔记中有错漏或说明不清的地方，请加 QQ 234725468 讨论。

目录:

1. 工具网站

练瓜所

HTML CSS JavaScript 面试 杂项
Bootstrap 自动布局 CSS 布局入门 MDN 前端技术文档 前端算法题 工具库集合
HTML5 离线缓存 CSS3 检测 JS 3D库 张雯莉简历 前端优化方案
移动端页面适配 CSS3 动画 JS 习题 前端开发技术手册 分页轮子
HTML 代码规范 CSS3 盒模型新特效 vue动画 前端面试题 icon font
CSS 转 sass swiper iScroll-5 教程 阿里 iconfont
CSS 多边形 PS 教程
CSS 兼容性检测
CSS 代码规范
CSS 大牛张鑫旭博客
flex 布局详解
CSS 尺寸转换
button 样式
line-hight 详解
很清新的 CSS 库
img 相关的动画集合
色彩
CSS 渐变生成
CSS3 一个div的动画
JS 动画！！
css动画

2. HTML

阴影工具
https://www.cssmatic.com/box-shadow

背景渐变

https://www.imooc.com/article/27831

localStorage

localStorage.removeItem('keys') 删除某个元素
localStorage.clear() 删除所有元素

DOM

  1. window.devicePixelRatio  // 取得设备一个虚拟像素对应的物理像素数
  2. window.document.documentElement.getBoundingClientRect().width   // 取得屏幕宽度

给视频添加封面属性为 poster='地址'

  1. <video controls poster="/images/w3school.gif">
  2.    <source src="movie.mp4" type="video/mp4">
  3.    <source src="movie.ogg" type="video/ogg">
  4.    Your browser does not support the video tag.
  5. </video>

网页自定义鼠标样式

  1. html {
  2.         cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18" style="font-size:14px"><text y="16">🦄</text></svg>'), auto;
  3. }

移动端 ios 输入框将 “换行” 变成 “搜索”

  1. <form action="javascript:return true;">
  2.     <input type="search" name="search" id="search">
  3. </form>

备注：（可能出现的影响）
其中form 必须有action。
如果你不想要action，因为它可能影响了你input的提交逻辑，可以重写一下onsubmit onclick等方法来实现。
也可以用简单的方法：action="javascript:return true;"。
另外，如果要移除搜索框的叉叉图标，可以设置样式
::-webkit-search-cancel-button { display: none; }

搬运下面两个网页的方法：
https://segmentfault.com/q/1010000002720680/a-1020000002720808
http://www.cnblogs.com/wei-lai/p/5157776.html

关于移动端 1px 的适配问题

以下方法完全适配所有移动端和桌面端设备，解决安卓和 ios 的 1px 显示“难产”的问题

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>app</title>
  6.     <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <script>
  11.       // 
  12.       function scaling() {
  13.         let viewport = document.querySelector('meta[name=viewport]');
  14.         //下面是根据设备像素设置 viewport
  15.         let dpi = window.devicePixelRatio;           // 取得设备一个虚拟像素对应的物理像素数
  16.         let dpiProp = String((1 / dpi).toFixed(6));  // 根据物理像素数计算缩放比例
  17.         const a = 'content';
  18.         let b = 'width=device-width,initial-scale='+ dpiProp + ', maximum-scale='+ dpiProp + ', minimum-scale='+ dpiProp + ', user-scalable=no';
  19.         viewport.setAttribute(a, b);                 // 配置 meta 标签的 content 内容
  20.       }
  23.      // 判断屏幕是否刷新或者移动端屏幕是否旋转
  24.       function init() {
  25.         const doc = window.document;
  26.         const docEl = doc.documentElement;
  27.         let tid = '';
  28.         window.addEventListener('resize', () => {
  29.           clearTimeout(tid);
  30.           tid = setTimeout(refreshRem(), 300);
  31.         }, false);
  32.         window.addEventListener('pageshow', (e) => {
  33.           if (e.persisted) {
  34.             clearTimeout(tid);
  35.             tid = setTimeout(refreshRem(), 300);
  36.           }
  37.         }, false);
  38.         refreshRem(docEl);
  39.       }
  42.      // 页面大小改变或者移动端屏幕旋转后自动刷新 rem 
  43.       function refreshRem(docEl) {
  44.         const docE = docEl || window.document.documentElement;
  45.         const width = docE.getBoundingClientRect().width;
  46.         const rem = width / 20; // 将屏幕宽度分成20份， 1份为1rem
  47.         docE.style.fontSize = rem + 'px';
  48.       }
  50.       function _main() {
  51.         scaling();
  52.         init();
  53.       }
  55.       _main();
  56.     </script>
  57.   </head>
  58.   <body>
  59.     <div id="app"></div>
  60.     <!-- built files will be auto injected -->
  61.   </body>
  62. </html>

备注：若是在 vue 环境下使用，可以配合

http://www.cnblogs.com/jhli/p/6125095.html

3. CSS

文案换行

  1.     word-wrap: break-word;
  2.     word-break: break-word;
  3.     white-space: normal;

去重ios点击时出现的灰色蒙层


-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;

select显示默认内容

  1. <select>
  2.     <option value='' disabled selected style='display:none;'>我是默认值，不影响选择</option>
  3.     <option value='1'>真正的选项</option>
  4. </select>

svg高斯模糊图片

可以直接写在 HTML 中

  1. <!-- HTML -->
  3. <svg class="gaussian-box" version="1.1"
  4.                                  xmlns="http://www.w3.org/2000/svg">
  5.                                 <defs>
  6.                                     <filter id="blur">
  7.                                         <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
  8.                                     </filter>
  9.                                 </defs>
  10.                                 <image :xlink:href="item" x="0" y="0" height="110%" width="110%" filter="url(#blur)"/>
  11.                             </svg>

css动效

vue 动效，渐入渐出

  1.     .headcover-enter {
  2.         opacity: 0;
  3.     }
  4.     .headcover-enter-active {
  5.         transition: all 0.5s ease;
  6.     }
  8.     .headcover-leave-active {
  9.         opacity: 0;
  10.         transition: all 0.5s ease;
  11.     }
  15. // 自上而下出现， 自下而上消失
  16. .down-enter-active{
  17.         transition: all 0.8s;
  18.     }
  20.     .down-leave-active {
  21.         transition: all 0.8s;
  22.     }
  24.     .down-enter{
  25.         transform: translate(rem(0), rem(-900));
  26.     }
  28.     .down-leave-to {
  29.         transform: translate(rem(0), rem(-1000));
  30.     }

1、心跳跳动

  1. .item {
  2.     animation: 1.5s xintiao linear infinite ;
  3. }
  4. @keyframes xintiao {
  5.     0% { -webkit-transform: scale(1); }
  6.     30% { -webkit-transform: scale(1); }
  7.     40% { -webkit-transform: scale(1); }
  8.     50% { -webkit-transform: scale(1.05); }
  9.     60% { -webkit-transform: scale(1); }
  10.     70% { -webkit-transform: scale(1.03); }
  11.     80% { -webkit-transform: scale(1); }
  12.     100% { -webkit-transform: scale(1); }
  13. }

2、元素逐个翻转进入 （vue中实现）

  1. js:
  2.     created() {
  3.         const t = this.idx * 50;
  4.         setTimeout(()=> {
  5.             setTimeout(() => {
  6.                 if (this.from === 'second') {
  7.                     this.filter();
  8.                 }
  9.             }, t);
  10.         }, 200);
  11.     },
  15. css:
  16.     .item {
  17.         animation-name: xuanzhuan;
  18.         animation-duration: 0.35s;
  19.         animation-iteration-count: 1;
  20.     }
  22.     @keyframes xuanzhuan {
  23.         0% {  transform: rotateY(90deg);  }
  24.         50% {  transform: rotateY(0deg);  }
  25.         75% {  transform: rotateY(25deg);  }
  26.         100% {  transform: rotateY(0deg);  }
  28.     }

css 单行省略 和 多行省略

  1. .单行 {
  2.     overflow: hidden;
  3.     text-overflow:ellipsis;
  4.     white-space: nowrap;
  6. }
  8. .多行 {
  9.   text-overflow: ellipsis;
  10.   display: -webkit-box;
  11.   -webkit-line-clamp: 1; /* 限定行数为 1 */
  12.   -webkit-box-orient: vertical;
  13.   overflow: hidden;
  14. }

透明半圆

https://segmentfault.com/q/1010000004597271

http://animista.net/play/entrances/bounce-in

CSS只做一个圆角

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-border-radius.html

CSS三角形

  1. #d1{
  2.     width:0; 
  3.     height:0;
  4.     border-width:50px;
  5.     border-style:solid;
  6.     border-top-left-radius: 15px;
  7.     opacity: 0.569;
  8.     border-color:red transparent transparent red;
  9. }

更多三角形形式： http://www.cnblogs.com/shazhou-blog/p/5168740.html

去除表格的双层边框

  1. table{  
  2.     border-collapse:collapse;
  3.     border-spacing:0;
  4.     margin:0;
  5.     padding:0;
  6.     border:none;
  7.     }

移动端禁止长按复制

  1. * {
  2.   -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  3.   -webkit-user-select: none; /*webkit浏览器*/
  4.   -khtml-user-select: none; /*早期浏览器*/
  5.   -moz-user-select: none; /*火狐*/
  6.   -ms-user-select: none; /*IE10*/
  7.   user-select: none;
  8. }
  10. 在 ios 上，上面的设置会使得 input 框无法输入，所以还需要加下面的属性
  11. input {
  12.   -webkit-user-select: auto; /*webkit浏览器*/
  13. }

ios滑动卡顿的解决：

在需要滑动的盒子的 css 添加以下属性
-webkit-overflow-scrolling: touch;

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     -webkit-box-sizing: border-box;  /* 盒模型的宽高不受 border 和 padding 影响 */
  5.        -moz-box-sizing: border-box;
  6.             box-sizing: border-box;
  7. }
  8. 去除 input 获取焦点时的外边框
  9. .input {
  10.     outline: none;
  11. }
  14. 去除 input type="number" 时右侧的按钮
  15. chrome专用
  16. input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  17.     -webkit-appearance: none !important;
  18.     margin: 0; 
  19. }
  21. 火狐专用
  22. input[type="number"]{
  23.     -moz-appearance:textfield;
  24. }
  27. input 去掉背景色和焦点时的外框
  28.   background-color: transparent;
  29.   outline: none;
  1. 鼠标手:
  2. cursor:
  3.     auto: 正常鼠标
  4.     crosshair: 十字鼠标
  5.     default: 默认鼠标
  6.     pointer: 一只手
  7.     move: 移动鼠标
  8.     e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize: 改变大小鼠标
  9.     text: 文字鼠标
  10.     wait: 等待鼠标
  11.     help: 求助鼠标
  12.     progress: 过程鼠标

字体间距：
letter-spacing

字体边框

  1. text-shadow: 0px 0px 1px #e63642;
  2. color: transparent;
  3. -webkit-text-stroke: 2px #970008;

背景色透明、毛玻璃

  1. .背景色透明 {
  2.         background: rgb(0, 0, 0, 0)  /* 前三个数字是颜色号，最后一位是颜色的透明度 */
  3. }
  4. .毛玻璃 {
  5.         background-color: rgba(0, 0, 0, 0.2);
  6.         /* 最后的一位小数时调节透明度的 1为全黑  0为全透明 */
  8.         -webkit-filter: blur(1px);
  9.         /* 毛边的范围 0px 无毛边 */
  10.         -moz-filter: blur(1px);
  11.         -ms-filter: blur(1px);
  12.         -o-filter: blur(1px);
  13.         filter: blur(1px);
  14. }

只是透明度的设置
opacity:0.5

position--flexd重新确定起点

  1. .flexd 定位重新定向 {  /* flexd 重新以父元素定位 */
  2.     transform: translate(0, 0); 
  3. }

移动端自适应 CSS @media 设置

（目前为止比较好理解的笨方法，以后有好的方案会持续更新）

html {
    font-size: 50px;
}
body {
    font-size: 24px;
}
@media screen and (min-width:320px) {
    html {
        font-size: 21.333333333333332px;
    }
    body {
        font-size: 12px;
    }
}
@media screen and (min-width:360px) {
    html {
        font-size: 24px;
    }
    body {
        font-size: 12px;
    }
}
@media screen and (min-width:375px) {
    html {
        font-size: 25px;
    }
    body {
        font-size: 12px;
    }
}
@media screen and (min-width:384px) {
    html {
        font-size: 25.6px;
    }
    body {
        font-size: 14px;
    }
}
@media screen and (min-width:400px) {
    html {
        font-size: 26.666666666666668px;
    }
    body {
        font-size: 14px;
    }
}
@media screen and (min-width:414px) {
    html {
        font-size: 27.6px;
    }
    body {
        font-size: 14px;
    }
}
@media screen and (min-width:424px) {
    html {
        font-size: 28.266666666666667px;
    }
    body {
        font-size: 14px;
    }
}
@media screen and (min-width:480px) {
    html {
        font-size: 32px;
    }
    body {
        font-size: 15.36px;
    }
}
@media screen and (min-width:540px) {
    html {
        font-size: 36px;
    }
    body {
        font-size: 17.28px;
    }
}
@media screen and (min-width:720px) {
    html {
        font-size: 48px;
    }
    body {
        font-size: 23.04px;
    }
}
@media screen and (min-width:750px) {
    html {
        font-size: 50px;
    }
    body {
        font-size: 24px;
    }
}

关于 flex 弹性布局

可以参考 阮一峰--Flex 布局教程 有详细的图文说明，下面仅摘录文字，方便快速查找。

flex 容器（父元素） 属性

  1.     flex-direction: *属性决定主轴的方向*
  2.             row（默认值）: 主轴为水平方向，起点在左端
  3.             row-reverse: 主轴为水平方向，起点在右端
  4.             column: 主轴为垂直方向，起点在上沿
  5.             column-reverse: 主轴为垂直方向，起点在下沿
  7.     flex-wrap:  *如果一条轴线排不下，如何换行*
  8.             nowrap（默认）: 不换行
  9.             wrap: 换行，第一行在上方
  10.             wrap-reverse: 换行，第一行在下方
  12.     flex-flow:
  13.             flex-flow: 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
  14.             flex-flow: <flex-direction> || <flex-wrap>;
  16.     justify-content: *属性定义了项目在主轴上的对齐方式。*
  17.             flex-start（默认值）: 左对齐
  18.             flex-end: 右对齐
  19.             center: 居中
  20.             space-between: 两端对齐，项目之间的间隔都相等
  21.             space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
  23.     align-items: *属性定义项目在交叉轴上如何对齐。*
  24.             flex-start: 交叉轴的起点对齐
  25.             flex-end: 交叉轴的终点对齐
  26.             center: 交叉轴的中点对齐
  27.             baseline: 项目的第一行文字的基线对齐
  28.             stretch（默认值）: 如果项目未设置高度或设为auto，将占满整个容器的高。
  30.     align-content: *属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*
  31.             flex-start: 与交叉轴的起点对齐
  32.             flex-end: 与交叉轴的终点对齐
  33.             center: 与交叉轴的中点对齐
  34.             space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布
  35.             space-around: 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
  36.             stretch（默认值）: 轴线占满整个交叉轴。

flex 子元素 属性

  1.     order: 数字; 默认为 0 
  2.     *属性定义项目的排列顺序。数值越小，排列越靠前，默认为0*
  4.     flex-grow: 数字; 默认为 0 
  5.     *如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。*
  7.     flex-shrink: 数字; 默认为 1 *属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  8.     *如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。*

隐藏滚动条

  1. .demo::-webkit-scrollbar {
  2.   display: none; /* Chrome Safari */
  3. }
  5. .demo {
  6.   scrollbar-width: none; /* firefox */
  7.   -ms-overflow-style: none; /* IE 10+ */
  8.   overflow-x: hidden;
  9.   overflow-y: auto;
  10. }

4. JavaScript

js 自动复制文本

https://www.cnblogs.com/yunser/p/7628031.html

js 跳转微信

location.href = 'weixin://'

设备判断

  1. var os = function() {
  2.         var ua = navigator.userAgent,
  3.           isWindowsPhone = /(?:Windows Phone)/.test(ua),
  4.           isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
  5.           isAndroid = /(?:Android)/.test(ua),
  6.           isFireFox = /(?:Firefox)/.test(ua),
  7.           isChrome = /(?:Chrome|CriOS)/.test(ua),
  8.           isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
  9.           isPhone = /(?:iPhone)/.test(ua) && !isTablet,
  10.           isPc = !isPhone && !isAndroid && !isSymbian;
  11.         return {
  12.           isTablet: isTablet,
  13.           isPhone: isPhone,
  14.           isAndroid : isAndroid,
  15.           isPc : isPc
  16.         };
  17.       }();

js sort兼容用法

  1. arr.sort((a, b) => {
  2.     let t = b - a
  3.     return t
  4. })

随机数

  1. parseInt(Math.random() * 4)
  3. randomFun(min, max) {
  4.                 const r = max - min
  5.                 return Math.round(Math.random() * r) + min
  6.             }

精准的时间

如果需要更高的精度，可以使用 performance.now() 来替换 Date.now()，这个 API 可以精确到千分之一毫秒。

时间戳变 24 小时制日期

  1. new Date(parseInt(我是时间戳) * 1000).toLocaleString('chinese',{hour12:false})
  1.  new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)  
  1. // 2017-12-25 21:40:00 将标准时间解析为时间戳 此方法兼容 ios 
  2. Date.parse(new Date(d.replace(/-/g, '/')))
  6. 2018-10-17 21:59:01
  7. filterTime(val) {
  8.         const add0 = (m) => {
  9.           return m < 10 ? '0' + m : m;
  10.         };
  11.         var time = new Date(val);
  12.         var y = time.getFullYear();
  13.         var m = time.getMonth() + 1;
  14.         var d = time.getDate();
  15.         var h = time.getHours();
  16.         var mm = time.getMinutes();
  17.         var s = time.getSeconds();
  18.         return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
  19.       },

数组单个元素前后位置改变

  1.  arr[index] = arr.splice((index (" + or - ") 1), 1, arr[index])[0];

解析地址栏编码

const data = decodeURIComponent（rulcode）

HTML布局页面辅助线

@这个是大海聚聚分享出来的，鸣谢！
他的个人网站 大海的个人网站

  1. <script>
  2.   // 默认打开辅助线， “ctrl + m” 开关辅助线
  3.   var xkXian = function () {
  4.     var body = document.querySelector('body');
  5.     var style = '<style id="xm" media="screen">* {outline: 1px red dashed!important;} </style>'
  6.     var i = true;
  7.     body.insertAdjacentHTML('afterbegin', style);
  8.     body.addEventListener('keydown', function (event) {
  9.       if (event.keyCode === 77 && event.ctrlKey) {
  10.         if (i) {
  11.           var styletog = document.querySelector('#xm')
  12.           styletog.remove()
  13.           i= false
  14.         }else {
  15.           i = true
  16.           body.insertAdjacentHTML('afterbegin', style);
  17.         }
  18.       }
  19.     })
  20.   }
  21.   xkXian()
  22. </script>

移动端调试：（可以log，全自动）

https://github.com/wuchangming/spy-debugger

取整
parseInt(Number， 10)
第一个参数为需要去除小数的参数，第二个参数为第一个参数的进制说明，默认为 10 进制。可自行配置 2， 8， 16 等等多种进制。

js 计算特效限制，会出现例如 9.21 * 100 = 921.0000000000001 的情况，所以使用如下公式来计算小数加减乘除

parseFloat((this.userInfo.balance * 100).toFixed(10))

判断机型：

  1. var u = navigator.userAgent, app = navigator.appVersion;
  2. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
  3. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  4. alert('是否是Android：'+isAndroid);
  5. alert('是否是iOS：'+isiOS);

停止setTimeout

t=setTimeout("timedCount()",1000)
clearTimeout(t)

AJAX

跨域：（jQuery）

  1. <script type="text/javascript">  
  2.     $.ajax({  
  3.         url:"http://crossdomain.com/services.php",  
  4.         dataType:'jsonp',  
  5.         data:'data',  
  6.         jsonp:'callback',  
  7.         success:function(result) {  
  8.            log(result) 
  9.         },  
  10.         timeout:3000  
  11.     }) 
  12. </script>

地址转跳

location.href = 我是 link

一键复制文字

此方法兼容性较差，在移动端基本不可用

文字载体必须为 input 标签

input 标签不可编辑属性: readOnly="true" /* 背景不变色 */

disabled="true" /* 此属性不可用于一键复制，因为它禁止了 input获取焦点；背景变色 */

  1. var btn = document.querySelector("button")
  2.         btn.addEventListener( 'click', function () {
  3.             document.getElementById("input").focus();  /* input 框获取焦点 */
  4.             document.getElementById("input").select(); /* 选中 input 框文字 */ 
  5.             document.execCommand('copy'); /* 复制文字进粘贴板 */ 
  6.         })
  7. /* button 和 input 根据实际标签更改; 若考虑用户体验可在复制文字后再加个 blur 事件，清除 input 框的焦点 */

JSON

JSON.parse() 解析 JSON

JSON.stringify() 生成 JSON

字符串和数组处理

string.split('符号') 以符号将字符串划分为数组
array.join('符号') 以符号将数组拼接成字符串

  1. str.split(' ').join('').split('\n').join('') == ''

~~ 运算符

  1. ~~true == 1
  2. ~~false == 0
  3. ~~"" == 0
  4. ~~[] == 0
  5. ~~undefined == 0
  6. ~~!undefined == 1
  7. ~~null == 0
  8. ~~!null == 1

获取页面地址

  1. location.href

5. vue

vue路由按需加载

  2. // /* eslint-disable global-require */
  3. // const homePage = r => require.ensure([], () => r(require('@/components/views/homePage.vue')), 'chunkname1');
  4. // /* eslint-disable global-require */
  5. // const mine = r => require.ensure([], () => r(require('@/components/views/mine.vue')), 'chunkname2');
  6. // /* eslint-disable global-require */
  7. // const search = r => require.ensure([], () => r(require('@/components/views/search.vue')), 'chunkname3');
  8. // /* eslint-disable global-require */
  9. // const player = r => require.ensure([], () => r(require('@/components/views/player.vue')), 'chunkname4');
  10. // /* eslint-disable global-require */
  11. // const channel = r => require.ensure([], () => r(require('@/components/second_stage/channel.vue')), 'chunkname5');
  12. // /* eslint-disable global-require */
  13. // const myVideo = r => require.ensure([], () => r(require('@/components/second_stage/my_video.vue')), 'chunkname6');
  14. // /* eslint-disable global-require */
  15. // const videoInfo = r => require.ensure([], () => r(require('@/components/second_stage/video_info.vue')), 'chunkname7');
  16. // /* eslint-disable global-require */
  17. // const test = r => require.ensure([], () => r(require('@/test/test.vue')), 'chunkname8');

vue--事件

在组件上使用事件时需要在事件后添加 .native 修饰符
eg：
@scroll.native="test"

vue 事件--修饰符

.stop
.prevent
.stop.prevent
.capture
.self

  1. <!-- 阻止单击事件冒泡 -->
  2. <a v-on:click.stop="doThis"></a>
  4. <!-- 提交事件不再重载页面 -->
  5. <form v-on:submit.prevent="onSubmit"></form>
  7. <!-- 修饰符可以串联 -->
  8. <a v-on:click.stop.prevent="doThat"></a>
  10. <!-- 只有修饰符 -->
  11. <form v-on:submit.prevent></form>
  13. <!-- 添加事件侦听器时使用事件捕获模式 -->
  14. <div v-on:click.capture="doThis">...</div>
  16. <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
  17. <div v-on:click.self="doThat">...</div>

vue-cli

缩小打包体积

需求： 去除打包文件的 js 中的 map 文件
配置文件路径：./build/webpack.prod.conf.js

  1. 原配置：  devtool: config.build.productionSourceMap ? '#source-map' : false,
  2. 现配置：  devtool: false,

watch 监听数据变化

  1. watch: {
  2.     'modalAjaxData.i_diamond': {
  3.         handler: function(val,oldVal) {
  4.         console.log(val, oldVal)
  5.         }
  6.     },
  7.     deep:true
  8.     // 深度复制，此处如果直接监听对象为 obj 内部的数据，那么可以不要 deep:true ，此处有坑，还需总结。
  9.     // handler 目前知道的是，这个是专有回调，不可用其他函数
  10. },

此处需要知道 npm 命令行的基本方法

  1. 1.安装: npm install -g vue-cli
  2. 2.查看版本: vue -V   (大写 V)
  3. 3.生成项目: vue init webpack *项目名称*
  4. 4.执行生成命令后需要填写项目基本信息和选择项目配置
  5. 5.下载项目依赖: npm install  （在项目文件夹路径内执行，若 npm 下载太慢可转换 cnpm）
  6. 6.热加载项目，实时显示更新: npm run dev （此处只是更新在内存之中，没有生成最终的打包文件）
  7. 7.打包文件: npm run build

vue-cli 打包后引入文件路径错误的修复方法

项目/config/index.js
module.exports = {
build: {
assetsPublicPath: './'
}
}

vuex

6. TypeScript

vue 配置 typescript

typescript 在 vue-cli中的配置

1、添加 tsconfig.json 配置文件 内容：

  1. {
  2.   "compilerOptions": {
  3.     "strict": true,
  4.     "module": "es2015",
  5.     "moduleResolution": "node",
  6.     "target": "es5",
  7.     "allowSyntheticDefaultImports": true,
  8.     "lib": [
  9.       "es2017",
  10.       "dom"
  11.     ]
  12.   }
  13. }

2、添加 typescript 和 ts-loader
npm install typescript ts-loader --save-dev

3、修改目录下bulid/webpack.base.conf.js文件，在文件内module>rules添加以下规则

  1. {
  2.   test: /\.tsx?$/,
  3.   loader: 'ts-loader',
  4.   exclude: /node_modules/,
  5.   options: {
  6.     appendTsSuffixTo: [/\.vue$/],
  7.   }
  8. },

4、script 标签添加 lang="ts"

  1. <script lang="ts"></script>

7. webpack

8. nodejs

node 命令行

在命令行退出 node 的命令行为: Ctrl + D 或者 Ctrl + C 两次

npm

  1. npm 若在下载模块失败的时候，需要清理缓存，命令行为: npm cache clean
  2. 更新 npm 的命令行为: npm install -g npm 
  3. 有时候 npm 不好使，就用 cnpm 以下是全局安装 cnpm 的命令行: npm install -g cnpm --registry=https://registry.npm.taobao.org
  4. 全局安装模块: npm install -g 模块名称
  5. 将模块安装在局部环境: 首先在命令行将地址定位到具体的文件夹，再执行命令: npm install -dev--save 模块名称
  6. 模块更新: npm update 模块名称
  8. nrm npm镜像管理工具
  9. nrm use npm 、 nrm use cnpm 切换镜像
  10. nrm test npm 测试下载速度
  11. nrm ls 查看现有镜像
  13. https://www.npmjs.com/package/nrm

node 课堂笔记

f1

网址组成:（共四部分）
协议: http、https（加密后的 http 协议）。
主机: zhihu.com、baidu.com 等等网址。
端口: 一个二进制 16 位的数字，所以 10 进制的范围为 0 ~ 65535 ；http 协议默认的是 80。 一般浏览器会隐藏端口，不显示出来，所以一般看不到，也不用填写。
路径: 例如:“https://www.zhihu.com/question/59039141/answer/162660877”
这个网址在 “https://www.zhihu.com/” 之后的 “question/59039141/answer/162660877” 就是路径，相当于服务器内文件的地址。

额外说明:
服务器端口（port）一般 1024 ~ 65535 之间的数字， 1024 以下要管理员权限才能使用

f2

f3

f4

9. 命令行

生成本地 ssl 证书

Openssl windows 安装下载地址 请下载 1.0.2 版本
1、安装在D盘，好配合后面的命令使用，不用修改太多
2、在解压后的目录, 即openssl.exe所在目录（bin文件夹）新建配置文件，名为openssl-1.0.2a.cnf，内容在后面
3、配置文件创建好之后在 bin 目录下用命令行执行以下命令

  1. mkdir keys
  2. copy /Y nul keys\index.txt
  3. echo 01 >keys\serial
  4. SET HOME=.
  5. SET KEY_DIR=keys

4、生成ca证书,这一步生成了2个文件：ca.key为CA的私钥文件，ca.crt为CA的证书文件，这两个文件后面的证书签名做准备

  1. openssl req -days 3650 -nodes -new -x509 -keyout keys\ca.key -out keys\ca.crt -config openssl-1.0.2a.cnf

5、生成服务端证书

生成服务器证书请求文件和服务器私钥

  1. openssl req -days 3650 -nodes -new -keyout keys\server.key -out keys\server.csr -config openssl-1.0.2a.cnf

CA签名

  1. openssl ca -days 3650 -out keys\server.crt -in keys\server.csr -extensions server -config openssl-1.0.2a.cnf

清除.old文件防止将来创建文件出现错误

  1. del /q keys\*.old

6、生成客户端证书

生成客户端证书请求文件和客户端私钥

  1. openssl req -days 3650 -nodes -new -keyout keys\client.key -out keys\client.csr -config 
  2. openssl-1.0.2a.cnf

CA签名

  1. openssl ca -days 3650 -out keys\client.crt -in keys\client.csr -config openssl-1.0.2a.cnf

清除.old文件防止将来创建文件出现错误

  1. del /q keys\*.old

生成的证书文件都在keys文件夹中

配置文件
openssl-1.0.2a.cnf

  1. # For use with easy-rsa version 2.0 and OpenSSL 1.0.0*
  3. # This definition stops the following lines choking if HOME isn't
  4. # defined.
  5. HOME            = .
  6. RANDFILE        = $ENV::HOME/.rnd
  7. openssl_conf        = openssl_init
  9. [ openssl_init ]
  10. # Extra OBJECT IDENTIFIER info:
  11. #oid_file        = $ENV::HOME/.oid
  12. oid_section        = new_oids
  13. engines            = engine_section
  15. # To use this configuration file with the "-extfile" option of the
  16. # "openssl x509" utility, name here the section containing the
  17. # X.509v3 extensions to use:
  18. # extensions        =
  19. # (Alternatively, use a configuration file that has only
  20. # X.509v3 extensions in its main [= default] section.)
  22. [ new_oids ]
  24. # We can add new OIDs in here for use by 'ca' and 'req'.
  25. # Add a simple OID like this:
  26. # testoid1=1.2.3.4
  27. # Or use config file substitution like this:
  28. # testoid2=${testoid1}.5.6
  30. ####################################################################
  31. [ ca ]
  32. default_ca    = CA_default        # The default ca section
  34. ####################################################################
  35. [ CA_default ]
  37. dir        = $ENV::KEY_DIR        # Where everything is kept
  38. certs        = $dir            # Where the issued certs are kept
  39. crl_dir        = $dir            # Where the issued crl are kept
  40. database    = $dir/index.txt    # database index file.
  41. new_certs_dir    = $dir            # default place for new certs.
  43. certificate    = $dir/ca.crt         # The CA certificate
  44. serial        = $dir/serial         # The current serial number
  45. crl        = $dir/crl.pem         # The current CRL
  46. private_key    = $dir/ca.key        # The private key
  47. RANDFILE    = $dir/.rand        # private random number file
  49. x509_extensions    = usr_cert        # The extentions to add to the cert
  51. # Extensions to add to a CRL. Note: Netscape communicator chokes on V2 CRLs
  52. # so this is commented out by default to leave a V1 CRL.
  53. # crl_extensions    = crl_ext
  55. default_days    = 3650            # how long to certify for
  56. default_crl_days= 30            # how long before next CRL
  57. default_md    = md5            # use public key default MD
  58. preserve    = no            # keep passed DN ordering
  60. # A few difference way of specifying how similar the request should look
  61. # For type CA, the listed attributes must be the same, and the optional
  62. # and supplied fields are just that :-)
  63. policy        = policy_anything
  65. # For the CA policy
  66. [ policy_match ]
  67. countryName        = match
  68. stateOrProvinceName    = match
  69. organizationName    = match
  70. organizationalUnitName    = optional
  71. commonName        = supplied
  72. name            = optional
  73. emailAddress        = optional
  75. # For the 'anything' policy
  76. # At this point in time, you must list all acceptable 'object'
  77. # types.
  78. [ policy_anything ]
  79. countryName        = optional
  80. stateOrProvinceName    = optional
  81. localityName        = optional
  82. organizationName    = optional
  83. organizationalUnitName    = optional
  84. commonName        = supplied
  85. name            = optional
  86. emailAddress        = optional
  88. ####################################################################
  89. [ req ]
  90. default_bits        = 1024
  91. default_keyfile     = privkey.pem
  92. distinguished_name    = req_distinguished_name
  93. attributes        = req_attributes
  94. x509_extensions    = v3_ca    # The extentions to add to the self signed cert
  96. # Passwords for private keys if not present they will be prompted for
  97. # input_password = secret
  98. # output_password = secret
  100. # This sets a mask for permitted string types. There are several options.
  101. # default: PrintableString, T61String, BMPString.
  102. # pkix     : PrintableString, BMPString (PKIX recommendation after 2004).
  103. # utf8only: only UTF8Strings (PKIX recommendation after 2004).
  104. # nombstr : PrintableString, T61String (no BMPStrings or UTF8Strings).
  105. # MASK:XXXX a literal mask value.
  106. string_mask = nombstr
  108. # req_extensions = v3_req # The extensions to add to a certificate request
  110. [ req_distinguished_name ]
  111. countryName            = Country Name (2 letter code)
  112. countryName_default        = CN
  113. countryName_min            = 2
  114. countryName_max            = 2
  116. stateOrProvinceName        = State or Province Name (full name)
  117. stateOrProvinceName_default    = LiaoNing
  119. localityName            = Locality Name (eg, city)
  120. localityName_default        = DaLian
  122. 0.organizationName        = Organization Name (eg, company)
  123. 0.organizationName_default    = KEY_ORG
  125. # we can do this but it is not needed normally :-)
  126. #1.organizationName        = Second Organization Name (eg, company)
  127. #1.organizationName_default    = World Wide Web Pty Ltd
  129. organizationalUnitName        = Organizational Unit Name (eg, section)
  130. #organizationalUnitName_default    =
  132. commonName            = Common Name (eg, your name or your server\'s hostname)
  133. commonName_max            = 64
  135. name                = Name
  136. name_max            = 64
  138. emailAddress            = Email Address
  139. emailAddress_default        = mail@host.domain
  140. emailAddress_max        = 40
  142. # JY -- added for batch mode
  143. organizationalUnitName_default = KEY_OU
  144. commonName_default = KEY_CN
  145. name_default = KEY_NAME
  148. # SET-ex3            = SET extension number 3
  150. [ req_attributes ]
  151. challengePassword        = A challenge password
  152. challengePassword_min        = 4
  153. challengePassword_max        = 20
  155. unstructuredName        = An optional company name
  157. [ usr_cert ]
  159. # These extensions are added when 'ca' signs a request.
  161. # This goes against PKIX guidelines but some CAs do it and some software
  162. # requires this to avoid interpreting an end user certificate as a CA.
  164. basicConstraints=CA:FALSE
  166. # Here are some examples of the usage of nsCertType. If it is omitted
  167. # the certificate can be used for anything *except* object signing.
  169. # This is OK for an SSL server.
  170. # nsCertType            = server
  172. # For an object signing certificate this would be used.
  173. # nsCertType = objsign
  175. # For normal client use this is typical
  176. # nsCertType = client, email
  178. # and for everything including object signing:
  179. # nsCertType = client, email, objsign
  181. # This is typical in keyUsage for a client certificate.
  182. # keyUsage = nonRepudiation, digitalSignature, keyEncipherment
  184. # This will be displayed in Netscape's comment listbox.
  185. nsComment            = "Easy-RSA Generated Certificate"
  187. # PKIX recommendations harmless if included in all certificates.
  188. subjectKeyIdentifier=hash
  189. authorityKeyIdentifier=keyid,issuer:always
  190. extendedKeyUsage=clientAuth
  191. keyUsage = digitalSignature
  194. # This stuff is for subjectAltName and issuerAltname.
  195. # Import the email address.
  196. # subjectAltName=email:copy
  198. # Copy subject details
  199. # issuerAltName=issuer:copy
  201. #nsCaRevocationUrl        = http://www.domain.dom/ca-crl.pem
  202. #nsBaseUrl
  203. #nsRevocationUrl
  204. #nsRenewalUrl
  205. #nsCaPolicyUrl
  206. #nsSslServerName
  208. [ server ]
  210. # JY ADDED -- Make a cert with nsCertType set to "server"
  211. basicConstraints=CA:FALSE
  212. nsCertType                     = server
  213. nsComment                      = "Easy-RSA Generated Server Certificate"
  214. subjectKeyIdentifier=hash
  215. authorityKeyIdentifier=keyid,issuer:always
  216. extendedKeyUsage=serverAuth
  217. keyUsage = digitalSignature, keyEncipherment
  219. [ v3_req ]
  221. # Extensions to add to a certificate request
  223. basicConstraints = CA:FALSE
  224. keyUsage = nonRepudiation, digitalSignature, keyEncipherment
  226. [ v3_ca ]
  229. # Extensions for a typical CA
  232. # PKIX recommendation.
  234. subjectKeyIdentifier=hash
  236. authorityKeyIdentifier=keyid:always,issuer:always
  238. # This is what PKIX recommends but some broken software chokes on critical
  239. # extensions.
  240. #basicConstraints = critical,CA:true
  241. # So we do this instead.
  242. basicConstraints = CA:true
  244. # Key usage: this is typical for a CA certificate. However since it will
  245. # prevent it being used as an test self-signed certificate it is best
  246. # left out by default.
  247. # keyUsage = cRLSign, keyCertSign
  249. # Some might want this also
  250. # nsCertType = sslCA, emailCA
  252. # Include email address in subject alt name: another PKIX recommendation
  253. # subjectAltName=email:copy
  254. # Copy issuer details
  255. # issuerAltName=issuer:copy
  257. # DER hex encoding of an extension: beware experts only!
  258. # obj=DER:02:03
  259. # Where 'obj' is a standard or added object
  260. # You can even override a supported extension:
  261. # basicConstraints= critical, DER:30:03:01:01:FF
  263. [ crl_ext ]
  265. # CRL extensions.
  266. # Only issuerAltName and authorityKeyIdentifier make any sense in a CRL.
  268. # issuerAltName=issuer:copy
  269. authorityKeyIdentifier=keyid:always,issuer:always
  271. [ engine_section ]
  272. #
  273. # If you are using PKCS#11
  274. # Install engine_pkcs11 of opensc (www.opensc.org)
  275. # And uncomment the following
  276. # verify that dynamic_path points to the correct location
  277. #
  278. #pkcs11 = pkcs11_section
  280. [ pkcs11_section ]
  281. engine_id = pkcs11
  282. dynamic_path = /usr/lib/engines/engine_pkcs11.so
  283. MODULE_PATH = changeme
  284. PIN = 1234
  285. init = 0

关于服务器

重置服务器后，本地需要执行以下命令清除缓存

才能重新连接服务器

  1. rm -rf ~/.ssh/known_hosts

服务器查看公网ip

  1. curl ifconfig.me

Windows

查看文件夹内容:

dir /* 普通查看 */

dir /p /* 分页查看 */

ping 网址 /* eg: ping zhihu.com 查看网址对应 ip */

ipconfig/all 查看本机域名可以只输入ipconfig

Mac

chrome 设置 F5 刷新

系统偏好设置->键盘->快捷键->应用快捷键->点击+号->弹出窗口，应用程序：选择谷歌应用，菜单标题重新加载此页(重点一定要和google app快捷键的标题一样)，快捷键：F5。

Linux

解压文件:
xz 格式文件: xz -d 文件名.tar.xz
tar 格式文件: tar -xf 文件名.tar

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注