问题总结21-04-19至21-05-28

⭐在Vue中引入静态JSON文件打包后文件更新

使用JS文件代替JSON文件存储数据

1 Vue.prototype.$dict = window.dict;
2 console.log(Vue.prototype.$dict.API_URL);

⭐PWA渐进式Web应用

https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps

⭐Vue+ts搭建项目

https://blog.csdn.net/cc6_66/article/details/110556620

⭐VSCode格式化vue文件时单引号变成双引号，自动加分号问题

需要在根目录下创建.prettierrc.json文件

1 {
2   "singleQuote": true,
3   "semi": false
4 }

⭐Vue使用ts

https://www.cnblogs.com/yf-html/p/13723268.html

⭐background-image背景图片自适应宽高

1 div {
2     background-image: url('路径'); 
3     background-repeat:no-repeat;
4     background-size:100% 100%;
5     -moz-background-size:100% 100%;
6 }

⭐Vue使用ts报错：Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'

https://blog.csdn.net/qq_35257117/article/details/91362483

⭐Win10重装系统提示：在efi系统上windows只能安装到gpt磁盘

https://blog.csdn.net/peng_1993/article/details/91489594

⭐Vue路由带参数跳转

https://www.jb51.net/article/160401.htm

⭐Vue路由导航守卫

https://www.cnblogs.com/shenjianping/p/11458261.html

⭐vue中el-card click事件失效

@click.native="useclick(‘111’)

⭐TSLint : variable name must be in camelcase or uppercase

修改tslint.json文件，找到rules下面的variable-name数组，增加：allow-leading-underscore ，来解决此问题。

 1 // tslint.json contents
 2 {
 3   // ...
 4   "rules": {
 5     // ...
 6     "variable-name": [
 7       true,
 8       // ...
 9       "allow-leading-underscore"
10     ]
11   },
12   // ...
13 }

⭐JS原生弹框：window.confirm

⭐Vue+element封装axios

https://www.cnblogs.com/nogodie/p/9853660.html

⭐Vue子组件调用父组件方法

https://www.cnblogs.com/jin-zhe/p/9523782.html

⭐HTML手机端自适应字体大小

https://www.cnblogs.com/wangjae/p/6814349.html

⭐静态HTML文件在手机端预览

1 npm i -g anywhere
2 anywhere -p8080

⭐手机端微软雅黑字体失效，需要下载微软雅黑.ttf文件

 1 <style>
 2 
 3 @font-face {
 4     font-family: 'STXingkai1';
 5 
 6     src: url('/asserts/my/STXingkai.ttf') /* Safari, Android, iOS */
 7 
 8    }
 9 
10 </style>
11 
12  <p style="font-family:STXingkai1,华文行楷;font-size:150%">尊敬的whale女士，字体设置成果</p>

⭐JS鼠标滚轮事件

 1 <body style="height:2000px">
 2   <script type="text/javascript">
 3    var scrollFunc = function (e) {  
 4         e = e || window.event;  
 5         if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
 6             if (e.wheelDelta > 0) { //当滑轮向上滚动时  
 7                alert('上滚')
 8             }  
 9             if (e.wheelDelta < 0) { //当滑轮向下滚动时  
10                  alert('下滚')
11             }  
12         } else if (e.detail) {  //Firefox滑轮事件  
13             if (e.detail> 0) { //当滑轮向下滚动时  
14                alert('下滚')
15             }  
16             if (e.detail< 0) { //当滑轮向上滚动时  
17                 alert('上滚')  
18             }  
19         }  
20     } 
21     /*IE、Opera注册事件*/
22     if(document.attachEvent){
23         document.attachEvent('onmousewheel',scrollFunc);
24  
25     }
26     //Firefox使用addEventListener添加滚轮事件  
27     if (document.addEventListener) {//firefox  
28         document.addEventListener('DOMMouseScroll', scrollFunc, false);  
29     }  
30     //Safari与Chrome属于同一类型
31     window.onmousewheel = document.onmousewheel = scrollFunc; 
32      /*
33     event.wheelDelta 滚动方向
34     上：120
35     下：-120
36     Firefox：event.detail 滚动方向
37     上：-3
38     下:3
39     */ 
40   </script>
41 </body>

⭐video在IOS微信上无法自动播放

https://www.cnblogs.com/qiufang/p/13231087.html

⭐table布局

1 <table border="2" cellpadding=“10” cellspacing="0">
2 　　<caption>表格标题</caption>
3 　　<tr>
4 　　　　<td align="center"></td>
5 　　</tr>
6 </table>

⭐防抖和节流

防抖：事件发生后的一段时间内没有再发生就执行。

节流：事件一段时间内只能执行一次。

https://www.cnblogs.com/momo798/p/9177767.html