-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
1426 lines (920 loc) · 163 KB
/
index.html
File metadata and controls
1426 lines (920 loc) · 163 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="dns-prefetch" href="http://ithack.github.io">
<title>不羁放纵爱自由的猿人</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="web前端,前端工程师,前端程序猿">
<meta property="og:type" content="website">
<meta property="og:title" content="不羁放纵爱自由的猿人">
<meta property="og:url" content="http://ithack.github.io/index.html">
<meta property="og:site_name" content="不羁放纵爱自由的猿人">
<meta property="og:description" content="web前端,前端工程师,前端程序猿">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="不羁放纵爱自由的猿人">
<meta name="twitter:description" content="web前端,前端工程师,前端程序猿">
<link rel="alternative" href="/atom.xml" title="不羁放纵爱自由的猿人" type="application/atom+xml">
<link rel="icon" href="/images/个人信息/favicon.ico">
<link rel="stylesheet" type="text/css" href="/./main.507b3a.css">
<style type="text/css">
#container.show {
background: linear-gradient(200deg,#a0cfe4,#e8c37e);
}
</style>
<!-- Google Analytics -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id='UA-39380047-2'"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-39380047-2');
</script>
<!-- End Google Analytics -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?8248472abbd10ca64193a9f108619374";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div id="container" q-class="show:isCtnShow">
<canvas id="anm-canvas" class="anm-canvas"></canvas>
<div class="left-col" q-class="show:isShow">
<div class="overlay" style="background: #4d4d4d"></div>
<div class="intrude-less">
<header id="header" class="inner">
<a href="false" class="profilepic">
<img src="/images/个人信息/my_proto.jpg" class="js-avatar">
</a>
<hgroup>
<h1 class="header-author"><a href="false">kevin,杨凯</a></h1>
</hgroup>
<nav class="header-menu">
<ul>
<li><a href="/">主页</a></li>
<li><a href="/archives">所有文章</a></li>
<li><a href="/tag/随笔/">随笔</a></li>
<li><a href="/about">关于我</a></li>
</ul>
</nav>
<nav class="header-smart-menu">
<a q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
<a q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
</nav>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://ithack.github.io" title="github"><i class="icon-github"></i></a>
<a class="weibo" target="_blank" href="http://weibo.com/271855993?is_all=1" title="weibo"><i class="icon-weibo"></i></a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/yy-yy-98" title="zhihu"><i class="icon-zhihu"></i></a>
<a class="weixin" target="_blank" href="/images/ipay/my-wx.jpg" title="weixin"><i class="icon-weixin"></i></a>
<a class="twitter" target="_blank" href="https://twitter.com/bragonro" title="twitter"><i class="icon-twitter"></i></a>
</div>
</nav>
</header>
</div>
</div>
<div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
<nav id="mobile-nav">
<div class="overlay js-overlay" style="background: #4d4d4d"></div>
<div class="btnctn js-mobile-btnctn">
<div class="slider-trigger list" q-on="click: openSlider(e)"><i class="icon icon-sort"></i></div>
</div>
<div class="intrude-less">
<header id="header" class="inner">
<div class="profilepic">
<img src="/images/个人信息/my_proto.jpg" class="js-avatar">
</div>
<hgroup>
<h1 class="header-author js-header-author">kevin,杨凯</h1>
</hgroup>
<nav class="header-nav">
<div class="social">
<a class="github" target="_blank" href="https://ithack.github.io" title="github"><i class="icon-github"></i></a>
<a class="weibo" target="_blank" href="http://weibo.com/271855993?is_all=1" title="weibo"><i class="icon-weibo"></i></a>
<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/yy-yy-98" title="zhihu"><i class="icon-zhihu"></i></a>
<a class="weixin" target="_blank" href="/images/ipay/my-wx.jpg" title="weixin"><i class="icon-weixin"></i></a>
<a class="twitter" target="_blank" href="https://twitter.com/bragonro" title="twitter"><i class="icon-twitter"></i></a>
</div>
</nav>
<nav class="header-menu js-header-menu">
<ul style="width: 70%">
<li style="width: 25%"><a href="/">主页</a></li>
<li style="width: 25%"><a href="/archives">所有文章</a></li>
<li style="width: 25%"><a href="/tag/随笔/">随笔</a></li>
<li style="width: 25%"><a href="/about">关于我</a></li>
</ul>
</nav>
</header>
</div>
<div class="mobile-mask" style="display:none" q-show="isShow"></div>
</nav>
<div id="wrapper" class="body-wrap">
<div class="menu-l">
<div class="canvas-wrap">
<canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
</div>
<div id="js-content" class="content-ll">
<article id="post-2019年度总结" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/12/15/2019年度总结.html">2019年度总结</a>
</h1>
<a href="/2019/12/15/2019年度总结.html" class="archive-article-date">
<time datetime="2019-12-15T10:13:38.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-12-15</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<div align="center"><img src="/images/2019/img007.jpg"> </div>
<p>时间过的很快，不知不觉已经到了9102的最后一个月份；仔细回想这一年好快，如果分阶段的回想，每一个周都觉得周末到来的慢，每月都惦记下月的节假日，感觉很慢；回过来一想这一年好快，跟掉头发的速度成了正比</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">随笔</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/12/15/2019年度总结.html">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-vue3.x配置优化DllPlugin 和 DllReferencePlugin" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/08/14/vue3.x配置优化DllPlugin 和 DllReferencePlugin.html">vue3配置优化DllPlugin 和 DllReferencePlugin</a>
</h1>
<a href="/2019/08/14/vue3.x配置优化DllPlugin 和 DllReferencePlugin.html" class="archive-article-date">
<time datetime="2019-08-14T02:03:40.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-08-14</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h4 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h4><p>目前在做的项目是我从0到1一手搭建起来的，所以比较在整体结构和对架构的优化上思考并实践了很多，每一次的开发需求都先用一部分时间思考项目的打包和搭建怎么样才能更加方便通用化，今天就记录一下在越来愈多的需求和组件写完后怎么才能提高webpack的build速度，可能百度会有很多方案，今天我就来针对当前vue-cli3.x搭建的项目dll文件抽离配置</p>
<h4 id="什么是DllPlugin-和-DllReferencePlugin"><a href="#什么是DllPlugin-和-DllReferencePlugin" class="headerlink" title="什么是DllPlugin 和 DllReferencePlugin"></a><strong>什么是DllPlugin 和 DllReferencePlugin</strong></h4><p>在使用webpack进行打包时候，对于依赖的第三方库，比如vue，vuex等这些不会修改的依赖，我们可以让它和我们自己编写的代码分开打包，这样做的好处是每次更改我本地代码的文件的时候，webpack只需要打包我项目本身的文件代码，而不会再去编译第三方库，那么第三方库在第一次打包的时候只打包一次，以后只要我们不升级第三方包的时候，那么webpack就不会对这些库去打包，这样的可以快速的提高打包的速度。因此为了解决这个问题，DllPlugin 和 DllReferencePlugin插件就产生了。</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">vue</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color2">vue3.x</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">webpack</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">DllPlugin</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/08/14/vue3.x配置优化DllPlugin 和 DllReferencePlugin.html">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-npm-install安装本地or私有git源包" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/06/28/npm-install安装本地or私有git源包.html">npm install安装本地/私有git源包</a>
</h1>
<a href="/2019/06/28/npm-install安装本地or私有git源包.html" class="archive-article-date">
<time datetime="2019-06-28T06:03:40.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-06-28</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h4 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h4><p> 之所以是总结关于npm install的问题，是因为之前在组织组内的一次分享会上我问了小伙伴们一个问题；当时有一个M移动端项目，用到了公司的私有源上的分享插件，而每个人在执行npm install的时候默认淘宝或npm源中下载，所以导致我们自己的私有源要单独用nrm切换到私有源再次npm install一次；当然我们的私有源也很强大基本上的npm源上的包都有，我们可以直接切换到公司镜像源然后npm install一下，这样私有源和npm源的包都能安装，但在极端情况万一npm源某些个别包，公司的源上没有同步上来呢？这种情况我们是不是来回切换？还有之前和后端JAVA合作，JAVA有一个种dubbo接口，这种接口就是输出git包的形式，这种情况我们不能吧dubbo接口的包文件放到公司源里去；</p>
<p> 其实在package里是支持输入本地包或git 源包的，so 接下来我来梳理总结一下npm install 依赖包安装！</p>
<h4 id="package定义"><a href="#package定义" class="headerlink" title="package定义"></a>package定义</h4><p>我们都知道要手动安装一个包时，执行 <code>npm install <package></code> 命令即可。这里的第三个参数 package 通常就是我们所要安装的包名，默认配置下 npm 会从默认的源 (Registry) 中查找该包名对应的包地址，并下载安装。但在 npm 的世界里，除了简单的指定包名, package 还可以是一个指向有效包名的 http url/git url/文件夹路径。</p>
<p>阅读 <a href="https://docs.npmjs.com/about-packages-and-modules" target="_blank" rel="noopener">npm的文档</a>， 我们会发现package 准确的定义，只要符合以下其中之一条件，就是一个 package:</p>
<table>
<thead>
<tr>
<th><strong>说明</strong></th>
<th><strong>例子</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>一个包含了程序和描述该程序的 package.json 文件 的 <strong>文件夹</strong></td>
<td>./local-module/</td>
</tr>
<tr>
<td>一个包含了 (a) 的 <strong>gzip 压缩文件</strong></td>
<td>./module.tar.gz</td>
</tr>
<tr>
<td>一个可以下载得到 (b) 资源的 <strong>url</strong> (通常是 http(s) url)</td>
<td><a href="https://registry.npmjs.org/webpack/-/webpack-3.0.0.tgz" target="_blank" rel="noopener">https://registry.npmjs.org/webpack/-/webpack-3.0.0.tgz</a></td>
</tr>
<tr>
<td>一个格式为 <code><name>@<version></code> 的字符串，可指向 npm 源(通常是官方源 npmjs.org)上已发布的可访问 url，且该 url 满足条件 (c)</td>
<td><a href="mailto:webpack@3.0.0" target="_blank" rel="noopener">webpack@3.0.0</a></td>
</tr>
<tr>
<td>一个格式为 <code><name>@<tag></code> 的字符串，在 npm 源上该<code><tag></code>指向某 <code><version></code> 得到 <code><name>@<version></code>，后者满足条件 (d)</td>
<td>webpack@latest</td>
</tr>
<tr>
<td>一个格式为 <code><name></code> 的字符串，默认添加 <code>latest</code> 标签所得到的 <code><name>@latest</code> 满足条件 (e)</td>
<td>webpack</td>
</tr>
<tr>
<td>一个 <strong>git url</strong>, 该 url 所指向的代码库满足条件 (a)</td>
<td><a href="mailto:git@github.com" target="_blank" rel="noopener">git@github.com</a>:webpack/webpack.git</td>
</tr>
</tbody>
</table>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">npm</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">package</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/06/28/npm-install安装本地or私有git源包.html">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-vue项目如何刷新当前页面-经验总结" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/06/13/vue项目如何刷新当前页面-经验总结.html">vue项目如何刷新当前页面-经验总结</a>
</h1>
<a href="/2019/06/13/vue项目如何刷新当前页面-经验总结.html" class="archive-article-date">
<time datetime="2019-06-13T02:35:54.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-06-13</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>很久没有更新了，今天这个题目更多的可能是一点灵感，在最近项目中有一个刷新当前页面需求，但通过思考也并不是刷新当前页面，这样做固然简单，但对于用户体验并不是很完美，其实只需要刷新当前路由组件，而页面中整体框架不需要重新渲染，所以就考虑有没有办法只重新加载某一个组件，这样用户只会看到数据或某一块的刷新，有点像ajax的方式进行局部刷新，会提高一下用户体验；</p>
<h3 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h3><p>vue项目刷新当前页面，可能这已经不是个问题，目前大家知道的有应该最少有两种解决方案：</p>
<figure class="highlight gcode"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">localhost.reload<span class="comment">()</span> </span><br><span class="line"></span><br><span class="line">或</span><br><span class="line"></span><br><span class="line">this.$router.go<span class="comment">(0)</span></span><br></pre></td></tr></table></figure>
<p>如上是在遇到刷新时最直接能想到的方法，但是这个方法有个弊端就是刷新页面会导致空白页面的出现，这样的用户体验很不好；<br><img src="/images/2019/59399155-93d82300-8dc5-11e9-94ab-a23a5e0c8b3e.png" alt="image"></p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">vue</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/06/13/vue项目如何刷新当前页面-经验总结.html">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-再谈vue3x和elementUI实操记录" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/04/19/再谈vue3x和elementUI实操记录.html">再谈vue3x和elementUI实操记录</a>
</h1>
<a href="/2019/04/19/再谈vue3x和elementUI实操记录.html" class="archive-article-date">
<time datetime="2019-04-19T07:11:22.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-04-19</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p> 不得不说最近很忙，996，996ICU非常火爆（当然我说的忙也是忙搬砖），然而我大JD也几乎每天都上头条，站在风口浪尖被吐槽！这里我就不说啥了，每个公司其实都不好过，就好像每个程序员都不好过一样；对于996我一直以来都觉得如果非要按时间来要求员工来工作的话那真没什么意义，有意义的事情就算公司不要求你996我想你也会去加班加点搞还毫无怨言；但如果你根本没那么多事情可做，但单位要求你996那不但对个人是损失，对公司来说也完全是坏处多益处基本没有的！就好像现在有些大公司强制996，有些部门有事情做单没到需要996来搞，那么员工不就是纯属在公司耗时间吗？而且每个人都对公司报有怨言，这种强制性不考虑现实的制度完全是懒人想出来政治套路，治标不治本（甚至连标都治不了）！</p>
<p> 以上言论只是作者本人一点小小的看法，欢迎吐槽！</p>
<p>下面进入正题，最近我做的事情完全不需要996这种制度来强制我，我接到项目时的想法是：007都不一定能保证完成任务！大概场景如下：</p>
<p> 一个后台系统从无到有开始做，更恶心的事有一些表单是完全后端下发前端要做渲染和填写的校验，当我听到这里时我内心还是平静的，单之后的一句话我就炸了，一个半月搞完！NM一个完全没有的系统到上线一个半月，后端+前端+数据录入完全让人死的节奏，倒排期的感觉；更恶心的事这个系统一共拆了六个需求，我们刚看到第一个需求就已经告诉我们这个系统要一个半月以后要，这NM是我第N次在此公司遇到这种事了，业务方就是天，业务方每一句话基本都能搞死搬砖的（真实感受）</p>
<p>说这这么多，明显感觉最近不止不景气，还没时间吐槽，篇幅自己都觉得长了；好了现在说说这个系统进入正文！</p>
<h3 id="VUE3框架配置搭建"><a href="#VUE3框架配置搭建" class="headerlink" title="VUE3框架配置搭建"></a>VUE3框架配置搭建</h3><p> 一开始我想着用React搭建，但是和考虑到其他人使用习惯和项目紧迫性问题，我还是选择了VUE；因为大家用vue比react熟练项目这么紧最后确定用vue3+elementUI搭建，这还是我从2.0之后第一次用3.0搭建vue，当然这次搭建不是单纯的copy方式搭建，这样对我来说就毫无意义了，搭建之前我考虑了一下多人开发场景，加入了如下插件：</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">vue</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color5">elementUI</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">封装</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/04/19/再谈vue3x和elementUI实操记录.html">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-Eslint安装与配置详解" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/04/19/Eslint安装与配置详解.html">Eslint安装与配置详解</a>
</h1>
<a href="/2019/04/19/Eslint安装与配置详解.html" class="archive-article-date">
<time datetime="2019-04-19T02:51:36.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-04-19</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p><strong>什么是 ESLint</strong></p>
<p>ESLint（中文站点）是一个开源的 JavaScript 代码检查工具，使用 Node.js 编写，由 Nicholas C. Zakas 于 2013 年 6 月创建。ESLint 的初衷是为了让程序员可以创建自己的检测规则，使其可以在编码的过程中发现问题而不是在执行的过程中。ESLint 的所有规则都被设计成可插入的，为了方便使用，ESLint 内置了一些规则，在这基础上也可以增加自定义规则。</p>
<p><strong>一、Eslint安装</strong></p>
<p><strong>1.全局安装</strong></p>
<p>如果你想使 ESLint 适用于你所有的项目，建议全局安装 ESLint</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install -g eslint</span></span><br></pre></td></tr></table></figure>
<p>初始化配置文件</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> eslint --init</span></span><br></pre></td></tr></table></figure>
<p><strong>2.局部安装</strong></p>
<figure class="highlight q"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install eslint --<span class="built_in">save</span>-<span class="built_in">dev</span></span><br></pre></td></tr></table></figure>
<p>初始化配置文件</p>
<figure class="highlight jboss-cli"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ <span class="string">./node_modules/.bin/eslint</span> <span class="params">--init</span></span><br></pre></td></tr></table></figure>
<p><strong>3.webpack中配置eslint</strong></p>
<p>需要安装eslint-loader解析.eslint文件</p>
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">{ </span><br><span class="line"> <span class="symbol">test:</span> /\.(js<span class="params">|jsx|</span>mjs)$/, </span><br><span class="line"> <span class="symbol">enforce:</span> <span class="string">'pre'</span>, </span><br><span class="line"> <span class="symbol">use:</span> [ </span><br><span class="line"> { </span><br><span class="line"> <span class="symbol">options:</span> { </span><br><span class="line"> <span class="symbol">formatter:</span> eslintFormatter, </span><br><span class="line"> <span class="symbol">eslintPath:</span> <span class="keyword">require</span>.resolve(<span class="string">'eslint'</span>), </span><br><span class="line"> }, </span><br><span class="line"> <span class="symbol">loader:</span> <span class="keyword">require</span>.resolve(<span class="string">'eslint-loader'</span>), </span><br><span class="line"> }, </span><br><span class="line"> ], </span><br><span class="line"> <span class="symbol">include:</span> paths.appSrc, <span class="regexp">//</span>也可以用exclude排除不需要检查的目录或者用.eslintignore </span><br><span class="line">},</span><br></pre></td></tr></table></figure>
<p>二、ESlint配置**</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color2">eslint</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">vue</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">react</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/04/19/Eslint安装与配置详解.html">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-记录vue插件开发-手撸toast插件" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/01/17/记录vue插件开发-手撸toast插件.html">记录vue插件开发-手撸toast插件</a>
</h1>
<a href="/2019/01/17/记录vue插件开发-手撸toast插件.html" class="archive-article-date">
<time datetime="2019-01-17T09:51:32.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-01-17</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p>之前有个项目比较赶，我过去支援开发时发现一个toast插件，写成公用方式可以直接<code>this.$toast()</code>调用；但由于写这个公用插件的人是个新手，所以把插件写成了组件，每次想用toast都要<code>import toast from './components/toast'</code>引入组件，奈何已经成型，所以今天把关于VUE写插件的方法分享出来，貌似网上也有类似文章，但我作为非专业程序猿，一贯作风是写出来让自己记忆深刻也能没事拿出来看看！</p>
<p>词穷代码，代码来补！关于用到的vue方法可直接<a href="https://cn.vuejs.org/" target="_blank" rel="noopener">官网查看</a>！</p>
<p>如果觉得不错的话，点点关注，点点赞，谢谢大家，你们的支持！下面进入正文；</p>
<h3 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h3><p>首先既然是插件，我的理解就是只需要调用传值即可实现，想toast这么常用的插件我们不可能每一个组件都引用文件（不管是js还是vue文件）都是多余！</p>
<p>首先，我们需要创建一个toast.vue的模版组件内容如下:</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color4">vue</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">笔记</a>
</li>
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">toast</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/01/17/记录vue插件开发-手撸toast插件.html">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-2018我的年度总结" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2019/01/15/2018我的年度总结.html">2018我的年度总结</a>
</h1>
<a href="/2019/01/15/2018我的年度总结.html" class="archive-article-date">
<time datetime="2019-01-15T10:13:38.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2019-01-15</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p> 之前一直在QQ空间做年度总结和来年计划，今年掘金和sf等各大网站看到好多大牛都出来年度总结，异常火爆，由于文采很菜，就不拿去献丑，就在自己的blog里来一篇关于职业上的年度总结吧，可能如下内容会写成流水账形式，也可能会稍微好一点，我会尽量控制在我自己以后回头看时不吐的程度，尽量有阅读性和客观性！如你看到此总结可以尽情吐槽，我会吸收并改正！</p>
<h3 id="回顾18"><a href="#回顾18" class="headerlink" title="回顾18"></a>回顾18</h3><p>18年我觉得在工作方面要分为上半年和下半年；首先说一下我是17年11.1来的现在的公司，有些事缘分来了挡都挡不住，我17年心心念念的现公司，17年都是按照自己的规划走的；可是到了18年貌似就不是了；</p>
<p>从上半年说起，上半年我主要负责两个项目，一个是接手过来的，代码比较老套，都没有钱后端分离；另一个是一个新项目，是一个可视化搭建页面的项目；当时接老项目时打算重构，但是推进难度大，之后有新项目启动，又是我一个人搞前端，所以老项目就没有重构；新项目可以说从项目启动—>架构雏形—>架构实现—>第一版上线，完全自己一个人把前端的项目搭建起来，中间虽然遇到过几次问题，尤其前期考虑架构和实现方式时都已经开始怀疑人生了，之后成功的感觉那不能用一个“爽”字能表达的！这里放上<a href="https://github.com/ithack/vueCMS" target="_blank" rel="noopener">项目代码</a>，删除了公司的一些标示和接口，项目后期并没有优化成可复用的代码，只是放出来作为大家以后做类似项目时一个开发思路参考参考！本来想用这个项目打开leader的大门，可是后来，就没有后来了！
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color3">随笔</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2019/01/15/2018我的年度总结.html">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-回顾React，几个why" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018/10/23/回顾React，几个why.html">回顾React，几个why</a>
</h1>
<a href="/2018/10/23/回顾React，几个why.html" class="archive-article-date">
<time datetime="2018-10-23T09:14:01.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2018-10-23</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p> 虽然react比Vue早一些，但是我还是先用了Vue；原因很简单当时看了一下React Native和React的API，觉得项目不需要这么复杂的东西，当时还是vue1.x时代，写了大概3个项目后，Vue2.x上线，之后的项目一直在用vue，从1.x到2.x一直踩坑，到目前可以说对Vue很熟练了也做了很多项目！其中也写过一个React，只是看了API，然后上手就写，感觉一直在皮毛的表层应用；</p>
<p> 最近项目不紧，闲来无事，就在想之前写的react项目，我不能只会用，只关注皮毛，还要多问一些为什么，所以有了今天这篇文章，通过‘十万个为什么’来让自己更加深入的学习了解react，以便自己更加了解react；</p>
<p> 好了，牢骚不多说，下面进入正题；</p>
<h5 id="第一问：为什么用JSX？"><a href="#第一问：为什么用JSX？" class="headerlink" title="第一问：为什么用JSX？"></a>第一问：为什么用JSX？</h5><p>不需要为了React使用JSX，可以直接使用JavaScript，但建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法</p>
<p>1、没有 JSX 的 React：</p>
</div>
<div class="article-info article-info-index">
<div class="article-tag tagcloud">
<i class="icon-price-tags icon"></i>
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="javascript:void(0)" class="js-tag article-tag-list-link color1">react</a>
</li>
</ul>
</div>
<p class="article-more-link">
<a class="article-more-a" href="/2018/10/23/回顾React，几个why.html">展开全文 >></a>
</p>
<div class="clearfix"></div>
</div>
</div>
</article>
<aside class="wrap-side-operation">
<div class="mod-side-operation">
<div class="jump-container" id="js-jump-container" style="display:none;">
<a href="javascript:void(0)" class="mod-side-operation__jump-to-top">
<i class="icon-font icon-back"></i>
</a>
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
<i class="icon-font icon-plane jump-plane"></i>
</div>
</div>
</div>
</aside>
<article id="post-Vue生命周期全解（vueRouter-keep-alive-生命周期）" class="article article-type-post article-index" itemscope itemprop="blogPost">
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2018/09/26/Vue生命周期全解（vueRouter-keep-alive-生命周期）.html">Vue生命周期全解（vueRouter,keep-alive,生命周期）</a>
</h1>
<a href="/2018/09/26/Vue生命周期全解（vueRouter-keep-alive-生命周期）.html" class="archive-article-date">
<time datetime="2018-09-26T08:11:17.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2018-09-26</time>
</a>
</header>
<div class="article-entry" itemprop="articleBody">
<p>最近在开发一个项目时我发现，关于Vue的钩子函数，可能很多人只停留在一些很简单常用的钩子(<code>created</code>,<code>mounted</code>)，并没有仔细的去研究过加入keep-alive,vue-router后的执行顺序等问题；</p>
<h5 id="Vue-Router导航守卫"><a href="#Vue-Router导航守卫" class="headerlink" title="Vue-Router导航守卫"></a>Vue-Router导航守卫</h5><p>有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。</p>
<p>为此我们有很多种方法可以植入路由的导航过程：<strong>全局的, 单个路由独享的, 或者组件级的</strong>,推荐优先阅读<a href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html" target="_blank" rel="noopener">路由文档</a></p>
<h5 id="关于钩子的一些知识："><a href="#关于钩子的一些知识：" class="headerlink" title="关于钩子的一些知识："></a>关于钩子的一些知识：</h5><h6 id="路由钩子函数的错误捕获"><a href="#路由钩子函数的错误捕获" class="headerlink" title="路由钩子函数的错误捕获"></a>路由钩子函数的错误捕获</h6><p>如果我们在全局守卫/路由独享守卫/组件路由守卫的钩子函数中有错误，可以这样捕获：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">router.onError(<span class="function"><span class="params">callback</span> =></span> { </span><br><span class="line"><span class="comment">// 2.4.0新增 并不常用，了解一下就可以了 </span></span><br><span class="line"> <span class="built_in">console</span>.log(callback, <span class="string">'callback'</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure>