diff --git a/.gitignore b/.gitignore index 1622bc4..a78dc00 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ .DS_Store node_modules/ -dist/ +# dist/ npm-debug.log* yarn-debug.log* yarn-error.log* diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..18cab77 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,9 @@ +cboy-blog
\ No newline at end of file diff --git a/dist/static/css/app.841d4ff3b3754d12ac25aed09830a59d.css b/dist/static/css/app.841d4ff3b3754d12ac25aed09830a59d.css new file mode 100644 index 0000000..2ef60c0 --- /dev/null +++ b/dist/static/css/app.841d4ff3b3754d12ac25aed09830a59d.css @@ -0,0 +1 @@ +#app{font-family:cursive;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:absolute}#app,.lion{width:100%;height:100%}.lion{position:relative;background:#fffde6;-webkit-perspective:300;text-align:center}.lion .lions{position:relative;top:0;bottom:0;left:0;right:0;margin:auto;width:400px;height:400px;border-radius:10px}.lion .lion-eye,.lion span{display:inline-block;position:absolute}.lion .lion-head>span{width:8px;height:8px;border-radius:4px;z-index:1;-webkit-animation:changeColor0 10s infinite ease-in-out}@-webkit-keyframes changeColor0{0%{background:#e88c30}25%{background:#e8b730}50%{background:#ee6d66}to{background:#ee8f66}}@keyframes changeColor0{0%{background:#e88c30}25%{background:#e8b730}50%{background:#ee6d66}to{background:#ee8f66}}.lion .lion-eye{top:100px;width:20px;height:2px;border-radius:5px;background:#000}.lion .lion-eye.left{left:175px;-webkit-transform:rotate(-5deg)}.lion .lion-eye.right{left:210px;-webkit-transform:rotate(5deg)}.lion .lion-mouse{position:absolute;width:25px;left:190px;top:125px;border-radius:5px;border-bottom:2px solid #000;-webkit-transform:skew(40deg)}.lion .lion-body>span{width:12px;height:12px;border-radius:5px;background:#f4dc9c;-webkit-animation:changeColor1 10s infinite ease-in-out}@-webkit-keyframes changeColor1{0%{background:#faefd1}25%{background:#fae6d1}50%{background:#fad3d1}to{background:#faddd1}}@keyframes changeColor1{0%{background:#faefd1}25%{background:#fae6d1}50%{background:#fad3d1}to{background:#faddd1}}.lion .lion-foot>span{width:6px;height:6px;border-radius:3px;background:#f4c89c;-webkit-animation:changeColor2 10s infinite ease-in-out}@-webkit-keyframes changeColor2{0%{background:#f4c89c}25%{background:#f4dc9c}50%{background:#f4a09c}to{background:#f4b69c}}@keyframes changeColor2{0%{background:#f4c89c}25%{background:#f4dc9c}50%{background:#f4a09c}to{background:#f4b69c}}.lion .lion-tail>span{width:6px;height:6px;border-radius:3px;background:#ea6;-webkit-animation:changeColor3 10s infinite ease-in-out}@-webkit-keyframes changeColor3{0%{background:#ea6}25%{background:#eeca66}50%{background:#e83a30}to{background:#e86830}}@keyframes changeColor3{0%{background:#ea6}25%{background:#eeca66}50%{background:#e83a30}to{background:#e86830}}.lion .text{margin:50px 0 70px;display:inline-block;text-align:center;position:relative}.lion .text p{font-size:30px;text-shadow:10px 30px 5px #faefd1;color:#8c5d2c;position:absolute;font-weight:800}.lion .door{display:inline-block;margin-left:20px;margin-top:20px;border-radius:4px;background:#8c5d2c;padding:1px 25px;color:#fff;font-size:24px;cursor:pointer;text-decoration:none;-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1)}.lion .door:hover{-webkit-transform:rotateX(1deg) scale(1.2);box-shadow:0 0 100px 5px #f9ece0}.bg-page__mouse{position:absolute;left:220px;top:120px;width:70px;background-color:#f4a09c;z-index:20;border-radius:10px;-webkit-perspective:1px;-webkit-transform-style:preserve-3d}.bg-page__halfmouse{box-sizing:border-box;position:relative;height:20px;overflow:hidden;text-align:center}@-webkit-keyframes cloudmove{0%{background:#1663c7}to{background:#d1e3fa}}.bg-page__halfmouse.top .bg-page__lips{top:0;background:-webkit-linear-gradient(top,#f4a09c,#e83a30);border-radius:5px 5px 0 0}.bg-page__teeth{background-color:#fff;height:17px;width:16px;float:left;box-shadow:-1px 0 #eee;box-sizing:border-box;border-radius:3px}.bg-page__teeth:first-child{width:18px;margin-left:1px;border-radius:10px 0 5px 5px}.bg-page__bigteeth{box-shadow:-1px 0 #eee;float:left;background-color:#fff;height:18px;width:17px;border-radius:1px 2px 2px 2px;position:relative}.bg-page__bigteeth:after{content:"";display:inline-block}.bg-page__halfmouse.bottom .bg-page__teeth:first-child{border-radius:5px 5px 0 10px}.bg-page__halfmouse.bottom .bg-page__bigteeth{border-radius:5px 5px 0 1px}.bg-page__halfmouse.bottom .bg-page__lips{background:-webkit-linear-gradient(bottom,#f4a09c,#e83a30);bottom:0;border-radius:0 0 7px 7px}.bg-page__lips{height:10px;position:absolute;width:100%;-webkit-animation:changeColor 10s infinite ease-in-out}@-webkit-keyframes changeColor{0%{background:#fae6d1}25%{background:#faefd1}50%{background:#fad3d1}to{background:#faddd1}}.bg-page__teethbrush{top:70px;z-index:100;width:20px;height:40px;position:absolute;background-color:#f7f7f7;border:1px solid #eee;-webkit-transform:rotateX(0deg) rotateY(40deg) rotate(30deg);-webkit-animation:burshmove 5s infinite ease-in-out alternate}@-webkit-keyframes burshmove{0%{left:300px;top:130px;-webkit-transform:rotateY(-60deg) rotate(30deg)}10%{left:280px;top:125px;-webkit-transform:rotateY(10deg) rotate(5deg)}25%{left:270px;top:120px;-webkit-transform:rotateY(5deg) rotate(5deg)}35%{left:260px;top:125px;-webkit-transform:rotateY(5deg) rotate(5deg)}50%{left:250px;top:120px;-webkit-transform:rotateY(0deg) rotate(0deg)}65%{left:240px;top:127px;-webkit-transform:rotateY(0deg) rotate(0deg)}75%{left:230px;top:130px;-webkit-transform:rotateY(10deg) rotate(-5deg)}85%{left:220px;top:120px;-webkit-transform:rotateY(10deg) rotate(-5deg)}to{left:210px;top:127px;-webkit-transform:rotateY(55deg) rotate(-25deg)}}.bg-page__teethbrush:before{z-index:100;position:absolute;left:-20px;display:inline-block;top:10px;background:-webkit-linear-gradient(top,#66eece,#9cf4a7);width:20px;height:30px;border-radius:100px 0 100px 0;content:"";-webkit-animation:teethpaste 5s infinite ease-in-out alternate}@-webkit-keyframes teethpaste{0%{width:20px;left:-20px;box-shadow:3px 0 10px 3px #9cf4df}10%{width:15px;left:-15px;box-shadow:1px -10px 10px 3px #9cf4df}25%{width:10px;left:0;box-shadow:1px -10px 10px 3px #9cf4df}35%{width:5px;left:0}50%{width:0;left:0}65%{width:0;left:0}75%{width:0;left:10px}85%{width:0;left:10px}to{width:0;left:10px;box-shadow:-3px 0 20px 3px #fff}}.bg-page__teethbrush:after{z-index:100;width:5px;height:300px;right:-5px;content:"";display:inline-block;background:#d1faf0;position:absolute;-webkit-animation:teethhandle 5s infinite ease-in-out alternate}@-webkit-keyframes teethhandle{0%{width:5px;right:-5px}10%{width:8px;right:-8px}25%{width:10px;right:-10px}35%{width:15px;right:-15px}50%{width:15px;right:0}65%{width:15px;right:0}75%{width:12px;right:12px}85%{width:10px;right:10px}to{width:8px;right:8px}}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}:focus{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;-moz-appearance:none}input[type=search]{-webkit-appearance:none;-moz-appearance:none}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;max-width:100%}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted}a:active,a:hover{outline:0}img{border:0;-ms-interpolation-mode:bicubic}figure,form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}button,html,input,select,textarea{color:#222}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.hljs{display:block;overflow-x:auto;padding:.5em;color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-built_in,.hljs-class .hljs-title{color:#c18401}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline} \ No newline at end of file diff --git a/dist/static/css/app.841d4ff3b3754d12ac25aed09830a59d.css.map b/dist/static/css/app.841d4ff3b3754d12ac25aed09830a59d.css.map new file mode 100644 index 0000000..bbde5ed --- /dev/null +++ b/dist/static/css/app.841d4ff3b3754d12ac25aed09830a59d.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///./src/App.vue","webpack:///./src/index.vue","webpack:///./src/components/bg-page.vue","webpack:///./src/assets/style/reset.css","webpack:///./~/highlight.js/styles/atom-one-light.css"],"names":[],"mappings":"AACA,KACE,oBACA,mCACA,kCACA,WACA,YACA,iBAAmB,CCNrB,MACE,WACA,YACA,kBACA,mBACA,wBACA,iBAAmB,CAErB,aACE,kBACA,MACA,SACA,OACA,QACA,YACA,YACA,aACA,kBAAoB,CAEtB,2BAEE,qBACA,iBAAmB,CAErB,sBACE,UACA,WACA,kBACA,UACA,uDAAyD,CAE3D,gCACA,GACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,wBACA,GACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,gBACE,UACA,WACA,WACA,kBACA,eAAiB,CAEnB,qBACE,WACA,+BAAkC,CAEpC,sBACE,WACA,8BAAiC,CAEnC,kBACE,kBACA,WACA,WACA,UACA,kBACA,6BACA,6BAA+B,CAEjC,sBACE,WACA,YACA,kBACA,mBACA,uDAAyD,CAE3D,gCACA,GACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,wBACA,GACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,sBACE,UACA,WACA,kBACA,mBACA,uDAAyD,CAE3D,gCACA,GACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,wBACA,GACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,sBACE,UACA,WACA,kBACA,gBACA,uDAAyD,CAE3D,gCACA,GACI,eAAoB,CAExB,IACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,wBACA,GACI,eAAoB,CAExB,IACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,YACE,mBACA,qBACA,kBACA,iBAAmB,CAErB,cACE,eACA,kCACA,cACA,kBACA,eAAiB,CAEnB,YACE,qBACA,iBACA,gBACA,kBACA,mBACA,iBACA,WACA,eACA,eACA,qBACA,yDAAkE,CAEpE,kBACE,2CACA,yCACQ,gCAAsC,CCzNhD,gBACE,kBACA,WACA,UACA,WACA,yBACA,WACA,mBACA,wBACA,mCAAqC,CAEvC,oBACE,8BACQ,sBACR,kBACA,YACA,gBACA,iBAAmB,CAErB,6BACA,GACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,uCACE,MACA,wDACA,yBAA+B,CAEjC,gBACE,sBACA,YACA,WACA,WACA,+BACQ,uBACR,8BACQ,sBACR,iBAAmB,CAErB,4BACE,WACA,gBACA,4BAAgC,CAElC,mBACE,+BACQ,uBACR,WACA,sBACA,YACA,WACA,8BACA,iBAAmB,CAErB,yBACE,WACA,oBAAsB,CAExB,uDACE,4BAAgC,CAElC,8CACE,2BAA+B,CAEjC,0CACE,2DACA,SACA,yBAA+B,CAEjC,eACE,YACA,kBACA,WACA,sDAAwD,CAE1D,+BACA,GACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,IACI,kBAAoB,CAExB,GACI,kBAAoB,CACvB,CAED,qBACE,SACA,YACA,WACA,YACA,kBACA,yBACA,sBACA,6DACA,6DAA+D,CAEjE,6BACA,GACI,WACA,UACA,+CAAkD,CAEtD,IACI,WACA,UACA,6CAAgD,CAEpD,IACI,WACA,UACA,4CAA+C,CAEnD,IACI,WACA,UACA,4CAA+C,CAEnD,IACI,WACA,UACA,4CAA+C,CAEnD,IACI,WACA,UACA,4CAA+C,CAEnD,IACI,WACA,UACA,8CAAiD,CAErD,IACI,WACA,UACA,8CAAiD,CAErD,GACI,WACA,UACA,+CAAkD,CACrD,CAED,4BACE,YACA,kBACA,WACA,qBACA,SACA,wDACA,WACA,YACA,8BACA,WACA,8DAAgE,CAElE,8BACA,GACI,WACA,WACA,0CACQ,iCAAqC,CAEjD,IACI,WACA,WACA,8CACQ,qCAAuC,CAEnD,IACI,WACA,OACA,8CACQ,qCAAuC,CAEnD,IACI,UACA,MAAU,CAEd,IACI,QACA,MAAU,CAEd,IACI,QACA,MAAU,CAEd,IACI,QACA,SAAW,CAEf,IACI,QACA,SAAW,CAEf,GACI,QACA,UACA,wCACQ,+BAAmC,CAC9C,CAED,2BACE,YACA,UACA,aACA,WACA,WACA,qBACA,mBACA,kBACA,+DAAiE,CAEnE,+BACA,GACI,UACA,UAAY,CAEhB,IACI,UACA,UAAY,CAEhB,IACI,WACA,WAAa,CAEjB,IACI,WACA,WAAa,CAEjB,IACI,WACA,OAAW,CAEf,IACI,WACA,OAAW,CAEf,IACI,WACA,UAAY,CAEhB,IACI,WACA,UAAY,CAEhB,GACI,UACA,SAAW,CACd,CClQD,2ZAaE,SACD,UACA,SACA,eACA,aACA,uBAAyB,CAI1B,OACI,SAAW,CAIf,8EAEC,aAAe,CAGhB,KACC,aAAe,CAGhB,MACC,eAAiB,CAGlB,aACC,WAAa,CAGd,oDAEC,WACA,YAAc,CAQf,uMAII,wBACA,oBAAsB,CAG1B,mBACI,wBACA,oBAAsB,CAgB1B,mBAGI,qBAAsB,CACtB,eAAiB,CACjB,OACA,cAAgB,CAQpB,sBACI,aACA,QAAU,CAQd,SACI,YAAc,CAUlB,KACI,eACA,8BACA,yBAA2B,CAO/B,QACI,mBAAqB,CAOzB,iBAEI,SAAW,CAQf,IACI,SACA,8BAAgC,CAepC,YACI,QAAU,CAOd,SACI,wBACA,aACA,0BAA+B,CASnC,OACI,SACA,UACA,mBAAoB,CACpB,gBAAmB,CAUvB,6BAII,eACA,SACA,wBAAyB,CACzB,qBAAwB,CAQ5B,aAEI,kBAAoB,CAUxB,cAEI,mBAAqB,CAazB,oEAII,0BACA,eAAgB,CAChB,gBAAmB,CAOvB,sCAEI,cAAgB,CAUpB,uCAEI,sBACA,UAAW,CACX,YAAc,CACd,UAAa,CASjB,mBACI,6BACA,4BACA,+BACA,sBAAwB,CAQ5B,+FAEI,uBAAyB,CAO7B,iDAEI,SACA,SAAW,CAQf,SACI,cACA,kBAAoB,CAOxB,MACI,yBACA,gBAAkB,CAGtB,kCAKI,UAAY,CAIhB,iBACI,mBACA,gBAAkB,CAGtB,YACI,mBACA,gBAAkB,CAGtB,IACI,qBAAuB,CAG3B,SACI,SACA,SACA,SAAW,CAGf,SACI,eAAiB,CAGrB,aACI,cACA,gBACA,WACA,cAAiB,CCnVrB,MACE,cACA,gBACA,aACA,cACA,kBAAoB,CAGtB,0BAEE,cACA,iBAAmB,CAGrB,yCAGE,aAAe,CAGjB,uEAKE,aAAe,CAGjB,cACE,aAAe,CAGjB,2EAKE,aAAe,CAGjB,uCAEE,aAAe,CAGjB,yIAQE,aAAe,CAGjB,8EAME,aAAe,CAGjB,eACE,iBAAmB,CAGrB,aACE,eAAkB,CAGpB,WACE,yBAA2B","file":"static/css/app.841d4ff3b3754d12ac25aed09830a59d.css","sourcesContent":["\n#app {\n font-family: cursive, 'Avenir', Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.vue","\n.lion {\n width: 100%;\n height: 100%;\n position: relative;\n background: #fffde6;\n -webkit-perspective: 300;\n text-align: center;\n}\n.lion .lions {\n position: relative;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n width: 400px;\n height: 400px;\n border-radius: 10px;\n}\n.lion .lion-eye,\n.lion span {\n display: inline-block;\n position: absolute;\n}\n.lion .lion-head > span {\n width: 8px;\n height: 8px;\n border-radius: 4px;\n z-index: 1;\n -webkit-animation: changeColor0 10s infinite ease-in-out;\n}\n@-webkit-keyframes changeColor0 {\n0% {\n background: #e88c30;\n}\n25% {\n background: #e8b730;\n}\n50% {\n background: #ee6d66;\n}\n100% {\n background: #ee8f66;\n}\n}\n@keyframes changeColor0 {\n0% {\n background: #e88c30;\n}\n25% {\n background: #e8b730;\n}\n50% {\n background: #ee6d66;\n}\n100% {\n background: #ee8f66;\n}\n}\n.lion .lion-eye {\n top: 100px;\n width: 20px;\n height: 2px;\n border-radius: 5px;\n background: #000;\n}\n.lion .lion-eye.left {\n left: 175px;\n -webkit-transform: rotateZ(-5deg);\n}\n.lion .lion-eye.right {\n left: 210px;\n -webkit-transform: rotateZ(5deg);\n}\n.lion .lion-mouse {\n position: absolute;\n width: 25px;\n left: 190px;\n top: 125px;\n border-radius: 5px;\n border-bottom: 2px solid #000;\n -webkit-transform: skew(40deg);\n}\n.lion .lion-body > span {\n width: 12px;\n height: 12px;\n border-radius: 5px;\n background: #f4dc9c;\n -webkit-animation: changeColor1 10s infinite ease-in-out;\n}\n@-webkit-keyframes changeColor1 {\n0% {\n background: #faefd1;\n}\n25% {\n background: #fae6d1;\n}\n50% {\n background: #fad3d1;\n}\n100% {\n background: #faddd1;\n}\n}\n@keyframes changeColor1 {\n0% {\n background: #faefd1;\n}\n25% {\n background: #fae6d1;\n}\n50% {\n background: #fad3d1;\n}\n100% {\n background: #faddd1;\n}\n}\n.lion .lion-foot > span {\n width: 6px;\n height: 6px;\n border-radius: 3px;\n background: #f4c89c;\n -webkit-animation: changeColor2 10s infinite ease-in-out;\n}\n@-webkit-keyframes changeColor2 {\n0% {\n background: #f4c89c;\n}\n25% {\n background: #f4dc9c;\n}\n50% {\n background: #f4a09c;\n}\n100% {\n background: #f4b69c;\n}\n}\n@keyframes changeColor2 {\n0% {\n background: #f4c89c;\n}\n25% {\n background: #f4dc9c;\n}\n50% {\n background: #f4a09c;\n}\n100% {\n background: #f4b69c;\n}\n}\n.lion .lion-tail > span {\n width: 6px;\n height: 6px;\n border-radius: 3px;\n background: #eeaa66;\n -webkit-animation: changeColor3 10s infinite ease-in-out;\n}\n@-webkit-keyframes changeColor3 {\n0% {\n background: #eeaa66;\n}\n25% {\n background: #eeca66;\n}\n50% {\n background: #e83a30;\n}\n100% {\n background: #e86830;\n}\n}\n@keyframes changeColor3 {\n0% {\n background: #eeaa66;\n}\n25% {\n background: #eeca66;\n}\n50% {\n background: #e83a30;\n}\n100% {\n background: #e86830;\n}\n}\n.lion .text {\n margin: 50px 0px 70px;\n display: inline-block;\n text-align: center;\n position: relative;\n}\n.lion .text p {\n font-size: 30px;\n text-shadow: 10px 30px 5px #faefd1;\n color: #8c5d2c;\n position: absolute;\n font-weight: 800;\n}\n.lion .door {\n display: inline-block;\n margin-left: 20px;\n margin-top: 20px;\n border-radius: 4px;\n background: #8c5d2c;\n padding: 1px 25px;\n color: #fff;\n font-size: 24px;\n cursor: pointer;\n text-decoration: none;\n -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.lion .door:hover {\n -webkit-transform: rotateX(1deg) scale(1.2);\n -webkit-box-shadow: 0px 0px 100px 5px #f9ece0;\n box-shadow: 0px 0px 100px 5px #f9ece0;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.vue","\n.bg-page__mouse {\n position: absolute;\n left: 220px;\n top: 120px;\n width: 70px;\n background-color: #f4a09c;\n z-index: 20;\n border-radius: 10px;\n -webkit-perspective: 1px;\n -webkit-transform-style: preserve-3d;\n}\n.bg-page__halfmouse {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position: relative;\n height: 20px;\n overflow: hidden;\n text-align: center;\n}\n@-webkit-keyframes cloudmove {\nfrom {\n background: #1663c7;\n}\nto {\n background: #d1e3fa;\n}\n}\n.bg-page__halfmouse.top .bg-page__lips {\n top: 0px;\n background: -webkit-linear-gradient(top, #f4a09c, #e83a30);\n border-radius: 5px 5px 0px 0px;\n}\n.bg-page__teeth {\n background-color: #fff;\n height: 17px;\n width: 16px;\n float: left;\n -webkit-box-shadow: -1px 0px #eee;\n box-shadow: -1px 0px #eee;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-radius: 3px;\n}\n.bg-page__teeth:first-child {\n width: 18px;\n margin-left: 1px;\n border-radius: 10px 0px 5px 5px;\n}\n.bg-page__bigteeth {\n -webkit-box-shadow: -1px 0px #eee;\n box-shadow: -1px 0px #eee;\n float: left;\n background-color: #fff;\n height: 18px;\n width: 17px;\n border-radius: 1px 2px 2px 2px;\n position: relative;\n}\n.bg-page__bigteeth:after {\n content: '';\n display: inline-block;\n}\n.bg-page__halfmouse.bottom .bg-page__teeth:first-child {\n border-radius: 5px 5px 0px 10px;\n}\n.bg-page__halfmouse.bottom .bg-page__bigteeth {\n border-radius: 5px 5px 0px 1px;\n}\n.bg-page__halfmouse.bottom .bg-page__lips {\n background: -webkit-linear-gradient(bottom, #f4a09c, #e83a30);\n bottom: 0px;\n border-radius: 0px 0px 7px 7px;\n}\n.bg-page__lips {\n height: 10px;\n position: absolute;\n width: 100%;\n -webkit-animation: changeColor 10s infinite ease-in-out;\n}\n@-webkit-keyframes changeColor {\n0% {\n background: #fae6d1;\n}\n25% {\n background: #faefd1;\n}\n50% {\n background: #fad3d1;\n}\n100% {\n background: #faddd1;\n}\n}\n.bg-page__teethbrush {\n top: 70px;\n z-index: 100;\n width: 20px;\n height: 40px;\n position: absolute;\n background-color: #f7f7f7;\n border: 1px solid #eee;\n -webkit-transform: rotateX(0deg) rotateY(40deg) rotateZ(30deg);\n -webkit-animation: burshmove 5s infinite ease-in-out alternate;\n}\n@-webkit-keyframes burshmove {\n0% {\n left: 300px;\n top: 130px;\n -webkit-transform: rotateY(-60deg) rotateZ(30deg);\n}\n10% {\n left: 280px;\n top: 125px;\n -webkit-transform: rotateY(10deg) rotateZ(5deg);\n}\n25% {\n left: 270px;\n top: 120px;\n -webkit-transform: rotateY(5deg) rotateZ(5deg);\n}\n35% {\n left: 260px;\n top: 125px;\n -webkit-transform: rotateY(5deg) rotateZ(5deg);\n}\n50% {\n left: 250px;\n top: 120px;\n -webkit-transform: rotateY(0deg) rotateZ(0deg);\n}\n65% {\n left: 240px;\n top: 127px;\n -webkit-transform: rotateY(0deg) rotateZ(0deg);\n}\n75% {\n left: 230px;\n top: 130px;\n -webkit-transform: rotateY(10deg) rotateZ(-5deg);\n}\n85% {\n left: 220px;\n top: 120px;\n -webkit-transform: rotateY(10deg) rotateZ(-5deg);\n}\n100% {\n left: 210px;\n top: 127px;\n -webkit-transform: rotateY(55deg) rotateZ(-25deg);\n}\n}\n.bg-page__teethbrush:before {\n z-index: 100;\n position: absolute;\n left: -20px;\n display: inline-block;\n top: 10px;\n background: -webkit-linear-gradient(top, #66eece, #9cf4a7);\n width: 20px;\n height: 30px;\n border-radius: 100px 0px 100px 0px;\n content: '';\n -webkit-animation: teethpaste 5s infinite ease-in-out alternate;\n}\n@-webkit-keyframes teethpaste {\n0% {\n width: 20px;\n left: -20px;\n -webkit-box-shadow: 3px 0px 10px 3px #9cf4df;\n box-shadow: 3px 0px 10px 3px #9cf4df;\n}\n10% {\n width: 15px;\n left: -15px;\n -webkit-box-shadow: 1px -10px 10px 3px #9cf4df;\n box-shadow: 1px -10px 10px 3px #9cf4df;\n}\n25% {\n width: 10px;\n left: 0px;\n -webkit-box-shadow: 1px -10px 10px 3px #9cf4df;\n box-shadow: 1px -10px 10px 3px #9cf4df;\n}\n35% {\n width: 5px;\n left: 0px;\n}\n50% {\n width: 0px;\n left: 0px;\n}\n65% {\n width: 0px;\n left: 0px;\n}\n75% {\n width: 0px;\n left: 10px;\n}\n85% {\n width: 0px;\n left: 10px;\n}\n100% {\n width: 0px;\n left: 10px;\n -webkit-box-shadow: -3px 0px 20px 3px #fff;\n box-shadow: -3px 0px 20px 3px #fff;\n}\n}\n.bg-page__teethbrush:after {\n z-index: 100;\n width: 5px;\n height: 300px;\n right: -5px;\n content: '';\n display: inline-block;\n background: #d1faf0;\n position: absolute;\n -webkit-animation: teethhandle 5s infinite ease-in-out alternate;\n}\n@-webkit-keyframes teethhandle {\n0% {\n width: 5px;\n right: -5px;\n}\n10% {\n width: 8px;\n right: -8px;\n}\n25% {\n width: 10px;\n right: -10px;\n}\n35% {\n width: 15px;\n right: -15px;\n}\n50% {\n width: 15px;\n right: 0px;\n}\n65% {\n width: 15px;\n right: 0px;\n}\n75% {\n width: 12px;\n right: 12px;\n}\n85% {\n width: 10px;\n right: 10px;\n}\n100% {\n width: 8px;\n right: 8px;\n}\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/bg-page.vue","html, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n margin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n\n/* make sure to set some focus styles for accessibility */\n:focus {\n outline: 0;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\n\nbody {\n\tline-height: 1;\n}\n\nol, ul {\n\tlist-style: none;\n}\n\nblockquote, q {\n\tquotes: none;\n}\n\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\n\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-decoration,\ninput[type=search]::-webkit-search-results-button,\ninput[type=search]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\ninput[type=search] {\n -webkit-appearance: none;\n -moz-appearance: none;\n -webkit-box-sizing: content-box;\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n}\n\ntextarea {\n overflow: auto;\n vertical-align: top;\n resize: vertical;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.\n */\n\naudio,\ncanvas,\nvideo {\n display: inline-block;\n *display: inline;\n *zoom: 1;\n max-width: 100%;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.\n * Known issue: no IE 6 support.\n */\n\n[hidden] {\n display: none;\n}\n\n/**\n * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using\n * `em` units.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n * user zoom.\n */\n\nhtml {\n font-size: 100%; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n -ms-text-size-adjust: 100%; /* 2 */\n}\n\n/**\n * Address `outline` inconsistency between Chrome and other browsers.\n */\n\na:focus {\n outline: thin dotted;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\n\na:active,\na:hover {\n outline: 0;\n}\n\n/**\n * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.\n * 2. Improve image quality when scaled in IE 7.\n */\n\nimg {\n border: 0; /* 1 */\n -ms-interpolation-mode: bicubic; /* 2 */\n}\n\n/**\n * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.\n */\n\nfigure {\n margin: 0;\n}\n\n/**\n * Correct margin displayed oddly in IE 6/7.\n */\n\nform {\n margin: 0;\n}\n\n/**\n * Define consistent border, margin, and padding.\n */\n\nfieldset {\n border: 1px solid #c0c0c0;\n margin: 0 2px;\n padding: 0.35em 0.625em 0.75em;\n}\n\n/**\n * 1. Correct color not being inherited in IE 6/7/8/9.\n * 2. Correct text not wrapping in Firefox 3.\n * 3. Correct alignment displayed oddly in IE 6/7.\n */\n\nlegend {\n border: 0; /* 1 */\n padding: 0;\n white-space: normal; /* 2 */\n *margin-left: -7px; /* 3 */\n}\n\n/**\n * 1. Correct font size not being inherited in all browsers.\n * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,\n * and Chrome.\n * 3. Improve appearance and consistency in all browsers.\n */\n\nbutton,\ninput,\nselect,\ntextarea {\n font-size: 100%; /* 1 */\n margin: 0; /* 2 */\n vertical-align: baseline; /* 3 */\n *vertical-align: middle; /* 3 */\n}\n\n/**\n * Address Firefox 3+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\n\nbutton,\ninput {\n line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n * and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n * `input` and others.\n * 4. Remove inner spacing in IE 7 without affecting normal text inputs.\n * Known issue: inner spacing remains in IE 6.\n */\n\nbutton,\nhtml input[type=\"button\"], /* 1 */\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n cursor: pointer; /* 3 */\n *overflow: visible; /* 4 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\n\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n\n/**\n * 1. Address box sizing set to content-box in IE 8/9.\n * 2. Remove excess padding in IE 8/9.\n * 3. Remove excess padding in IE 7.\n * Known issue: excess padding remains in IE 6.\n */\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n *height: 13px; /* 3 */\n *width: 13px; /* 3 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n * (include `-moz` to future-proof).\n */\n\ninput[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n -moz-box-sizing: content-box;\n -webkit-box-sizing: content-box; /* 2 */\n box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 3+.\n */\n\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 6/7/8/9.\n * 2. Improve readability and alignment in all browsers.\n */\n\ntextarea {\n overflow: auto; /* 1 */\n vertical-align: top; /* 2 */\n}\n\n/**\n * Remove most spacing between table cells.\n */\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\nhtml,\nbutton,\ninput,\nselect,\ntextarea {\n color: #222;\n}\n\n\n::-moz-selection {\n background: #b3d4fc;\n text-shadow: none;\n}\n\n::selection {\n background: #b3d4fc;\n text-shadow: none;\n}\n\nimg {\n vertical-align: middle;\n}\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\n}\n\ntextarea {\n resize: vertical;\n}\n\n.chromeframe {\n margin: 0.2em 0;\n background: #ccc;\n color: #000;\n padding: 0.2em 0;\n}\n\n\n// WEBPACK FOOTER //\n// ./src/assets/style/reset.css","/*\n\nAtom One Light by Daniel Gamage\nOriginal One Light Syntax theme from https://github.com/atom/one-light-syntax\n\nbase: #fafafa\nmono-1: #383a42\nmono-2: #686b77\nmono-3: #a0a1a7\nhue-1: #0184bb\nhue-2: #4078f2\nhue-3: #a626a4\nhue-4: #50a14f\nhue-5: #e45649\nhue-5-2: #c91243\nhue-6: #986801\nhue-6-2: #c18401\n\n*/\n\n.hljs {\n display: block;\n overflow-x: auto;\n padding: 0.5em;\n color: #383a42;\n background: #fafafa;\n}\n\n.hljs-comment,\n.hljs-quote {\n color: #a0a1a7;\n font-style: italic;\n}\n\n.hljs-doctag,\n.hljs-keyword,\n.hljs-formula {\n color: #a626a4;\n}\n\n.hljs-section,\n.hljs-name,\n.hljs-selector-tag,\n.hljs-deletion,\n.hljs-subst {\n color: #e45649;\n}\n\n.hljs-literal {\n color: #0184bb;\n}\n\n.hljs-string,\n.hljs-regexp,\n.hljs-addition,\n.hljs-attribute,\n.hljs-meta-string {\n color: #50a14f;\n}\n\n.hljs-built_in,\n.hljs-class .hljs-title {\n color: #c18401;\n}\n\n.hljs-attr,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-type,\n.hljs-selector-class,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-number {\n color: #986801;\n}\n\n.hljs-symbol,\n.hljs-bullet,\n.hljs-link,\n.hljs-meta,\n.hljs-selector-id,\n.hljs-title {\n color: #4078f2;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}\n\n.hljs-strong {\n font-weight: bold;\n}\n\n.hljs-link {\n text-decoration: underline;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./~/highlight.js/styles/atom-one-light.css"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/static/js/0.5209f36607d516a56b7a.js b/dist/static/js/0.5209f36607d516a56b7a.js new file mode 100644 index 0000000..0cf9d76 --- /dev/null +++ b/dist/static/js/0.5209f36607d516a56b7a.js @@ -0,0 +1,2 @@ +webpackJsonp([0],Array(79).concat([function(e,t,n){function r(e){return n(s(e))}function s(e){var t=v[e];if(!(t+1))throw new Error("Cannot find module '"+e+"'.");return t}var v={"./aliyun-server.md":118,"./bem.md":119,"./canvas-svg.md":120,"./code-format.md":121,"./module.md":122,"./postcss-plugin.md":123,"./pwa.md":124,"./readme.md":125,"./safe.md":126,"./ssl.md":127,"./typescript.md":128,"./vue.md":129,"./webpack.md":130};r.keys=function(){return Object.keys(v)},r.resolve=s,e.exports=r,r.id=79},,,,,,,,,function(e,t,n){var r=n(7)(null,n(108),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(111),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(109),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(104),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(113),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(103),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(116),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(112),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(110),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(115),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(105),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(114),null,null,null);e.exports=r.exports},function(e,t,n){var r=n(7)(null,n(107),null,null,null);e.exports=r.exports},,,function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("h2",{attrs:{id:"%E5%86%99-css-%E9%81%87%E5%88%B0%E4%BA%86%E9%97%AE%E9%A2%98%E6%80%8E%E4%B9%88%E5%8A%9E%EF%BC%9F"}},[e._v("写 css 遇到了问题怎么办?")]),e._v(" "),n("h3",{attrs:{id:"%E5%A6%82%E4%BD%95%E8%AE%A9-css-%E5%86%99%E7%9A%84%E6%9B%B4%E8%BD%BB%E6%9D%BE%EF%BC%9F"}},[e._v("如何让 css 写的更轻松?")]),e._v(" "),n("h4",{attrs:{id:"postcss-ui-theme%EF%BC%8C%E8%AE%A9%E4%BD%A0%E5%AE%9E%E7%8E%B0%E7%B1%BB-sass-%E8%AF%AD%E6%B3%95%EF%BC%8C%E4%B8%80%E4%B8%AA%E6%8F%92%E4%BB%B6%E5%B0%B1%E8%83%BD%E5%81%9A%E5%88%B0%EF%BC%81"}},[n("a",{attrs:{href:"https://github.com/cleverboy32/postcss-ui-theme"}},[e._v("postcss-ui-theme")]),e._v(",让你实现类 sass 语法,一个插件就能做到!")]),e._v(" "),n("h3",{attrs:{id:"%E5%A6%82%E4%BD%95%E6%94%B9%E5%8F%98-css-%E4%B8%BB%E9%A2%98-%EF%BC%9F"}},[e._v("如何改变 css 主题 ?")]),e._v(" "),n("h4",{attrs:{id:"postcss-ui-theme-%EF%BC%8C-%E5%8F%AF%E6%89%93%E5%8C%85-css4-%E5%8F%98%E9%87%8F%E8%A2%AB%E4%BF%9D%E7%95%99%EF%BC%8C%E4%B8%8D%E4%BB%85%E5%8F%AF%E5%9C%A8%E5%BC%95%E7%94%A8%E6%97%B6%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8%E6%96%B0%E7%9A%84%E5%8F%98%E9%87%8F%E6%96%87%E4%BB%B6%E8%A6%86%E7%9B%96%E6%94%B9%E5%8F%98%E4%B8%BB%E9%A2%98%EF%BC%8C%E8%BF%98%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87-js-%E8%BF%9B%E8%A1%8C%E6%9B%B4%E6%94%B9%EF%BC%81%EF%BC%81%EF%BC%81"}},[n("a",{attrs:{href:"https://github.com/cleverboy32/postcss-ui-theme"}},[e._v("postcss-ui-theme ")]),e._v(", 可打包 css4 变量被保留,不仅可在引用时直接使用新的变量文件覆盖改变主题,还可以通过 js 进行更改!!!")]),e._v(" "),n("h3",{attrs:{id:"css-%E5%9C%A8%E5%88%AB%E7%9A%84%E9%A1%B9%E7%9B%AE%E8%A2%AB%E7%BC%96%E8%AF%91%EF%BC%8C%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84%E6%89%BE%E4%B8%8D%E5%88%B0%EF%BC%9F"}},[e._v("css 在别的项目被编译,文件路径找不到?")]),e._v(" "),n("h4",{attrs:{id:"postcss-ui-theme%EF%BC%8C-%E9%9B%86%E6%88%90-postcss-assets-%E6%8F%92%E4%BB%B6%EF%BC%8C%E9%80%9A%E8%BF%87%E9%85%8D%E7%BD%AE-%E6%96%87%E4%BB%B6%E6%9F%A5%E6%89%BE%E8%B7%AF%E5%BE%84%EF%BC%8C%E8%A7%A3%E5%86%B3%E5%BC%95%E7%94%A8%E6%96%87%E4%BB%B6%E6%89%BE%E4%B8%8D%E5%88%B0%E9%97%AE%E9%A2%98%EF%BC%81%EF%BC%81"}},[n("a",{attrs:{href:"https://github.com/cleverboy32/postcss-ui-theme"}},[e._v("postcss-ui-theme")]),e._v(", 集成 postcss-assets 插件,通过配置 文件查找路径,解决引用文件找不到问题!!")]),e._v(" "),n("h3",{attrs:{id:"postcss-ui-theme-%E6%8F%92%E4%BB%B6%EF%BC%8C%E5%B0%B1%E6%98%AF%E4%BD%A0%E7%9A%84-css-%E7%AE%A1%E7%90%86%E6%96%B9%E6%A1%88%E7%9A%84%E6%9C%80%E4%BD%B3%E9%80%89%E6%8B%A9!-%E7%82%B9-star-%E6%94%B6%E8%97%8F%EF%BC%81%EF%BC%81%EF%BC%81-%E8%8C%AB%E8%8C%AB%E5%89%8D%E7%AB%AF%E8%B7%AF%EF%BC%8C%E4%BD%A0%E7%9C%9F%E7%9A%84%E4%BC%9A%E7%94%A8%E5%88%B0%E5%AE%83%E7%9A%84%EF%BC%81"}},[n("a",{attrs:{href:"https://github.com/cleverboy32/postcss-ui-theme"}},[e._v("postcss-ui-theme")]),e._v(" 插件,就是你的 css 管理方案的最佳选择! 点 star 收藏!!! 茫茫前端路,你真的会用到它的!")])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("p",[e._v("作为一个程序员,工作到现在,也将近半年了。公司对员工的代码提交也会有 review 流程。代码的 review 来讲,一般就是看格式、命名、逻辑是否有错,代码是否还有可以抽象的地方,这里总结一下自己遇到的代码规范方面的问题,大家一起写规范的代码,做一个看上去专业码农吧。")]),e._v(" "),n("hr"),e._v(" "),n("p",[e._v("####"),n("strong",[e._v("js规范")])]),e._v(" "),n("ul",[n("li",[n("p",[e._v("代码的缩进了,一般是两格或四格,我司采用的是四格,这里可以根据自己喜好和公司要求了。")])]),e._v(" "),n("li",[n("p",[e._v("中英文之间有空格间隔,像这样: "),n("code",{pre:!0},[e._v("我专业引用 English 单词")])])]),e._v(" "),n("li",[n("p",[e._v("命名规范,命名的驼峰式不用再说了。这里具体情况具体分析一下")]),e._v(" "),n("ul",[n("li",[e._v("变量的命名:小驼峰式")]),e._v(" "),n("li",[e._v("函数的命名:小驼峰式")]),e._v(" "),n("li",[e._v("常量:全部大写")]),e._v(" "),n("li",[e._v("构造函数: 大驼峰式")]),e._v(" "),n("li",[e._v("类的成员: 公共属性和方法就是小驼峰式, 私有属性和方法加上"),n("code",{pre:!0},[e._v("-")]),e._v("前缀,然后是小驼峰式,如 `_nameFrist")])]),e._v(" "),n("hr")])]),e._v(" "),n("p",[e._v("####"),n("strong",[e._v("css规范")])]),e._v(" "),n("ul",[n("li",[n("p",[e._v("css 的基本命名, 自己刚写的时候以为也是写小驼峰式,后来就呵呵了。css 当中就是用 "),n("code",{pre:!0},[e._v("-")]),e._v(" 连接了, 如 "),n("code",{pre:!0},[e._v("search-button")]),e._v(",在定义 id 的时候是用小驼峰了。")])]),e._v(" "),n("li",[n("p",[e._v("css 名字意思定义。这里有一个 BEM 的命名法则参考,可以看看我之前写的一篇博客"),n("a",{attrs:{href:"http://blog.csdn.net/dadadeganhuo/article/details/76600264"}},[e._v("了解BEM")])])]),e._v(" "),n("li",[n("p",[e._v("css 命名的统一前缀, 在一个项目中,约定好同一个前缀,可避免样式的覆盖。")])]),e._v(" "),n("li",[n("p",[e._v("css 样式书写顺序:")]),e._v(" "),n("ul",[n("li",[e._v("显示属性:display/list-style/position/float/clear …")]),e._v(" "),n("li",[e._v("自身属性(盒模型):width/height/margin/padding/border")]),e._v(" "),n("li",[e._v("背景:background")]),e._v(" "),n("li",[e._v("行高:line-height")]),e._v(" "),n("li",[e._v("文本属性:color/font/text-decoration/text-align/...")]),e._v(" "),n("li",[e._v("其他:cursor/z-index/zoom/overflow")]),e._v(" "),n("li",[e._v("CSS3属性:transform/transition/animation/box-shadow/border-radius")]),e._v(" "),n("li",[e._v("如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照 -webkit- / -moz- / -ms- / -o- /"),n("br"),e._v("\nstd的顺序进行添加,标准属性写在最后。")]),e._v(" "),n("li",[e._v("链接的样式请严格按照如下顺序添加: a:link -> a:visited -> a:hover -> a:active")])])]),e._v(" "),n("li",[n("p",[e._v("代码优化,能合并的属性就合并写,没用的属性也删掉,避免重复样式,避免使用 "),n("code",{pre:!0},[e._v("!important")])])])]),e._v(" "),n("hr"),e._v(" "),n("p",[e._v("####"),n("strong",[e._v("git commit log 规则")])]),e._v(" "),n("ul",[n("li",[n("p",[e._v("首先就是commit 内容的分类了,如图片所示:"),n("br"),e._v(" "),n("img",{attrs:{src:"https://img-blog.csdn.net/20170830144139403?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast",alt:"这里写图片描述"}}),e._v("定好分类,分类后面可以加你本次修改具体文件,然后组织本次修改的内容,就写好了 commit log啦。比如:"),n("code",{pre:!0},[e._v("feat(login): 新增登录验证功能")]),e._v(",这表达出了你再login文件上新增了一个验证的功能。编写正确的 log 信息,能够清楚的表述你写的代码目的。")])]),e._v(" "),n("li",[n("p",[e._v("commit 次数,这里我们每完成一个小点的时候,都可以 commit 一下,因为commit 是记录你完成一个项目的具体过程。")])])]),e._v(" "),n("hr"),e._v(" "),n("p",[e._v("= = 之前没好好总结,今天写总结的时候,也去搜了搜别的文章,发现这样的文章其实挺多,自己以前都没怎么好好看看 = = 。"),n("br"),e._v("\n欢迎补充啊~")]),e._v(" "),n("p",[e._v("####参考")]),e._v(" "),n("blockquote",[n("p",[n("a",{attrs:{href:"https://www.douban.com/note/499976405/?type=like"}},[e._v("前端人员必看的CSS规范")]),n("br"),e._v(" "),n("a",{attrs:{href:"http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html"}},[e._v("Commit message 和 Change log 编写指南")])])])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("h2",{attrs:{id:"learn-typescript"}},[e._v("learn typescript")]),e._v(" "),n("h3",{attrs:{id:"%E7%B1%BB%E5%9E%8B"}},[e._v("类型")]),e._v(" "),n("p",[e._v("基本类型: string number bool")]),e._v(" "),n("p",[e._v("数组 "),n("code",{pre:!0},[e._v("[]")]),e._v(": string[] number[]")]),e._v(" "),n("p",[e._v("元祖: [string, number]. 数组中有不同的数据类型")]),e._v(" "),n("p",[e._v("对象: { name: string; age: number }")]),e._v(" "),n("p",[e._v("函数:(arg1: string, arg?: bool) => void")]),e._v(" "),n("p",[e._v('Symbol: let symbol = Symbol("key");')]),e._v(" "),n("p",[e._v("空: undefined null")]),e._v(" "),n("p",[e._v("任何类型: any")]),e._v(" "),n("p",[e._v("不存在的值: never")]),e._v(" "),n("h3",{attrs:{id:"%E5%A6%82%E4%BD%95%E5%AE%9A%E4%B9%89%E7%B1%BB%E5%9E%8B"}},[e._v("如何定义类型")]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("type")]),e._v(" 定义类型变量")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type Person = { name: string; age: number}\nts 使用 const person1:Person = { name: '22', age: 1};\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Interfaces")]),e._v(" 声明 "),n("code",{pre:!0},[e._v("对象")]),e._v(" 类型的一种方法")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("Interface Person { name: string; age: number}\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("extends")]),e._v(" 类型继承于声明的类型")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("interface a { name: string}\ninterface b extends a {\n\tage: number\n}\nb 的类型等于 { name: string; age: number }\n")])]),e._v(" "),n("p",[e._v("in 判断属性是哪个类型中的")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type PersonListQuery = { user_ids: string[] }\ntype DogListQuery = { dog_ids: string[] }\n\nfunction getList(query: PersonListQuery | DogListQuery ) {\n\tif ('user_ids' in PersonListQuery) {\n\t \t// 这里可以推导出 query 类型是 PersonListQuery\n\t}\n}\n\n")])]),e._v(" "),n("h3",{attrs:{id:"%E7%B1%BB%E5%9E%8B%E7%BB%84%E5%90%88"}},[e._v("类型组合")]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Required")]),e._v(" 将 T 中所有属性变成必选")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("Required<{ a?: bool} > = { a: bool }\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Partial")]),e._v(" 将 T 中所有属性变成可选")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("Partial<{ a: bool }> = { a?: bool }\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Readonly")]),e._v(" 将 T 中所有属性变成只读,后续 ts 会检测该类型不允许修改")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("const person2: Readonly<{name: string}> = {name: '22'}\nperson2.name = '33' //error\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Omit")]),e._v(" 删除某些属性")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("interface Person {\n name: string;\n age: number;\n}\n \ntype Name = Omit;\nName 的类型定义为 { name: string }\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Pick")]),e._v(" 选择类型中的某些属性")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("interface Person {\n name: string;\n age: number;\n}\ntype Name = Pick;\nName 的类型定义为 { name: string }\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Exclude")]),e._v(" 删除类型 T 中 deleteT 的类型, 相当于 Omit, 第二个值可以是 keys ,也可以是一个类型变量")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("interface Person {\n name: string;\n age: number;\n}\ntype Age = { age: number }\ntype Name = Exclude\nName 的类型定义为 { name: string }\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Extract")]),e._v(" 提取 T 继承于的 U 类型")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type Person = { name: string ; age: number } \ntype PersonDetail = { pet: any; phone: number } \ntype Name = { name: string }\ntype Name = Extract\n 将提取出含有 name 的类型 Person\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Parameters")]),e._v(" 获取函数类型的函数类型")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type getName = (perpson: Person) => string;\ntype queryType = Parameters;\nqueryType 的类型定义为 Person\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("ReturnType")]),e._v(" 获取函数类型的返回值类型")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type getName = (perpson: Person) => string;\ntype resType = ReturnType;\nvalueType 类型为 string\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Awaited")]),e._v(" 获取异步返回的值类型")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type getPerson = (id: string) => Promise\ntype resType = ReturnType // Promise\ntype valueType = Awaited // Person\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("Record")]),e._v(" 定义对象的 key 键类型")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type Keys = 'name' | 'age' \ntype person = Record\n// person 的属性只能为 name 和 age\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("NonNullable")]),e._v(" 去除类型中定义的 null 和 undefined")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type PersonHobby = hobby: string | undefined;\ntype Hobby = NonNullable\nHobby 类型为 string\n")])]),e._v(" "),n("h3",{attrs:{id:"%E7%B1%BB%E5%9E%8B%E6%93%8D%E4%BD%9C"}},[e._v("类型操作")]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("typeof Object")]),e._v(" 获得"),n("code",{pre:!0},[e._v("对象")]),e._v("的类型")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("const person1 = { name: '22', age: 1}\ntype Person = typeof person1\nPerson 类型为 { name: string; age: number }\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("keyof T")]),e._v(" 获得类型中的属性")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type Person = { name: string; age: number }\ntype Key = keyof Person \nkey 的类型为 'name' | 'age'\n")])]),e._v(" "),n("p",[e._v("通常我们可以通过 keyof 约束对象的传参, 如")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type Person = { name: string; age: number }\ntype Key = keyof Person;\ntype getPersonAtrribute = (person: Person, key: Key) => Person[Key];\n")])]),e._v(" "),n("p",[e._v("或者某些情况下我们想知道一个对象的属性值")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("const workPerson = { \n\t'1': { name: '1', age: 1},\n\t'2': { name: '2', age: 2},\n}\ntype WorkPerson = typeof workPerson; // { '1': {name: string; age: number }, '2': {name: string; age: number }\ntype Key = keyof WorkPerson // '1' | '2'\ntype Person = WorkPerson[Key] // {name: string; age: number }\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("|")]),e._v(" 类型兼容")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type width = 'string' | 'number';\n\n则 width 可以是 '32px' 也可以是 '32' 在 渲染时兼容两种类型\n")])]),e._v(" "),n("h3",{attrs:{id:"%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD"}},[e._v("函数重载")]),e._v(" "),n("p",[e._v("定义不同类型的输入,推到出不同类型的输出")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type PersonListQuery = { user_ids: string[] };\ntype DongListQuery = { dog_ids: string[] };\nfunction getList(request: PersonListQuery): Person[];\nfunction getList(request: DogListQuery): Dog[];\n\nfunction getList(query: PersonListQuery | DogListQuery) {\n if ('user_ids' in query) { \n return [] as Person[];\n } else {\n return [] as Dog[];\n }\n}\n\nconst a = getList({ personIds: [], region: 'us'})\n此时 a 的类型将能推到出是 Person[]\n")])]),e._v(" "),n("h3",{attrs:{id:"%E6%B3%9B%E5%9E%8B"}},[e._v("泛型")]),e._v(" "),n("p",[e._v("类型的传参。 用 T 标识,在实际运用时你传入什么类型,该类型就作为后续推导。")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("async function request(url: string): Promise {\n const res = await fetch(url)\n return res.json();\n}\n\nconst res = await request('getPersonInfo?id=1'); \n此时 ts 可以推导出 res 的类型是 Person\n")])]),e._v(" "),n("h3",{attrs:{id:"infer-%E7%B1%BB%E5%9E%8B%E5%8F%82%E6%95%B0%E4%BD%BF%E7%94%A8"}},[e._v("Infer 类型参数使用")]),e._v(" "),n("p",[e._v("通过 Infer 一个类型为变量,定义出获取类型的方法")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("type addResultType = T extends { a: infer U, b: infer U } ? U : never;\ntype numberAdd = addResultType<{ a: 1, b: 2 }> // 推到出结果类型为 number\ntype textAdd = addResultType<{ a: 'hello', b: 'world' }> // 推到出结果类型为 string\n")])]),e._v(" "),n("h3",{attrs:{id:"%E6%9E%9A%E4%B8%BE-enum"}},[e._v("枚举 enum")]),e._v(" "),n("p",[e._v("变量的值是约定的几个取值")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("const enum PageType {\n HOME = 'home',\n VIDEO = 'video',\n}\n\nfunction getPageUrl(page: PageType) {\n return {\n [PageType.VIDEO]: \"/video\",\n [PageType.HOME]: \"/home\",\n }[page];\n}\n")])]),e._v(" "),n("h2",{attrs:{id:"tsconfig"}},[e._v("tsconfig")]),e._v(" "),n("p",[e._v("了解了 ts 对于类型的定义和各种规则后,我们则可以在编写 js 代码时利用并进行类型约束。于此同时,我们需要引入 typescript 库去获得这些 ts 能力。")]),e._v(" "),n("h3",{attrs:{id:"%E5%A6%82%E4%BD%95%E5%BC%95%E5%85%A5"}},[e._v("如何引入")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("npm install typescript \n// 不必再多说\n")])]),e._v(" "),n("h3",{attrs:{id:"%E5%91%BD%E4%BB%A4"}},[e._v("命令")]),e._v(" "),n("p",[e._v("typescript 包是有命令文件的,通常 ts 的运行则是通过 tsc 配合相关命令去执行的. 具体命令大家可以安装包之后通过 tsc -h 查看"),n("br"),e._v(" "),n("img",{attrs:{src:"https://i-blog.csdnimg.cn/blog_migrate/349ffc362f0d831a780d2d7f754893a1.png",alt:"在这里插入图片描述"}})]),e._v(" "),n("h3",{attrs:{id:"%E9%85%8D%E7%BD%AE-%E5%AE%98%E7%BD%91"}},[e._v("配置 "),n("a",{attrs:{href:"https://www.typescriptlang.org/docs/handbook/tsconfig-json.html"}},[e._v("官网")])]),e._v(" "),n("p",[e._v("如果你看了 tsc 命令,你会发现它是有很多命令的,并且有的命令还伴随这相关参数。在工作文件夹中,我们则通过配置文件 "),n("code",{pre:!0},[e._v("tsconfig.js")]),e._v(" 去配置,保证在项目中的运用。 配置参数这里就不细讲了,还是看官方文档靠谱点。")])])},staticRenderFns:[]}},,function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("h4",{attrs:{id:"%E4%B8%80-webpack-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"}},[e._v("一 webpack 是什么?")]),e._v(" "),n("p",[e._v("它是一个打包工具。 噗,完啦?")]),e._v(" "),n("p",[e._v("来,我们看官方概念: webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle。")]),e._v(" "),n("p",[e._v("内部如何构建一个依赖图,我们知道 webpack 会配置一个入口,这就是从这入口文件开始, 找到所有被依赖到的文件,比如其他 js / image / json 文件等,然后通过 loader 对这些文件进行处理、编译、打包、优化,生成一个 bundle 或者多个 bundle。")]),e._v(" "),n("h4",{attrs:{id:"%E5%AE%83%E7%9A%84%E5%8E%9F%E7%90%86"}},[e._v("它的原理")]),e._v(" "),n("p",[e._v("通过以上,主要就是找依赖, 通过配置处理相应环境,根据你的需要配置插件进行优化(如 profill、babel、 miniSize etc) 打包出文件,可以放到服务器上运行。")]),e._v(" "),n("p",[e._v("关于找依赖,可以想到关于模块化的语法: import 、require、@import etc, 通过解析对应的语法寻找相应的依赖。然后通过读取依赖到的文件,根据对应的 loader 进行处理文件,最后根据你的插件配置,分割,压缩或注入等,根据 output config输出到对应的文件夹。")]),e._v(" "),n("p",[e._v("这里推荐一篇 "),n("a",{attrs:{href:"https://juejin.im/entry/5b0e3eba5188251534379615"}},[e._v("webpack原理")]),e._v(" 文章, 下面就提一提我最近遇到的一个很神奇的问题吧")]),e._v(" "),n("h4",{attrs:{id:"%E5%85%B3%E4%BA%8E-tree-shaking"}},[e._v("关于 "),n("a",{attrs:{href:"https://webpack.docschina.org/guides/tree-shaking/"}},[e._v("tree shaking")])]),e._v(" "),n("p",[e._v("想象抖一抖树,枯萎的叶子就会脱落。 这里指的是把没有用到的代码删除掉,从而减小文件的大小。通过这一优化,在引用多个第三方库时,能够大大的减少你的文件大小,但请确定这个包是没有副作用的。")]),e._v(" "),n("blockquote",[n("p",[e._v("什么是副作用?"),n("br"),e._v("\n就是在导入时会自行运行一段函数,从而改变了 window 变量啊或者其他的变量以供导入的包能正常运行, 而不是只单单 export 了变量。")])]),e._v(" "),n("p",[e._v("它是依赖于 es2015 的 "),n("code",{pre:!0},[e._v("静态导入导出( import / export)")]),e._v("。在打包时就会通过 import 确定引用包的 export 导出的某一个变量之一, 在告知没有副作用的情况下,删除掉没有用到的其他的导出代码。")]),e._v(" "),n("blockquote",[n("p",[e._v("静态导入是指一开始就默认加载这个文件,而不是一步一步执行代码判断逻辑,去导入对应文件")])]),e._v(" "),n("p",[e._v("webpack 在生成环境下,默认打开树抖动配置, 如下配置。")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("optimization: {\n\tprovidedExports: true,\n\tusedExports: true,\n\tsideEffects: true,\n\tconcatenateModules: true,\n }\n")])]),e._v(" "),n("p",[n("code",{pre:!0},[e._v("providedExports")]),e._v(" 开启 export 导出收集;"),n("br"),e._v(" "),n("code",{pre:!0},[e._v("usedExportts")]),e._v(" 告诉webpack确定每个模块的已使用导出;"),n("br"),e._v(" "),n("code",{pre:!0},[e._v("concatenateModules")]),e._v(" 告诉webpack查找模块图的各个部分,这些部分可以安全地连接成一个模块;"),n("br"),e._v(" "),n("code",{pre:!0},[e._v("sideEffects")]),e._v(" 告诉webpack识别 sideEffects 标志的 package.json 或规则以跳过模块,这些模块在未使用导出时被标记为不包含副作用, 则可以把无副作用的未使用的导出进行删除。")]),e._v(" "),n("p",[e._v("所以如果你的包无副作用,推荐在 package.json 设置 "),n("code",{pre:!0},[e._v("sideEffects: false")]),e._v(" 开启树抖动。"),n("br"),e._v("\n注意, 它会删掉样式文件,因为样式文件是没有 export 的。所以我们需要声明样式文件是有副作用的。"),n("br"),e._v("\n在 package.json 中设置:")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("sideEffects: [\n\t'*.css'\n]\n")])]),e._v(" "),n("blockquote",[n("p",[e._v("总结,为了利用树木摇晃,你必须:"),n("br"),e._v("\n1 使用ES2015模块语法 (配置 babel 禁止转义 es6 模块语义)"),n("br"),e._v('\n2 将"sideEffects"属性添加到项目的 package.json文件中。'),n("br"),e._v("\n3 配合压缩工具一起使用")])]),e._v(" "),n("p",[n("a",{attrs:{href:"https://github.com/cleverboy32/tree-shaking-css"}},[e._v("demo")]),n("br"),e._v("\n通过配置 "),n("code",{pre:!0},[e._v("webpack.prod.js")]),e._v(" sideEffects 值, 你可以看到 build 时 main.js 文件的大小发生改变。")])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("p",[e._v("###购买服务器")]),e._v(" "),n("p",[e._v("学生购买可以使用阿里云优惠专享, 每个月只要9.9 就好了。这里我用的是学生优惠,机型内存什么都限定好了的。所以- - 没什么可以说的。关于国内外服务器的区别就是,如果你购买了国外的服务器,就可以在云服务器上搭梯子访问国外的网站,也就是翻墙了。")]),e._v(" "),n("h3",{attrs:{id:"%E5%AE%89%E8%A3%85%E7%8E%AF%E5%A2%83"}},[e._v("安装环境")]),e._v(" "),n("p",[e._v("因为服务器默认 linux 系统,所以这里讲怎么配置 linux 云服务环境。"),n("br"),e._v("\n我第一次使用的时候,还以为是要去安装一个界面化桌面,以便我这个命令小白可以操作。但是,对于只有2G 的内存来说安装了之后将会很卡很卡。后来我问学长,他说不要安装界面化,使用命令就好了。")]),e._v(" "),n("p",[e._v("首先关于远程服务器的登录, 默认系统的用户名是 root, 然后登录密码可以在控制台进行修改。如下图点击重置密码。"),n("br"),e._v(" "),n("img",{attrs:{src:"https://img-blog.csdn.net/20180107170054918?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast",alt:"重置密码处"}})]),e._v(" "),n("p",[e._v("重置之后,然后点击远程连接,就可以连接登录到你的服务器上了。这里要将一点,如果你是 mac 电脑的话,可以在你的电脑上通过 ssh 登录到你的服务器。 命令如下:"),n("br"),e._v(" "),n("code",{pre:!0},[e._v("ssh root@你的公网IP")]),e._v(",比如 "),n("code",{pre:!0},[e._v("ssh root@120.78.32.12")]),n("br"),e._v("\n然后输入密码即可连接成功。")]),e._v(" "),n("p",[n("img",{attrs:{src:"https://img-blog.csdn.net/20180107170503333?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast",alt:"登录成功图"}})]),e._v(" "),n("p",[e._v("接下来在终端中输入命令。配置环境。如果你是配置 java 环境,那么可以去谷歌一下如何在 linux 中配置 java 环境,这里我是配置的 node 环境,就讲一下如何配置 node 环境以及 npm。")]),e._v(" "),n("p",[e._v("这里我用的是源码安装。首先安装 node 编译依赖的第三方模块"),n("br"),e._v(" "),n("code",{pre:!0},[e._v("yum -y install gcc make gcc-c++ openssl-devel")])]),e._v(" "),n("p",[e._v("然后下载 node 的源码包"),n("br"),e._v(" "),n("img",{attrs:{src:"https://img-blog.csdn.net/20180107171300036?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast",alt:"这里写图片描述"}})]),e._v(" "),n("p",[e._v("node 官网的源码 包。"),n("br"),e._v(" "),n("code",{pre:!0},[e._v("wget https://nodejs.org/dist/v8.9.4/node-v8.9.4.tar.gz")])]),e._v(" "),n("p",[e._v("你下载的时候可以手动改成当前最新版本。下载后,进行解压 "),n("code",{pre:!0},[e._v("tar -zxvf node-v8.9.4.tar.gz")]),e._v(", 然后进入解压后的文件夹 "),n("code",{pre:!0},[e._v("cd node-v8.9.4")]),e._v(", 依次"),n("br"),e._v(" "),n("code",{pre:!0},[e._v("./configure")]),n("br"),e._v(" "),n("code",{pre:!0},[e._v("make")]),n("br"),e._v(" "),n("code",{pre:!0},[e._v("sudo make install")]),n("br"),e._v("\n这里编译时间会有点久,请耐心等待- -"),n("br"),e._v("\n查看安装成功"),n("br"),e._v(" "),n("img",{attrs:{src:"https://img-blog.csdn.net/20180107172311684?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast",alt:"这里写图片描述"}})]),e._v(" "),n("p",[e._v("安装 npm"),n("br"),e._v("\n同样下载 npm 包"),n("br"),e._v(" "),n("code",{pre:!0},[e._v("wget http://nodejs.org/dist/npm/npm-1.4.9.zip")]),n("br"),e._v("\n解压 "),n("code",{pre:!0},[e._v("tar -zxvf npm-1.4.9.tgz")]),n("br"),e._v("\n查看是否安装成功 "),n("code",{pre:!0},[e._v("npm -v")])]),e._v(" "),n("p",[e._v("这就是 node 环境配置了, 然后就是 mysql 数据库。"),n("br"),e._v(" "),n("a",{attrs:{href:"http://blog.csdn.net/win7system/article/details/53579500"}},[e._v("http://blog.csdn.net/win7system/article/details/53579500")])]),e._v(" "),n("p",[e._v("关于项目的上传,如果你本地编写了代码,想上传至服务器,第一个方式,可以是使用 ftp 上传文件。 第二个方式,就是在你的服务器上搭建一个 git 服务器,通过从服务器推送和克隆项目来获取文件。这里我使用的是第二种方法,参见教程:"),n("br"),e._v(" "),n("a",{attrs:{href:"https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579bc4b458f044ce7afed3df579123eca000"}},[e._v("https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579bc4b458f044ce7afed3df579123eca000")]),n("br"),e._v("\n这里注意一下, 关于 设置 ssh 登录,一定要把创建的 .ssh 文件放到你创建的用户下,如我这里是 git 用户,路径就是"),n("br"),e._v(" "),n("img",{attrs:{src:"https://img-blog.csdn.net/20180107174529969?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast",alt:"这里写图片描述"}})]),e._v(" "),n("p",[e._v("放置在正确位置之后,还要注意项目的归属者也要是 git 用户,这样才会在 git 用户里匹配到对应的 ssh key。也就是下面这一个步骤"),n("br"),e._v(" "),n("img",{attrs:{src:"https://img-blog.csdn.net/20180107174749168?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast",alt:"这里写图片描述"}})]),e._v(" "),n("p",[e._v("还有一点要注意的就是,你再本地推送了代码上 git 服务器之后,想要在云服务器上获取到代码, 需要在服务器上再次克隆 "),n("code",{pre:!0},[e._v("git clone git@server:/srv/sample.git")]),e._v(" 项目,git pull 获取到代码。 这里也可以通过自己配置 git 服务器的钩子函数,使其自动更新代码,我还没配置,就先不说了 - -。")]),e._v(" "),n("p",[e._v("好了,现在现在基本环境配置好了就可以开始开发你的项目啦。")]),e._v(" "),n("p",[e._v("另外附:"),n("br"),e._v("\n项目在服务器上启动了,发现在本地电脑无法通过 ip 访问,那么可能是你的端口号没有开放,需要去服务器上设置安全组。"),n("br"),e._v("\n具体添加方法 ,以及其他一些关于服务器的配置,都可以随时点击右侧的 "),n("strong",[e._v("点我提问")]),e._v(",像云博士提问。 = ="),n("br"),e._v(" "),n("img",{attrs:{src:"https://img-blog.csdn.net/20180107175548703?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast",alt:"这里写图片描述"}})])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("h3",{attrs:{id:"canvas"}},[e._v("canvas")]),e._v(" "),n("p",[e._v("canvas 是 HTML 5 新出的图片元素,它是 2d 绘图 API, 使用 JavaScript 调用API 可以画 lines, shapes, images, text 甚至其他你想话的, 并且不需要什么插件。")]),e._v(" "),n("p",[e._v("它是作为一个画布存在在网页中, 画布上有你绘制的图案,利用 js 你可以实时的改变画布上的图案,以实现动画。")]),e._v(" "),n("p",[e._v("它的支持性也挺好,IE 9 开始支持,Chrome和Opera 9+ 也支持。")]),e._v(" "),n("h3",{attrs:{id:"svg"}},[e._v("svg")]),e._v(" "),n("p",[e._v("SVG 可缩放矢量图形, 是 XML 用来描述二维图形和绘图程序的语言。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。")]),e._v(" "),n("blockquote",[n("p",[e._v("什么是 XML"),n("br"),e._v("\n它是一种类似于 HTML 的标记语言,设计宗旨在于传输数据而不是显示数据。"),n("br"),e._v("\nXML 数据以纯文本格式进行存储,因此提供了一种独立于软件和硬件的数据存储方法。通过读取你可以获取存储于其中的数据")])]),e._v(" "),n("p",[e._v("SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以变形,可以合成,还可以通过滤镜完全改变外观。")]),e._v(" "),n("p",[e._v("SVG提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线,以及其他形状。"),n("br"),e._v("\n一个简单的SVG文档由 "),n("code",{pre:!0},[e._v("")]),e._v(" 根元素和基本的形状元素构成。另外还有一个g元素,它用来把若干个基本形状编成一个组。")]),e._v(" "),n("p",[e._v("eg:")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v('\n\n \n\n \n\n SVG\n\n\n\n')])]),e._v(" "),n("p",[e._v("可以看到 svg 是在内部组合各种元素绘制形成相应的图案。 并且矢量顾名思义是可以自由缩放的,根据屏幕像素点进行缩放,保留了图案的高清晰度。")]),e._v(" "),n("h3",{attrs:{id:"%E6%80%BB%E7%BB%93"}},[e._v("总结")]),e._v(" "),n("p",[e._v("通过以上,我们可以知道 svg 和 canvas 的相同点,它们都是可以绘图的元素,并有自身的用法。"),n("br"),e._v("\ncanvas 是一块画布,纯用 js 去画画的。根据你的 js 编写,动态去渲染画布上的图案,适用一些大量数据交互修改的,比较复杂的动画。由于它仅仅是根据你设定的大小,它是依赖于分辨率的。"),n("br"),e._v("\n而 svg 是一个个元素组成在一起的, 包含 animate 元素,可做一些小小的动画, 它的矢量优点也更适合做一些高保真的静态图片。")])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("h1",{attrs:{id:"%E5%AE%89%E5%85%A8%E6%84%8F%E8%AF%86"}},[e._v("安全意识")]),e._v(" "),n("p",[e._v("你要离开家了, 所有的父母都会说,路上注意安全,可见安全是多么的重要!那么作为软件开发,有哪些危险使我们要知道并避免的呢?"),n("br"),e._v("\n下面我说一些基本的需要知道的安全攻击, 以及应对方案。")]),e._v(" "),n("blockquote",[n("p",[e._v("ps 作为一个安全小白,了解各种各样的防范方案真的太难了,我是真的水🤭。欢迎补充,以增长见识")])]),e._v(" "),n("h2",{attrs:{id:"xss%3A-%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB"}},[e._v("XSS: 跨站脚本攻击")]),e._v(" "),n("p",[e._v("在用户可以输入的地方,并且将作为代码编译时,攻击者可以通过输入一个脚本地址的方式进行对页面注入脚本攻击。解决方式: 任何用户输入的地方都不要相信,对用户输入内容进行转义,如 "),n("code",{pre:!0},[e._v("<")]),e._v(" 使用转义字符串 "),n("code",{pre:!0},[e._v("<")]),e._v(" 代替。")]),e._v(" "),n("h2",{attrs:{id:"csrf%3A-%E8%B7%A8%E7%AB%99%E4%BC%AA%E8%A3%85%E8%AF%B7%E6%B1%82%E6%94%BB%E5%87%BB"}},[e._v("CSRF: 跨站伪装请求攻击")]),e._v(" "),n("p",[e._v("在用户已登录的情况下,伪装用户的身份发起请求,进行相关攻击。解决方式,确认用户的身份。比较好理解的解决方式是: 二次确认,通过用户的二次确认确认请求方为真实用户。然后就是 X-Requested-With 请求标志,通过该请求头设置标志位 "),n("code",{pre:!0},[e._v("ajax")]),e._v(" 请求,可以一定程度阻止跨域的伪装。"),n("code",{pre:!0},[e._v("Anti-CSRF TOKEN")]),e._v(" 方案:通过服务端与客户端唯一的 token 值进行校验,可以看做一个暗号,让别人无法伪装!")]),e._v(" "),n("h2",{attrs:{id:"%E7%BD%91%E7%BB%9C%E5%8A%AB%E6%8C%81"}},[e._v("网络劫持")]),e._v(" "),n("h3",{attrs:{id:"jsonp-%E5%8A%AB%E6%8C%81"}},[e._v("Jsonp 劫持")]),e._v(" "),n("p",[e._v("我们都知道 "),n("code",{pre:!0},[e._v("jsonp")]),e._v(" 就是为了解决跨域的,如果传输信息设计到比较敏感的数据,那么别人可以很方便调用你的接口,获取你的数据,存储在自己的数据库中。解决方法,添加脚本可运行白名单,不要传输敏感信息。")]),e._v(" "),n("h3",{attrs:{id:"http-%E5%8A%AB%E6%8C%81%E3%80%82"}},[e._v("HTTP 劫持。")]),e._v(" "),n("p",[e._v("HTTP 是明文传输,所以运营商可以知道你的代码是什么,然后在里面加一点小广告什么的,改变你的内容。解决方法就是使用 https 协议,可耻的运营商")]),e._v(" "),n("h3",{attrs:{id:"dns-%E5%8A%AB%E6%8C%81"}},[e._v("DNS 劫持")]),e._v(" "),n("p",[e._v("通过域名解析我们才能找到对域名的服务器 ip 地址,劫持了 DNS 就可以给你返回一个错误的 ip 地址。在 dns 解析中,会先在本机搜索域名解析记录,无相关记录像 dns 服务商发起请求。所以要么你本地信息被篡改,要么服务商欺骗你。"),n("br"),e._v(" "),n("a",{attrs:{href:"https://juejin.im/post/5cff858a6fb9a07ed84238ec"}},[e._v("转一篇 DNS 劫持详解链接")])]),e._v(" "),n("h2",{attrs:{id:"%E6%8E%A5%E5%8F%A3%E5%AE%89%E5%85%A8"}},[e._v("接口安全")]),e._v(" "),n("h3",{attrs:{id:"%E6%95%B0%E6%8D%AE%E5%BA%93"}},[e._v("数据库")]),e._v(" "),n("p",[e._v("数据库,插入数据库的参数,在执行 sql 的时候小心它把你整个数据库表给删了。这里的攻击类似 "),n("code",{pre:!0},[e._v("xss")]),e._v(" 攻击,通过传输、拼接一些字符串改变原本的 sql 语义")]),e._v(" "),n("h3",{attrs:{id:"%E6%8E%A8%E9%80%81%E6%B6%88%E6%81%AF"}},[e._v("推送消息")]),e._v(" "),n("p",[e._v("比如短信发送消息,非常的有代表性。通过接口的参数传递,以及最后的发送内容,可以推测出你的推送内容的组合相关方式,就可以通过不良参数,很方便的发送的一些不合法的信息,或有毒链接给用户。解决方式就是不要相信用户传入的任何参数,对参数进行校验,发送内容尽量可选择匹配模式,如 code 值映射,对不合法的参数才有默认内容发送。")]),e._v(" "),n("h2",{attrs:{id:"ddos%EF%BC%9A%E5%88%86%E5%B8%83%E5%BC%8F%E6%8B%92%E7%BB%9D%E6%9C%8D%E5%8A%A1"}},[e._v("DDOS:分布式拒绝服务")]),e._v(" "),n("p",[e._v("就是很多请求大量涌入你的服务器,导致它们都没有空闲可以响应真正的用户请求。通过 TCP 连接,我们知道建立连接需要三次确认,一般攻击者可以伪造 ip, 发起大量连接请求,却又不确认 = = 导致服务器白白等待直到超时。其次可以借用别的用户,在一个大流量用户网站地方的某一个页面上了,通过 "),n("code",{pre:!0},[e._v("xss")]),e._v(" 默认发起对攻击网站的请求,并发送很大的数据,但每次发送很少的字节,这些用户就被当成了肉鸡,然后使其瘫痪。解决防范:增加机器, 对同一个ip 的过多请求进行防范。")])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("p",[e._v("作为一个前端,写页面结构,写CSS怎么命名?"),n("br"),e._v("\n就算不用,但你的了解, 让自己的代码更规范。")]),e._v(" "),n("h5",{attrs:{id:"bem%E6%98%AF%E4%BB%80%E4%B9%88"}},[e._v("BEM是什么")]),e._v(" "),n("p",[e._v("它是css命名的一种规范。试想,你写了一个页面,有input, button, div, 这些元素是什么样的关系,给他们添加样式的时候,怎么知道他们是一个页面的? 怎么知道input 是否放在div里面的? 不要急,这就说到了下面的命名之作用")]),e._v(" "),n("h4",{attrs:{id:"bem%E6%98%AF%E6%80%8E%E4%B9%88%E5%91%BD%E5%90%8D%E7%9A%84"}},[e._v("BEM是怎么命名的")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":"",class:"language-html"}},[n("span",{attrs:{class:"hljs-tag"}},[e._v("<"),n("span",{attrs:{class:"hljs-name"}},[e._v("html")]),e._v(">")]),e._v("\n\t"),n("span",{attrs:{class:"hljs-tag"}},[e._v("<"),n("span",{attrs:{class:"hljs-name"}},[e._v("div")]),e._v(" "),n("span",{attrs:{class:"hljs-attr"}},[e._v("class")]),e._v("="),n("span",{attrs:{class:"hljs-string"}},[e._v('"loggin-from"')]),e._v(">")]),e._v("\n\t\t"),n("span",{attrs:{class:"hljs-tag"}},[e._v("<"),n("span",{attrs:{class:"hljs-name"}},[e._v("input")]),e._v(" "),n("span",{attrs:{class:"hljs-attr"}},[e._v("class")]),e._v("="),n("span",{attrs:{class:"hljs-string"}},[e._v('"loggin-from__input"')]),e._v("/>")]),e._v("\n\t\t"),n("span",{attrs:{class:"hljs-tag"}},[e._v("<"),n("span",{attrs:{class:"hljs-name"}},[e._v("button")]),e._v(" "),n("span",{attrs:{class:"hljs-attr"}},[e._v("class")]),e._v("="),n("span",{attrs:{class:"hljs-string"}},[e._v('"loggin-from__confim"')]),e._v(">")]),e._v("确定"),n("span",{attrs:{class:"hljs-tag"}},[e._v("")]),e._v("\t\n\t"),n("span",{attrs:{class:"hljs-tag"}},[e._v("")]),e._v("\n"),n("span",{attrs:{class:"hljs-tag"}},[e._v("")]),e._v("\n")])]),e._v(" "),n("p",[e._v("通过上面命名可以很直接看出,input 和button 在div 里面。"),n("br"),e._v("\n这里讲 后面的 __input/__confim 这里后面接两个下划线,表示的是div里面的子元素。")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":"",class:"language-html"}},[n("span",{attrs:{class:"hljs-tag"}},[e._v("<"),n("span",{attrs:{class:"hljs-name"}},[e._v("html")]),e._v(">")]),e._v("\n\t"),n("span",{attrs:{class:"hljs-tag"}},[e._v("<"),n("span",{attrs:{class:"hljs-name"}},[e._v("div")]),e._v(" "),n("span",{attrs:{class:"hljs-attr"}},[e._v("class")]),e._v("="),n("span",{attrs:{class:"hljs-string"}},[e._v('"loggin-from--big"')]),e._v(">")]),e._v("\n\t\t"),n("span",{attrs:{class:"hljs-tag"}},[e._v("<"),n("span",{attrs:{class:"hljs-name"}},[e._v("input")]),e._v(" "),n("span",{attrs:{class:"hljs-attr"}},[e._v("class")]),e._v("="),n("span",{attrs:{class:"hljs-string"}},[e._v('"loggin-from__input"')]),e._v("/>")]),e._v("\n\t\t"),n("span",{attrs:{class:"hljs-tag"}},[e._v("<"),n("span",{attrs:{class:"hljs-name"}},[e._v("button")]),e._v(" "),n("span",{attrs:{class:"hljs-attr"}},[e._v("class")]),e._v("="),n("span",{attrs:{class:"hljs-string"}},[e._v('"loggin-from__confim"')]),e._v(">")]),e._v("确定"),n("span",{attrs:{class:"hljs-tag"}},[e._v("")]),e._v("\t\n\t"),n("span",{attrs:{class:"hljs-tag"}},[e._v("")]),e._v("\n"),n("span",{attrs:{class:"hljs-tag"}},[e._v("")]),e._v("\n")])]),e._v(" "),n("p",[e._v("这里说, --big表示添加的描述, 很明显是大的注册表单的样式嘛。")]),e._v(" "),n("h4",{attrs:{id:"bem%E6%80%BB%E7%BB%93"}},[e._v("BEM总结")]),e._v(" "),n("p",[e._v("好了, 这里loggin-from 相当于一块整体(block), 里面包含了元素input/button(element), 还有这个块或者一些元素的修饰big(modifier) => BEM"),n("br"),e._v("\n它一般和sass一起使用,在用@C代表块、 @d代表元素、 @m代码修饰符的时候, css可以这样写了")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v("@C loggin-from {\n\twidth: 100px;\n\theight: 100px;\n\t@m big {\n\t\twidth: 200px;\n\t\theight: 200px;\n\t}\n\t@d input {\n\t\tcolor: red;\n\t}\n\t@d button {\n\t\tcolor: blue;\n\t}\n}\n")])]),e._v(" "),n("p",[e._v("怎么样,这样是不是就不用写那么长了, 而且一看样式文件,就能知道页面布局是什么样的。"),n("br"),e._v(" "),n("strong",[e._v("以上写法, 要通过sass 插件配置的")]),n("br"),e._v("\n这里有一个包 ,可以使用"),n("a",{attrs:{href:"https://www.npmjs.com/package/sass-bem-constructor"}},[e._v("sass-bem-constructor")])])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("h1",{attrs:{id:"cleverboy-%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0"}},[e._v("cleverboy 的学习笔记")])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("undefined",[n("p",[e._v("当我们要完成一个应用的时候,会根据对应的功能划分为许多不同的模块,就像一个论坛,有发帖的模块,评论的模块,js 中的模块也正是如此,一个具体功能的代码抽成一个文件,当你做一个东西的时候需要用到这个功能的时,可以直接使用这个文件,实现功能的分离,并能在多个需要的地方使用。就像是螺丝钉、螺丝帽、垫片一样的,通过组合使用实现出你的产品。")]),e._v(" "),n("p",[e._v("通过直白的描述,我们可以知道,模块化的好处就是,抽离代码,重复使用,如现在很直观的代表 npm 包。")]),e._v(" "),n("p",[e._v("那么模块化到底是怎么实现的呢?")]),e._v(" "),n("p",[e._v("先来了解一下历史,以前的 html 不知道大家还记不记的, 一个html 页面引入了多个 js 文件.")]),e._v(" "),n("pre",{pre:!0},[n("code",{attrs:{"v-pre":""}},[e._v('\n\n\n \n So UI - A Component Library for Vue.js.\n\n\n
\n \\n \\n \\n \\n \\n\\n\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"如上,引入了 a/b/c/d/e 五个文件,这五个文件如果相互之间有依赖,还要注意引入的顺序,并且还需要注意它们里面的变量名,若是重复利用到其他的项目,其他项目也需要注意到以上两点问题。为了解决这一问题,就有了模块化的规范。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"模块化的规范,有 \"), _c('a', {\n attrs: {\n \"href\": \"http://javascript.ruanyifeng.com/nodejs/module.html\"\n }\n }, [_vm._v(\"CMD\")]), _vm._v(\" 和 \"), _c('a', {\n attrs: {\n \"href\": \"http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html\"\n }\n }, [_vm._v(\"AMD\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"CMD (Common Module Definition), 是sea.js在推广过程中对模块定义的规范化产出,主要用于浏览器端。它主要特点是:对于依赖的模块是延迟执行,依赖可以就近书写,等到需要用这个依赖的时候再引入这个依赖,应用有sea.js.\")]), _vm._v(\" \"), _c('p', [_vm._v(\"AMD规范(Asynchronous Module Definition):是 RequireJS 在推广过程中对模块定义的规范化产出,也是主要用于浏览器端。其特点是:依赖前置,需要在定义时就写好需要的依赖,提前执行依赖,应用有require.js\")]), _vm._v(\" \"), _c('p', [_vm._v(\"尽情的猜测,require.js 是怎么弄的呢? 它需要依次的加载模块然后去进行相应的操作,加载模块就是要引入这个文件,那么这里也还是通过动态加载 script 的方法,并通过 onload 去执行后面的回调了。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"我们知道现如今 es6 已经支持模块化了,它分为 export 和 import 两个命令。 export 导出你定义的模块变量, import 引入一个模块变量。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"export { \\n \\tone, \\n \\ttwo\\n }\\n export default three;\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"对应的引入代码\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"import { one, two } three from 'a.js'\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"可以看到 export 可以导出一个默认的变量,也可以导出变量对象,这里引入的时候名字不要写错了。 那么 es6 的模块化通过babel 转码其实就是 umd 模块规范, 它是一个兼容 cmd 和 amd 的模块化规范, 同时还支持老式的“全局”变量规范\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"(function (root, factory) {\\n if (typeof define === 'function' && define.amd) {\\n // AMD\\n define(['jquery'], factory);\\n } else if (typeof exports === 'object') {\\n // Node, CommonJS之类的\\n module.exports = factory(require('jquery'));\\n } else {\\n // 浏览器全局变量(root 即 window)\\n root.returnExports = factory(root.jQuery);\\n }\\n}(this, function ($) {\\n // 方法\\n function myFunc(){};\\n \\n // 暴露公共方法\\n return myFunc;\\n}));\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"那么浏览器是如何支持这种规范的呢?\"), _c('br'), _vm._v(\"\\n其实是实现了根据这种规范定制出来的功能。这里我们就按照 实现了 AMD 规范的 require.js 来讲一下实现代码。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"AMD 定义一个模块的方法是 define(id?, dependencies?, factory)。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"参考define 的方法代码\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" define = function (name, deps, callback) {\\n var node, context;\\n \\n //Allow for anonymous modules\\n if (typeof name !== 'string') {\\n //Adjust args appropriately\\n callback = deps;\\n deps = name;\\n name = null;\\n }\\n\\n //This module may not have dependencies\\n if (!isArray(deps)) {\\n callback = deps;\\n deps = null;\\n }\\n\\n //If no name, and callback is a function, then figure out if it a\\n //CommonJS thing with dependencies.\\n if (!deps && isFunction(callback)) {\\n deps = [];\\n //移除注释\\n //查找 require 语句,收集依赖到 deps 里面\\n // but only if there are function args.\\n if (callback.length) {\\n callback\\n .toString()\\n .replace(commentRegExp, commentReplace)\\n .replace(cjsRequireRegExp, function (match, dep) {\\n deps.push(dep);\\n });\\n\\n //May be a CommonJS thing even without require calls, but still\\n //could use exports, and module. Avoid doing exports and module\\n //work though if it just needs require.\\n //REQUIRES the function to expect the CommonJS variables in the\\n //order listed below.\\n deps = (callback.length === 1 ? ['require'] : ['require', 'exports', 'module']).concat(deps);\\n }\\n }\\n\\n //If in IE 6-8 and hit an anonymous define() call, do the interactive\\n //work.\\n if (useInteractive) {\\n node = currentlyAddingScript || getInteractiveScript();\\n if (node) {\\n if (!name) {\\n name = node.getAttribute('data-requiremodule');\\n }\\n context = contexts[node.getAttribute('data-requirecontext')];\\n }\\n }\\n\\n //Always save off evaluating the def call until the script onload handler.\\n //This allows multiple modules to be in a file without prematurely\\n //tracing dependencies, and allows for anonymous module support,\\n //where the module name is not known until the script onload event\\n //occurs. If no context, use the global queue, and get it processed\\n //in the onscript load callback.\\n if (context) {\\n context.defQueue.push([name, deps, callback]);\\n context.defQueueMap[name] = true;\\n } else {\\n globalDefQueue.push([name, deps, callback]);\\n }\\n };\\n\\n define.amd = {\\n jQuery: true\\n };\\n \\n\\treq.exec = function (text) {\\n /*jslint evil: true */\\n return eval(text);\\n };\\n\\n //Set up with config info.\\n req(cfg);\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"可以知道,这一段代码是解析定义是模块所需的依赖放置 context 的模块定义队列中。然后我们就要通过 req 去执行加载依赖,我们来看看 req 的定义。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"req = requirejs = function (deps, callback, errback, optional) {\\n\\n //Find the right context, use default\\n var context, config,\\n contextName = defContextName;\\n\\n // Determine if have config object in the call.\\n if (!isArray(deps) && typeof deps !== 'string') {\\n // deps is a config object\\n config = deps;\\n if (isArray(callback)) {\\n // Adjust args if there are dependencies\\n deps = callback;\\n callback = errback;\\n errback = optional;\\n } else {\\n deps = [];\\n }\\n }\\n\\n if (config && config.context) {\\n contextName = config.context;\\n }\\n \\n if (config) {\\n context.configure(config); // 完善配置\\n }\\n\\n return context.require(deps, callback, errback); \\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这里的代码把 依赖,回调, 错误处理和配置项都传进来了,进行了配置上的处理之后,我们可以看到最后再去根据配置加载。\"), _c('br'), _vm._v(\"\\n我们再来看 context.require 方法\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"makeRequire: function (relMap, options) {\\n\\t\\toptions = options || {};\\n\\t\\tfunction localRequire(deps, callback, errback) {\\n\\t\\t\\t.... 当前 require 的转换\\n \\t \\treturn localRequire;\\n \\t\\t }\\n\\t\\tcompleteLoad: function (moduleName) {\\n\\t\\t\\t判断 context 的依赖队列,是继续加载还是执行回调\\n\\t\\t}\\n\\t\\t nameToUrl: function (moduleName, ext, skipExt) {\\n\\t\\t \\t根据模块名和配置得到加载的路径\\n\\t\\t }\\n\\t\\t load: function (id, url) {\\n\\t req.load(context, id, url);\\n\\t },\\n\\t execCb: function (name, callback, args, exports) {\\n\\t return callback.apply(exports, args);\\n\\t },\\n\\t\\tonScriptLoad: function (evt) {\\n\\t\\t\\t脚本加载完成后得到数据,执行 context.completeLoad(data.id);\\n\\t\\t}\\n\\t\\tonScriptError: function (evt) {\\n\\t\\t\\t加载错误执行错误处理\\n\\t\\t}\\n\\t};\\n context.require = context.makeRequire();\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"那我们知道其实就是围着这语法的解析,进行一系列的脚本加载,然后执行回调。\")])])\n},staticRenderFns: []}\n\n/***/ }),\n/* 114 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('p', [_vm._v(\"vue 是一个 js 框架,它实现了自己的模板,通过 .vue 文件可以经过编译成一个数据改变驱动视图改变的 js代码。\"), _c('br'), _vm._v(\"\\n那么这其中又是经历了什么样的步骤呢?\")]), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('p', [_vm._v(\"一个 vue 对象是通过 new Vue({options}) 来得到的,也就是构造函数了。我们来看这个函数\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"function Vue (options) {\\n if (process.env.NODE_ENV !== 'production' &&\\n !(this instanceof Vue)\\n ) {\\n warn('Vue is a constructor and should be called with the `new` keyword')\\n }\\n this._init(options)\\n}\\n\\n// 这里是一系列对这个函数进行的继承\\ninitMixin(Vue)\\nstateMixin(Vue)\\neventsMixin(Vue)\\nlifecycleMixin(Vue)\\nrenderMixin(Vue)\\n\\nexport default Vue\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"可以看到这个 Vue 构造函数,它经历了 5 个系列的mixin,并在新创建时会运行 _init(options) 方法。\"), _c('br'), _vm._v(\"\\n那么我们来看看, 这五个 mixin 分别做了啥。\")]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E4%B8%80%E4%B8%AA-initmixin\"\n }\n }, [_vm._v(\"第一个 initMixin\")]), _vm._v(\" \"), _c('p', [_vm._v(\"它只做了一件事, 定义了 _init 方法,那么你就知道创造一个Vue 实例,它执行的 _init 方法就是上面这个方法了。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"Vue.prototype._init = function (options?: Object) {\\n....\\n}\\n\")])]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E4%BA%8C%E4%B8%AA-statemixin\"\n }\n }, [_vm._v(\"第二个 stateMixin\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" Object.defineProperty(Vue.prototype, '$data', dataDef) // 能够返回 data\\n Object.defineProperty(Vue.prototype, '$props', propsDef) // 能够返回 props\\n Vue.prototype.$set = set // 就是我们用的 this.$set(this.people, 'name', ‘clever')方法, 下同。\\n Vue.prototype.$delete = del\\n Vue.prototype.$watch = function (\\n ....\\n }\\n\")])]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E4%B8%89%E4%B8%AA-eventsmixin\"\n }\n }, [_vm._v(\"第三个 eventsMixin\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"Vue.prototype.$on = function (eventname, fn) {\\n....\\n}\\nVue.prototype._$once = function (eventname, fn) {\\n // 监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。\\n}\\nVue.prototype._off = function (event, fn) {\\n// 移除自定义事件监听器。\\n}\\nVue.prototype.$emit = function (event) {\\n// 触发一个事件\\n}\\n\")])]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E5%9B%9B%E4%B8%AA-lifecyclemixin\"\n }\n }, [_vm._v(\"第四个 lifecycleMixin\"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/0227c8c15285fbd179573e7cd8cb4718.png\",\n \"alt\": \"在这里插入图片描述\"\n }\n })]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E4%BA%94%E4%B8%AA-rendermixin\"\n }\n }, [_vm._v(\"第五个 renderMixin\"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/715399a9ac35cef7c3aca2d3242ca5a3.png\",\n \"alt\": \"在这里插入图片描述\"\n }\n })]), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('p', [_vm._v(\"好, 这个 Vue 继承了这些方法,它已经是一个完整的 Vue 了,而新创建的时候要执行 _init 方法了, 现在我们来看看这个方法里面做了写啥\")]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"vm._uid = uid++ 创建 uid\")]), _vm._v(\" \"), _c('li', [_vm._v(\"合并 options\")]), _vm._v(\" \"), _c('li', [_vm._v(\"initLifecycle\"), _c('br'), _vm._v(\"\\ninitEvents(vm)\"), _c('br'), _vm._v(\"\\ninitRender(vm)\"), _c('br'), _vm._v(\"\\ncallHook(vm, 'beforeCreate')\"), _c('br'), _vm._v(\"\\ninitInjections(vm) // resolve injections before data/props\"), _c('br'), _vm._v(\"\\ninitState(vm)\"), _c('br'), _vm._v(\"\\ninitProvide(vm) // resolve provide after data/props\"), _c('br'), _vm._v(\"\\ncallHook(vm, 'created')\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"关于 initLifecycle\\n vm.$parent = parent\\n vm.$root = parent ? parent.$root : vm\\n vm.$children = []\\n vm.$refs = {}\\n vm._watcher = null\\n vm._inactive = null\\n vm._directInactive = false\\n vm._isMounted = false\\n vm._isDestroyed = false\\n vm._isBeingDestroyed = false\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"initEvents\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" vm._events = Object.create(null)\\n vm._hasHookEvent = false\\n // init parent attached events\\n const listeners = vm.$options._parentListeners\\n if (listeners) {\\n updateComponentListeners(vm, listeners)\\n }\\n 就是判断父级是否有事件监听,然后给父级进行监听事件\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"initRender\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" vm._vnode = null // the root of the child tree\\n vm._staticTrees = null // v-once cached trees\\n const options = vm.$options\\n const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree\\n const renderContext = parentVnode && parentVnode.context\\n vm.$slots = resolveSlots(options._renderChildren, renderContext)\\n vm.$scopedSlots = emptyObject\\n // 实例绑定 createElement 方法,以便可以正常在内部渲染\\n // 参数顺序 tag, data, children, normalizationType, alwaysNormalize\\n // 内部使用从模板编译而来的渲染函数\\n \\n vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)\\n // 公共版本必须是 normalization 的渲染函数\\n vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)\\n\\n // $attrs & $listeners 应该被监听热更新\\n const parentData = parentVnode && parentVnode.data\\n\\n if (process.env.NODE_ENV !== 'production') {\\n defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {\\n !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)\\n }, true)\\n defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {\\n !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)\\n }, true)\\n } else {\\n defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)\\n defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)\\n }\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_c('p', [_vm._v(\"callHook(vm, 'beforeCreate') 执行 beforeCreate 函数\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"initInjections(vm) 收集注入的依赖\")])])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" const result = resolveInject(vm.$options.inject, vm)\\n if (result) {\\n toggleObserving(false)\\n Object.keys(result).forEach(key => {\\n if (process.env.NODE_ENV !== 'production') {\\n defineReactive(vm, key, result[key], () => {\\n warn(\\n \\t`避免直接改变注入的值,因为将会重新渲染所提供这个值的组件, \\n \\t改变的值是: \\\"${key}\\\",\\n vm\\n )\\n })\\n } else {\\n defineReactive(vm, key, result[key])\\n }\\n })\\n toggleObserving(true)\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"initState 监听值收集依赖\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" vm._watchers = []\\n const opts = vm.$options\\n if (opts.props) initProps(vm, opts.props) // 赋值 props 数据并收集依赖\\n if (opts.methods) initMethods(vm, opts.methods) // 赋值 vue 的各个 method\\n if (opts.data) {\\n initData(vm) // 收集依赖\\n } else {\\n observe(vm._data = {}, true /* asRootData */)\\n }\\n if (opts.computed) initComputed(vm, opts.computed) // 收集依赖\\n if (opts.watch && opts.watch !== nativeWatch) {\\n initWatch(vm, opts.watch) // 初始化你写的监听对象\\n }\\n \\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"initProvide\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" const provide = vm.$options.provide\\n if (provide) {\\n vm._provided = typeof provide === 'function'\\n ? provide.call(vm)\\n : provide\\n }\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"callHook(vm, 'created') 执行 created 函数\")])]), _vm._v(\" \"), _c('blockquote', [_c('p', [_vm._v(\"这就是 _init 中各个函数所做的了。 我们可以看到总结过来就是\"), _c('br'), _vm._v(\"\\n1.初始化了生命状态\"), _c('br'), _vm._v(\"\\n2.进行事件上的监听\"), _c('br'), _vm._v(\"\\n3.渲染视图的初始化;收集所用到的父组件的数据或事件\"), _c('br'), _vm._v(\"\\n4.调用你写的 beforeCreate 方法\"), _c('br'), _vm._v(\"\\n5.initState, 处理了 vue 中的各种数据(props/data/methods.....), 也在这一步针对这些数据进行了依赖收集,数据更新绑定\"), _c('br'), _vm._v(\"\\n6.初始化了 provide 的值, 也可以看出它没有被收集依赖, 是不会影响视图改变的\"), _c('br'), _vm._v(\"\\n7.调用了你写的 created 方法了。\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"以上,就是你 let app = new Vue() 这一步所发生的所有事情了。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"那通过平时的使用我们知道,我们是通过调用 $mounted 能把它挂载上页面。所以接下来我们就可以来看看 vue 自己的 $mount 都做了些什么?\")]), _vm._v(\" \"), _c('p', [_vm._v(\"答: 就是把 template 或直接写的 render 函数,进行指令、事件等vue 中的语法解析编译成一个 AST 树。通过这个树,通过之前 initRender 中的 $createElement 方法可以生成虚拟DOM, 然后添加到页面中出,不就渲染出来了么。 如果大家使用过 Vue 的 $createElement 方法,相信就知道这个 ast 是怎么一个结构了,拿示例的来说\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"createElement(\\n 'div',\\n [\\n '先写一些文字',\\n createElement('h1', '一则头条'),\\n createElement(MyComponent, {\\n props: {\\n someProp: 'foobar'\\n }\\n })\\n ]\\n)\\n\")])]), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('p', [_vm._v(\"说完了整个过程,现在还比较疑惑的就是它的收集依赖,然后数据改变引起的视图改变到底怎么做呢?\")]), _vm._v(\" \"), _c('p', [_vm._v(\"也就是说我们要实现一个模式,vm 可能 data 对象中的一个值,比如 name 改变了,然后就调用重新渲染的函数,这里为了性能,是生成了一个虚拟 Dom, 然后比较哪里改变了进行相应的替换。\"), _c('br'), _vm._v(\"\\n把这个模式抽象出来,就是我们需要一个\")]), _vm._v(\" \"), _c('p', [_vm._v(\"先说具体实现: 我们视图更新依赖到的值收集起来,这里把每一个依赖到的值称作 dep。每个依赖订阅与它有关的 vue 的 watcher 中心, 这里把 dep 所订阅的 watcher 叫做 sub。 那么 dep 被改变的时候,获取它订阅了那些 watcher, 通知他们进行 update 视图啦。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"可以看我画的简图\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/417c23088cb0224c6a4464651452c604.png\",\n \"alt\": \"在这里插入图片描述\"\n }\n }), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/59c0e76f684052df524761ee8f4f6942.png\",\n \"alt\": \"在这里插入图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"这就是依赖对象 和 一个 watcher 对象所涉及到的处理了。\"), _c('br'), _vm._v(\"\\nVue 中又是怎么把一个个的属性,进行操作变成依赖的呢?\"), _c('br'), _vm._v(\"\\n对应它的源码就是 defineReactive 方法。源码如图:\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"export function defineReactive (obj, key, val, customSetter, shallow) {\\n const dep = new Dep()\\n \\n // 迎合预定义的getter / setter\\n const getter = property && property.get\\n const setter = property && property.set\\n if ((!getter || setter) && arguments.length === 2) {\\n val = obj[key]\\n }\\n \\n let childOb = !shallow && observe(val)\\n Object.defineProperty(obj, key, {\\n enumerable: true,\\n configurable: true,\\n get: function reactiveGetter () {\\n const value = getter ? getter.call(obj) : val\\n if (Dep.target) {\\n dep.depend()\\n if (childOb) {\\n childOb.dep.depend()\\n if (Array.isArray(value)) {\\n dependArray(value)\\n }\\n }\\n }\\n return value\\n },\\n set: function reactiveSetter (newVal) {\\n const value = getter ? getter.call(obj) : val\\n if (newVal === value || (newVal !== newVal && value !== value)) {\\n return\\n }\\n if (setter) {\\n setter.call(obj, newVal)\\n } else {\\n val = newVal\\n }\\n childOb = !shallow && observe(newVal)\\n dep.notify()\\n }\\n })\\n}\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这里就是用的 Object.defineProperty 方法,它可以重写对象的属性的 get 和 set 方法。 当这个属性在 Vue 中被获取的时候,就开始收集依赖,把它收集在这个 vm 的 watcher 中心,并且让它订阅这个 watcher 。当这个属性被重新设置时, 就通知它所订阅的对象去更新。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"大致要知道的就是这些了。关于具体是怎么实现把 template 编译成 ast 树, 具体是怎么把事件绑定上去的,你可以尽情的去猜想和推测,或者去看看具体的实现方式。但是 VUE 框架总体来说所做的就是这些事情了, 如果有觉得本文写的不清楚的地方可以提哈 = =\")])])\n},staticRenderFns: []}\n\n/***/ }),\n/* 115 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('h3', {\n attrs: {\n \"id\": \"%E4%BB%80%E4%B9%88%E6%98%AF-ssl-%E8%AF%81%E4%B9%A6\"\n }\n }, [_vm._v(\"什么是 SSL 证书\")]), _vm._v(\" \"), _c('p', [_vm._v(\"SSL 证书是数字证书,是由证书认证机构(CA)对证书申请者真实身份验证之后,用CA的根证书对申请人的一些基本信息以及申请人的公钥进行签名(相当于加盖发证书机构的公章)后形成的一个数字文件。\"), _c('br'), _vm._v(\"\\n通俗一点, 就是包含了所使用的服务器的信息和公钥,这些信息是公开的。 而私钥是由证书申请者自己保存的,是保密的。\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E6%80%8E%E4%B9%88%E9%85%8D%E7%BD%AE%E5%91%A2\"\n }\n }, [_vm._v(\"怎么配置呢\")]), _vm._v(\" \"), _c('p', [_vm._v(\"要在服务器要发送SSL证书,那么在服务器上配置。首先你得有一个\"), _c('code', {\n pre: true\n }, [_vm._v(\"证书\")]), _vm._v(\"!\"), _c('br'), _vm._v(\"\\n证书如何获取,我也是百度了很多,也有很多免费的网站,ssl for free, freessl.org, 但是发现证书没有.crt 文件,或者验证域名不方便。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"######这里先讲一下 SSL 证书包含的几个文件:\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\".key\")]), _vm._v(\" => 私钥\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\".csr\")]), _vm._v(\" => 公钥,让你的证书去认证的时,可以把它发送给权威机构认证。\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\".crt\")]), _vm._v(\" => 证书了\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里可以自己去体验一下用 OpenSSL 给自己生成一个证书。需自行安装 openssl 软件\"), _c('br'), _vm._v(\" \"), _c('a', {\n attrs: {\n \"href\": \"https://www.cnblogs.com/yjmyzz/p/openssl-tutorial.html\"\n }\n }, [_vm._v(\"openssl 给自己颁发证书的步骤\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"openssl 的证书既然是自己给自己颁发的,那么就不具有权威性,在连接时会向客户端提示不是安全的链接。也没有小绿锁。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"最后我发现腾讯云有免费的证书可以用。\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/6c5cab65c69586f9228ecf2896a12ad0.jpeg\",\n \"alt\": \"这里写图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"申请好证书之后, 如图\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/6aa539ccc93a564348a6b975a998cf80.jpeg\",\n \"alt\": \"这里写图片描述\"\n }\n }), _c('br'), _vm._v(\"\\n点击详情可以看到 \"), _c('a', {\n attrs: {\n \"href\": \"https://cloud.tencent.com/document/product/400/4143\"\n }\n }, [_vm._v(\"指引文档\")]), _vm._v(\", 里面的服务器配置方法就很全面了, 不管你是不是用它的证书,都可以按照这样去配。\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B-ssl-%E5%B7%A5%E4%BD%9C\"\n }\n }, [_vm._v(\"了解一下 SSL 工作\")]), _vm._v(\" \"), _c('p', [_vm._v(\"我们知道,在客户端和服务器之间的请求,就是来回发送数据,普通的 HTTP 协议是没有对数据进行加密的,那么可能被第三方截取到你的请求,改变你们的通信数据或者冒充身份发送信息给你。 哇,突然感觉这些很常见 = =\")]), _vm._v(\" \"), _c('p', [_vm._v(\"HTTPS 就是一种安全的通信了,它会加密你的数据, 使第三方无法获取,并在建立通信的握手阶段,互相确认身份, 使别人无法冒充身份。 SSL 证书就是使用在 握手阶段,通过证书的信息,确认服务器身份。\"), _c('br'), _vm._v(\"\\n具体如下:\")]), _vm._v(\" \"), _c('p', [_c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/29104c17fe7cebb091ec79ad1714bc32.png\",\n \"alt\": \"这里写图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"详细讲解每一步就是:\"), _c('br'), _vm._v(\"\\n第一步:客户端 say hello, 向服务端发送自己生成的 random 数,和自己支持的加密方法。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"第二步:服务端接收消息后,又向客户端发送自己生成的 random 数、SSL 证书,确定使用的加密方法。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"第三步:客户端读取证书信息,确认证书有效,然后自己再生成一个 random 数,并使用证书的公钥进行加密,发送给服务端。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"第四步:服务端使用自己本地的私钥,解密获取客户端的随机数。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"第五步:客户端和服务端使用这三个随机数生成 \"), _c('code', {\n pre: true\n }, [_vm._v(\"对话密钥\")]), _vm._v(\", 用来加密接下来的对话过程。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"可以看到下面英文有提到 session。 因为如果每次建立连接都去进行这五步,那么会很浪费时间。 所以这里有 sessionID 和 session ticket 两种。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"session ID,记录有本次的握手存在,再次发送信息时,客户端发送该ID,服务器确认该编号存在,双方就不再进行握手阶段剩余的步骤,而直接用已有的对话密钥进行加密通信。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"session ID是目前所有浏览器都支持的方法,但是它的缺点在于session ID往往只保留在一台服务器上。所以,如果客户端的请求发到另一台服务器,就无法恢复对话。session ticket就是为了解决这个问题而诞生的,目前只有Firefox和Chrome浏览器支持。session ticket是加密的,只有服务器才能解密,其中包括本次对话的主要信息,比如对话密钥和加密方法。当服务器收到session ticket以后,解密后就不必重新生成对话密钥了。\")])])\n},staticRenderFns: []}\n\n/***/ }),\n/* 116 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('p', [_vm._v(\"###\"), _c('strong', [_vm._v(\"什么是PWA\")]), _c('br'), _vm._v(\"\\n先说一下全名,progressive web app: 渐进式网页应用。这是谷歌推出的,我是这样理解的:\")]), _vm._v(\" \"), _c('ul', [_c('li', [_c('p', [_vm._v(\"我们一般写web应用,在 pc 上是没有缓存的,打开页面的时去请求数据。\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"第二个也没有像 app 一样的小图标放在桌面,一点开就进入了应用,而是通过打开浏览器输入网址,\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"第三个就是,不能像 app 一样给用户推送消息,像微博会跟你推送说有谁评论了你的微博之类的功能。\")])])]), _vm._v(\" \"), _c('p', [_vm._v(\"而谷歌推出的 pwa,就是具有这些了这些特点, 使我们的 web 应用,能够像一款 app 一样使用。并且对比与 app, 它不用复杂的安装,也不用下载更新包,刷新页面就可以了(注意到缓存的处理)。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"####\"), _c('strong', [_vm._v(\"那么这些功能分别是怎么实现的呢?\")]), _c('br'), _vm._v(\" \"), _c('strong', [_vm._v(\"关于缓存\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"其实这个就是 我们平时做的 Session 啊、localStorage、CacheStorage 之类的。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里用的就是 \"), _c('a', {\n attrs: {\n \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/CacheStorage\"\n }\n }, [_vm._v(\"cacheStorage\")]), _vm._v(\" 缓存,它提供了一个ServiceWorker类型的工作者或window范围可以访问的所有命名缓存的主目录, 并维护字符串的映射名称到相应的 Cache 对象。\"), _c('br'), _vm._v(\"\\n主要方法包括:\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20171112212302073?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n }), _c('br'), _vm._v(\"\\n有了这些方法你可以对你的缓存进行操作。目前还在草案状态,仅火狐和谷歌浏览器支持此特性。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"PWA是通过 ServiceWorker 访问 cache ,所以需要注册 ServiceWorker 工作者。在之前别忘记判断浏览器是否支持。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"if ('serviceWorker' in navigator) {\\n\\tnavigator.serviceWorker.register(sw.js) // 注册sw.js 文件中变成的服务对象,返回注册成功的对象\\n\\t.then(function(swReg){\\n swRegistration = swReg;\\n }).catch(function(error) {\\n console.error('Service Worker Error', error);\\n });\\n}\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这个 \"), _c('a', {\n attrs: {\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\"\n }\n }, [_vm._v(\"Service Worker\")]), _vm._v(\" 服务工作者就厉害了,它相当于浏览器和网络之间的代理服务器,可以拦截网络请求,做一些你可能需要的处理(请求资源从缓存中获取等)。\")]), _vm._v(\" \"), _c('ul', [_c('li', [_c('p', [_vm._v(\"它能够创建有效的离线体验,拦截网络请求,并根据网络是否可用判断是否使用缓存数据或者更新缓存数据。\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"它们还允许访问推送的通知和后台的API。\")])])]), _vm._v(\" \"), _c('p', [_vm._v(\"关于 sw.js 中具体的缓存的代码:\")]), _vm._v(\" \"), _c('p', [_vm._v(\"创建需要缓存的文件\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"'use strict'\\nlet cacheName = 'pwa-demo-assets'; // 缓存名字\\nlet imgCacheName = 'pwa-img';\\nlet filesToCache;\\nfilesToCache = [ // 所需缓存的文件\\n '/',\\n '/index.html',\\n '/scripts/app.js',\\n '/assets/imgs/48.png',\\n '/assets/imgs/96.png',\\n '/assets/imgs/192.png',\\n '/dist/js/app.js',\\n '/manifest.json'\\n];\\n\\nself.addEventListener('install', function(e) {\\n e.waitUntil(\\n\\t // 安装服务者时,对需要缓存的文件进行缓存\\n caches.open(cacheName).then(function(cache) {\\n return cache.addAll(filesToCache);\\n })\\n );\\n});\\n\\n\\nself.addEventListener('fetch', (e) => {\\n // 判断地址是不是需要实时去请求,是就继续发送请求\\n if (e.request.url.indexOf('/api/400/200') > -1) {\\n e.respondWith(\\n caches.open(imgCacheName).then(function(cache){\\n return fetch(e.request).then(function (response){\\n cache.put(e.request.url, response.clone()); // 每请求一次缓存更新一次新加载的图片\\n return response;\\n });\\n })\\n );\\n } else {\\n e.respondWith(\\n\\t // 匹配到缓存资源,就从缓存中返回数据\\n caches.match(e.request).then(function (response) {\\n return response || fetch(e.request);\\n })\\n );\\n }\\n\\n});\\n\")])]), _vm._v(\" \"), _c('p', [_c('strong', [_vm._v(\"这里进而就引入到 pwa 的推送通知功能。这都是通过 ServiceWorker 去实现的。\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"基本原理是,你的客户端要和推送服务进行绑定,会生成一个绑定后的推送服务API接口,服务端调用此接口,发送消息。同时,浏览器也要支持推送功能,在注册 sw 时, 加上推送功能的判断。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"if ('serviceWorker' in navigator && 'PushManager' in window) {\\n\\tnavigator.serviceWorker.register(sw.js)\\n\\t.then(function(swReg) {\\n swRegistration = swReg;\\n }).catch(function(error) {\\n console.error('Service Worker Error', error);\\n });\\n } else {\\n console.warn('Push messaging is not supported');\\n }\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"PushManager 注册好之后, 那么要做的就是浏览器和服务器的绑定了。\")]), _vm._v(\" \"), _c('p', [_c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20171112203347222?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n }), _c('br'), _vm._v(\"\\n此图是用户订阅某个应用程序的推送服务。\"), _c('br'), _vm._v(\"\\n客户端传入应用程序服务器公钥,向将生成端点的 \"), _c('code', {\n pre: true\n }, [_vm._v(\"webpush 服务器\")]), _vm._v(\"( 这是谷歌自己实现的一个推送功能的服务器)发出网络请求,将生成的端点(一个推送服务)与应用程序公钥关联,并将端点返回给应用程序。浏览器会将此端点添加到 PushSubscription,通过 promise异步成功时,可以将它的信息保存到你的数据库。\")]), _vm._v(\" \"), _c('p', [_c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20171112203753820?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n }), _c('br'), _vm._v(\"\\n服务器发送推送的时候,请求相关接口,验证成功后推送服务会发消息给客户端。\")]), _vm._v(\" \"), _c('p', [_c('strong', [_vm._v(\"最后关于桌面小图标\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这个可以说是非常简单了,就是一个manifest.json配置文件,然后在页面引入此文件就好了\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"\\n\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"关于\"), _c('a', {\n attrs: {\n \"href\": \"https://developers.google.com/web/fundamentals/web-app-manifest/\"\n }\n }, [_vm._v(\"清单内容\")]), _vm._v(\"这里简单介绍一下:\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"{\\n \\\"short_name\\\": \\\"pwa\\\",\\n \\\"name\\\": \\\"pwa - demo\\\", // 应用名称\\n \\\"icons\\\": [ // 应用显示图标,根据容器大小适配\\n {\\n \\\"src\\\": \\\"assets/imgs/48.png\\\",\\n \\\"type\\\": \\\"image/png\\\",\\n \\\"sizes\\\": \\\"48x48\\\"\\n },\\n {\\n \\\"src\\\": \\\"assets/imgs/96.png\\\",\\n \\\"type\\\": \\\"image/png\\\",\\n \\\"sizes\\\": \\\"96x96\\\"\\n },\\n {\\n \\\"src\\\": \\\"assets/imgs/192.png\\\",\\n \\\"type\\\": \\\"image/png\\\",\\n \\\"sizes\\\": \\\"192x192\\\"\\n }\\n ],\\n \\\"background_color\\\": \\\"#2196F3\\\", // 刚打开页面时的背景\\n \\\"theme_color\\\": \\\"#2196F3\\\", // 主题颜色\\n \\\"display\\\": \\\"standalone\\\", //独立显示\\n \\\"start_url\\\": \\\"index.html?launcher=true\\\" // 启动的页面\\n}\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"好了, 如果感兴趣赶快上手吧。\"), _c('br'), _vm._v(\"\\n可以查看\"), _c('a', {\n attrs: {\n \"href\": \"https://developers.google.com/web/progressive-web-apps/\"\n }\n }, [_vm._v(\"谷歌官方教程\")]), _vm._v(\"。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里说一下坑的点,\\tPWA应用需要在本地localhost:8080 上运行或者 https 协议下, 要保证你的页面是安全页面。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"添加桌面时,确保你的谷歌浏览器可以显示弹出通知。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"如果你要自己实现推送,自己服务器要有公钥和私钥的获取, 这里可以通过 https://web-push-codelab.glitch.me 获取, 用 chrome 的 \"), _c('a', {\n attrs: {\n \"href\": \"https://github.com/zaru/webpush\"\n }\n }, [_vm._v(\"webpush\")]), _vm._v(\" 推送。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里也可以看一下我的\"), _c('a', {\n attrs: {\n \"href\": \"https://github.com/cleverboy32/chorme-PwaDemo\"\n }\n }, [_vm._v(\" GitHub 项项目 \")]), _vm._v(\",官方也有很多例子。\")])])\n},staticRenderFns: []}\n\n/***/ }),\n/* 117 */,\n/* 118 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(88);\n\n/***/ }),\n/* 119 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(89);\n\n/***/ }),\n/* 120 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(90);\n\n/***/ }),\n/* 121 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(91);\n\n/***/ }),\n/* 122 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(92);\n\n/***/ }),\n/* 123 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(93);\n\n/***/ }),\n/* 124 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(94);\n\n/***/ }),\n/* 125 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(95);\n\n/***/ }),\n/* 126 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(96);\n\n/***/ }),\n/* 127 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(97);\n\n/***/ }),\n/* 128 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(98);\n\n/***/ }),\n/* 129 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(99);\n\n/***/ }),\n/* 130 */\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports = __webpack_require__(100);\n\n/***/ })\n]));\n\n\n// WEBPACK FOOTER //\n// static/js/0.5209f36607d516a56b7a.js","var map = {\n\t\"./aliyun-server.md\": 118,\n\t\"./bem.md\": 119,\n\t\"./canvas-svg.md\": 120,\n\t\"./code-format.md\": 121,\n\t\"./module.md\": 122,\n\t\"./postcss-plugin.md\": 123,\n\t\"./pwa.md\": 124,\n\t\"./readme.md\": 125,\n\t\"./safe.md\": 126,\n\t\"./ssl.md\": 127,\n\t\"./typescript.md\": 128,\n\t\"./vue.md\": 129,\n\t\"./webpack.md\": 130\n};\nfunction webpackContext(req) {\n\treturn __webpack_require__(webpackContextResolve(req));\n};\nfunction webpackContextResolve(req) {\n\tvar id = map[req];\n\tif(!(id + 1)) // check for number or string\n\t\tthrow new Error(\"Cannot find module '\" + req + \"'.\");\n\treturn id;\n};\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = 79;\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs ^\\.\\/.*\\.md$\n// module id = 79\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-67257b53\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./aliyun-server.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/aliyun-server.md\n// module id = 88\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-7bd31945\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./bem.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/bem.md\n// module id = 89\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-71895c6c\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./canvas-svg.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/canvas-svg.md\n// module id = 90\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-1044a650\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./code-format.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/code-format.md\n// module id = 91\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-b4ed7f62\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./module.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/module.md\n// module id = 92\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-021dff84\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./postcss-plugin.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/postcss-plugin.md\n// module id = 93\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-d6a1b6d6\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./pwa.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/pwa.md\n// module id = 94\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-7f26a466\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./readme.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/readme.md\n// module id = 95\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-7abc0d0e\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./safe.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/safe.md\n// module id = 96\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-cccb5efa\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./ssl.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/ssl.md\n// module id = 97\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-11390c96\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./typescript.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/typescript.md\n// module id = 98\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-c25c4a6e\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./vue.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/vue.md\n// module id = 99\n// module chunks = 0","var Component = require(\"!../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-3e6ea2fc\\\",\\\"hasScoped\\\":false}!../../node_modules/vue-loader/lib/selector?type=template&index=0!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./webpack.md\"),\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/webpack.md\n// module id = 100\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('h2', {\n attrs: {\n \"id\": \"%E5%86%99-css-%E9%81%87%E5%88%B0%E4%BA%86%E9%97%AE%E9%A2%98%E6%80%8E%E4%B9%88%E5%8A%9E%EF%BC%9F\"\n }\n }, [_vm._v(\"写 css 遇到了问题怎么办?\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E5%A6%82%E4%BD%95%E8%AE%A9-css-%E5%86%99%E7%9A%84%E6%9B%B4%E8%BD%BB%E6%9D%BE%EF%BC%9F\"\n }\n }, [_vm._v(\"如何让 css 写的更轻松?\")]), _vm._v(\" \"), _c('h4', {\n attrs: {\n \"id\": \"postcss-ui-theme%EF%BC%8C%E8%AE%A9%E4%BD%A0%E5%AE%9E%E7%8E%B0%E7%B1%BB-sass-%E8%AF%AD%E6%B3%95%EF%BC%8C%E4%B8%80%E4%B8%AA%E6%8F%92%E4%BB%B6%E5%B0%B1%E8%83%BD%E5%81%9A%E5%88%B0%EF%BC%81\"\n }\n }, [_c('a', {\n attrs: {\n \"href\": \"https://github.com/cleverboy32/postcss-ui-theme\"\n }\n }, [_vm._v(\"postcss-ui-theme\")]), _vm._v(\",让你实现类 sass 语法,一个插件就能做到!\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E5%A6%82%E4%BD%95%E6%94%B9%E5%8F%98-css-%E4%B8%BB%E9%A2%98-%EF%BC%9F\"\n }\n }, [_vm._v(\"如何改变 css 主题 ?\")]), _vm._v(\" \"), _c('h4', {\n attrs: {\n \"id\": \"postcss-ui-theme-%EF%BC%8C-%E5%8F%AF%E6%89%93%E5%8C%85-css4-%E5%8F%98%E9%87%8F%E8%A2%AB%E4%BF%9D%E7%95%99%EF%BC%8C%E4%B8%8D%E4%BB%85%E5%8F%AF%E5%9C%A8%E5%BC%95%E7%94%A8%E6%97%B6%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8%E6%96%B0%E7%9A%84%E5%8F%98%E9%87%8F%E6%96%87%E4%BB%B6%E8%A6%86%E7%9B%96%E6%94%B9%E5%8F%98%E4%B8%BB%E9%A2%98%EF%BC%8C%E8%BF%98%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87-js-%E8%BF%9B%E8%A1%8C%E6%9B%B4%E6%94%B9%EF%BC%81%EF%BC%81%EF%BC%81\"\n }\n }, [_c('a', {\n attrs: {\n \"href\": \"https://github.com/cleverboy32/postcss-ui-theme\"\n }\n }, [_vm._v(\"postcss-ui-theme \")]), _vm._v(\", 可打包 css4 变量被保留,不仅可在引用时直接使用新的变量文件覆盖改变主题,还可以通过 js 进行更改!!!\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"css-%E5%9C%A8%E5%88%AB%E7%9A%84%E9%A1%B9%E7%9B%AE%E8%A2%AB%E7%BC%96%E8%AF%91%EF%BC%8C%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84%E6%89%BE%E4%B8%8D%E5%88%B0%EF%BC%9F\"\n }\n }, [_vm._v(\"css 在别的项目被编译,文件路径找不到?\")]), _vm._v(\" \"), _c('h4', {\n attrs: {\n \"id\": \"postcss-ui-theme%EF%BC%8C-%E9%9B%86%E6%88%90-postcss-assets-%E6%8F%92%E4%BB%B6%EF%BC%8C%E9%80%9A%E8%BF%87%E9%85%8D%E7%BD%AE-%E6%96%87%E4%BB%B6%E6%9F%A5%E6%89%BE%E8%B7%AF%E5%BE%84%EF%BC%8C%E8%A7%A3%E5%86%B3%E5%BC%95%E7%94%A8%E6%96%87%E4%BB%B6%E6%89%BE%E4%B8%8D%E5%88%B0%E9%97%AE%E9%A2%98%EF%BC%81%EF%BC%81\"\n }\n }, [_c('a', {\n attrs: {\n \"href\": \"https://github.com/cleverboy32/postcss-ui-theme\"\n }\n }, [_vm._v(\"postcss-ui-theme\")]), _vm._v(\", 集成 postcss-assets 插件,通过配置 文件查找路径,解决引用文件找不到问题!!\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"postcss-ui-theme-%E6%8F%92%E4%BB%B6%EF%BC%8C%E5%B0%B1%E6%98%AF%E4%BD%A0%E7%9A%84-css-%E7%AE%A1%E7%90%86%E6%96%B9%E6%A1%88%E7%9A%84%E6%9C%80%E4%BD%B3%E9%80%89%E6%8B%A9!-%E7%82%B9-star-%E6%94%B6%E8%97%8F%EF%BC%81%EF%BC%81%EF%BC%81-%E8%8C%AB%E8%8C%AB%E5%89%8D%E7%AB%AF%E8%B7%AF%EF%BC%8C%E4%BD%A0%E7%9C%9F%E7%9A%84%E4%BC%9A%E7%94%A8%E5%88%B0%E5%AE%83%E7%9A%84%EF%BC%81\"\n }\n }, [_c('a', {\n attrs: {\n \"href\": \"https://github.com/cleverboy32/postcss-ui-theme\"\n }\n }, [_vm._v(\"postcss-ui-theme\")]), _vm._v(\" 插件,就是你的 css 管理方案的最佳选择! 点 star 收藏!!! 茫茫前端路,你真的会用到它的!\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-021dff84\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/postcss-plugin.md\n// module id = 103\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('p', [_vm._v(\"作为一个程序员,工作到现在,也将近半年了。公司对员工的代码提交也会有 review 流程。代码的 review 来讲,一般就是看格式、命名、逻辑是否有错,代码是否还有可以抽象的地方,这里总结一下自己遇到的代码规范方面的问题,大家一起写规范的代码,做一个看上去专业码农吧。\")]), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('p', [_vm._v(\"####\"), _c('strong', [_vm._v(\"js规范\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_c('p', [_vm._v(\"代码的缩进了,一般是两格或四格,我司采用的是四格,这里可以根据自己喜好和公司要求了。\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"中英文之间有空格间隔,像这样: \"), _c('code', {\n pre: true\n }, [_vm._v(\"我专业引用 English 单词\")])])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"命名规范,命名的驼峰式不用再说了。这里具体情况具体分析一下\")]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"变量的命名:小驼峰式\")]), _vm._v(\" \"), _c('li', [_vm._v(\"函数的命名:小驼峰式\")]), _vm._v(\" \"), _c('li', [_vm._v(\"常量:全部大写\")]), _vm._v(\" \"), _c('li', [_vm._v(\"构造函数: 大驼峰式\")]), _vm._v(\" \"), _c('li', [_vm._v(\"类的成员: 公共属性和方法就是小驼峰式, 私有属性和方法加上\"), _c('code', {\n pre: true\n }, [_vm._v(\"-\")]), _vm._v(\"前缀,然后是小驼峰式,如 `_nameFrist\")])]), _vm._v(\" \"), _c('hr')])]), _vm._v(\" \"), _c('p', [_vm._v(\"####\"), _c('strong', [_vm._v(\"css规范\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_c('p', [_vm._v(\"css 的基本命名, 自己刚写的时候以为也是写小驼峰式,后来就呵呵了。css 当中就是用 \"), _c('code', {\n pre: true\n }, [_vm._v(\"-\")]), _vm._v(\" 连接了, 如 \"), _c('code', {\n pre: true\n }, [_vm._v(\"search-button\")]), _vm._v(\",在定义 id 的时候是用小驼峰了。\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"css 名字意思定义。这里有一个 BEM 的命名法则参考,可以看看我之前写的一篇博客\"), _c('a', {\n attrs: {\n \"href\": \"http://blog.csdn.net/dadadeganhuo/article/details/76600264\"\n }\n }, [_vm._v(\"了解BEM\")])])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"css 命名的统一前缀, 在一个项目中,约定好同一个前缀,可避免样式的覆盖。\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"css 样式书写顺序:\")]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"显示属性:display/list-style/position/float/clear …\")]), _vm._v(\" \"), _c('li', [_vm._v(\"自身属性(盒模型):width/height/margin/padding/border\")]), _vm._v(\" \"), _c('li', [_vm._v(\"背景:background\")]), _vm._v(\" \"), _c('li', [_vm._v(\"行高:line-height\")]), _vm._v(\" \"), _c('li', [_vm._v(\"文本属性:color/font/text-decoration/text-align/...\")]), _vm._v(\" \"), _c('li', [_vm._v(\"其他:cursor/z-index/zoom/overflow\")]), _vm._v(\" \"), _c('li', [_vm._v(\"CSS3属性:transform/transition/animation/box-shadow/border-radius\")]), _vm._v(\" \"), _c('li', [_vm._v(\"如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照 -webkit- / -moz- / -ms- / -o- /\"), _c('br'), _vm._v(\"\\nstd的顺序进行添加,标准属性写在最后。\")]), _vm._v(\" \"), _c('li', [_vm._v(\"链接的样式请严格按照如下顺序添加: a:link -> a:visited -> a:hover -> a:active\")])])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"代码优化,能合并的属性就合并写,没用的属性也删掉,避免重复样式,避免使用 \"), _c('code', {\n pre: true\n }, [_vm._v(\"!important\")])])])]), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('p', [_vm._v(\"####\"), _c('strong', [_vm._v(\"git commit log 规则\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_c('p', [_vm._v(\"首先就是commit 内容的分类了,如图片所示:\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20170830144139403?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n }), _vm._v(\"定好分类,分类后面可以加你本次修改具体文件,然后组织本次修改的内容,就写好了 commit log啦。比如:\"), _c('code', {\n pre: true\n }, [_vm._v(\"feat(login): 新增登录验证功能\")]), _vm._v(\",这表达出了你再login文件上新增了一个验证的功能。编写正确的 log 信息,能够清楚的表述你写的代码目的。\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"commit 次数,这里我们每完成一个小点的时候,都可以 commit 一下,因为commit 是记录你完成一个项目的具体过程。\")])])]), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('p', [_vm._v(\"= = 之前没好好总结,今天写总结的时候,也去搜了搜别的文章,发现这样的文章其实挺多,自己以前都没怎么好好看看 = = 。\"), _c('br'), _vm._v(\"\\n欢迎补充啊~\")]), _vm._v(\" \"), _c('p', [_vm._v(\"####参考\")]), _vm._v(\" \"), _c('blockquote', [_c('p', [_c('a', {\n attrs: {\n \"href\": \"https://www.douban.com/note/499976405/?type=like\"\n }\n }, [_vm._v(\"前端人员必看的CSS规范\")]), _c('br'), _vm._v(\" \"), _c('a', {\n attrs: {\n \"href\": \"http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html\"\n }\n }, [_vm._v(\"Commit message 和 Change log 编写指南\")])])])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-1044a650\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/code-format.md\n// module id = 104\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('h2', {\n attrs: {\n \"id\": \"learn-typescript\"\n }\n }, [_vm._v(\"learn typescript\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E7%B1%BB%E5%9E%8B\"\n }\n }, [_vm._v(\"类型\")]), _vm._v(\" \"), _c('p', [_vm._v(\"基本类型: string number bool\")]), _vm._v(\" \"), _c('p', [_vm._v(\"数组 \"), _c('code', {\n pre: true\n }, [_vm._v(\"[]\")]), _vm._v(\": string[] number[]\")]), _vm._v(\" \"), _c('p', [_vm._v(\"元祖: [string, number]. 数组中有不同的数据类型\")]), _vm._v(\" \"), _c('p', [_vm._v(\"对象: { name: string; age: number }\")]), _vm._v(\" \"), _c('p', [_vm._v(\"函数:(arg1: string, arg?: bool) => void\")]), _vm._v(\" \"), _c('p', [_vm._v(\"Symbol: let symbol = Symbol(\\\"key\\\");\")]), _vm._v(\" \"), _c('p', [_vm._v(\"空: undefined null\")]), _vm._v(\" \"), _c('p', [_vm._v(\"任何类型: any\")]), _vm._v(\" \"), _c('p', [_vm._v(\"不存在的值: never\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E5%A6%82%E4%BD%95%E5%AE%9A%E4%B9%89%E7%B1%BB%E5%9E%8B\"\n }\n }, [_vm._v(\"如何定义类型\")]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"type\")]), _vm._v(\" 定义类型变量\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type Person = { name: string; age: number}\\nts 使用 const person1:Person = { name: '22', age: 1};\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Interfaces\")]), _vm._v(\" 声明 \"), _c('code', {\n pre: true\n }, [_vm._v(\"对象\")]), _vm._v(\" 类型的一种方法\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"Interface Person { name: string; age: number}\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"extends\")]), _vm._v(\" 类型继承于声明的类型\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"interface a { name: string}\\ninterface b extends a {\\n\\tage: number\\n}\\nb 的类型等于 { name: string; age: number }\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"in 判断属性是哪个类型中的\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type PersonListQuery = { user_ids: string[] }\\ntype DogListQuery = { dog_ids: string[] }\\n\\nfunction getList(query: PersonListQuery | DogListQuery ) {\\n\\tif ('user_ids' in PersonListQuery) {\\n\\t \\t// 这里可以推导出 query 类型是 PersonListQuery\\n\\t}\\n}\\n\\n\")])]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E7%B1%BB%E5%9E%8B%E7%BB%84%E5%90%88\"\n }\n }, [_vm._v(\"类型组合\")]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Required\")]), _vm._v(\" 将 T 中所有属性变成必选\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"Required<{ a?: bool} > = { a: bool }\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Partial\")]), _vm._v(\" 将 T 中所有属性变成可选\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"Partial<{ a: bool }> = { a?: bool }\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Readonly\")]), _vm._v(\" 将 T 中所有属性变成只读,后续 ts 会检测该类型不允许修改\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"const person2: Readonly<{name: string}> = {name: '22'}\\nperson2.name = '33' //error\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Omit\")]), _vm._v(\" 删除某些属性\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"interface Person {\\n name: string;\\n age: number;\\n}\\n \\ntype Name = Omit;\\nName 的类型定义为 { name: string }\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Pick\")]), _vm._v(\" 选择类型中的某些属性\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"interface Person {\\n name: string;\\n age: number;\\n}\\ntype Name = Pick;\\nName 的类型定义为 { name: string }\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Exclude\")]), _vm._v(\" 删除类型 T 中 deleteT 的类型, 相当于 Omit, 第二个值可以是 keys ,也可以是一个类型变量\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"interface Person {\\n name: string;\\n age: number;\\n}\\ntype Age = { age: number }\\ntype Name = Exclude\\nName 的类型定义为 { name: string }\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Extract\")]), _vm._v(\" 提取 T 继承于的 U 类型\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type Person = { name: string ; age: number } \\ntype PersonDetail = { pet: any; phone: number } \\ntype Name = { name: string }\\ntype Name = Extract\\n 将提取出含有 name 的类型 Person\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Parameters\")]), _vm._v(\" 获取函数类型的函数类型\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type getName = (perpson: Person) => string;\\ntype queryType = Parameters;\\nqueryType 的类型定义为 Person\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"ReturnType\")]), _vm._v(\" 获取函数类型的返回值类型\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type getName = (perpson: Person) => string;\\ntype resType = ReturnType;\\nvalueType 类型为 string\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Awaited\")]), _vm._v(\" 获取异步返回的值类型\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type getPerson = (id: string) => Promise\\ntype resType = ReturnType // Promise\\ntype valueType = Awaited // Person\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"Record\")]), _vm._v(\" 定义对象的 key 键类型\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type Keys = 'name' | 'age' \\ntype person = Record\\n// person 的属性只能为 name 和 age\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"NonNullable\")]), _vm._v(\" 去除类型中定义的 null 和 undefined\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type PersonHobby = hobby: string | undefined;\\ntype Hobby = NonNullable\\nHobby 类型为 string\\n\")])]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E7%B1%BB%E5%9E%8B%E6%93%8D%E4%BD%9C\"\n }\n }, [_vm._v(\"类型操作\")]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"typeof Object\")]), _vm._v(\" 获得\"), _c('code', {\n pre: true\n }, [_vm._v(\"对象\")]), _vm._v(\"的类型\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"const person1 = { name: '22', age: 1}\\ntype Person = typeof person1\\nPerson 类型为 { name: string; age: number }\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"keyof T\")]), _vm._v(\" 获得类型中的属性\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type Person = { name: string; age: number }\\ntype Key = keyof Person \\nkey 的类型为 'name' | 'age'\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"通常我们可以通过 keyof 约束对象的传参, 如\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type Person = { name: string; age: number }\\ntype Key = keyof Person;\\ntype getPersonAtrribute = (person: Person, key: Key) => Person[Key];\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"或者某些情况下我们想知道一个对象的属性值\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"const workPerson = { \\n\\t'1': { name: '1', age: 1},\\n\\t'2': { name: '2', age: 2},\\n}\\ntype WorkPerson = typeof workPerson; // { '1': {name: string; age: number }, '2': {name: string; age: number }\\ntype Key = keyof WorkPerson // '1' | '2'\\ntype Person = WorkPerson[Key] // {name: string; age: number }\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"|\")]), _vm._v(\" 类型兼容\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type width = 'string' | 'number';\\n\\n则 width 可以是 '32px' 也可以是 '32' 在 渲染时兼容两种类型\\n\")])]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD\"\n }\n }, [_vm._v(\"函数重载\")]), _vm._v(\" \"), _c('p', [_vm._v(\"定义不同类型的输入,推到出不同类型的输出\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type PersonListQuery = { user_ids: string[] };\\ntype DongListQuery = { dog_ids: string[] };\\nfunction getList(request: PersonListQuery): Person[];\\nfunction getList(request: DogListQuery): Dog[];\\n\\nfunction getList(query: PersonListQuery | DogListQuery) {\\n if ('user_ids' in query) { \\n return [] as Person[];\\n } else {\\n return [] as Dog[];\\n }\\n}\\n\\nconst a = getList({ personIds: [], region: 'us'})\\n此时 a 的类型将能推到出是 Person[]\\n\")])]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E6%B3%9B%E5%9E%8B\"\n }\n }, [_vm._v(\"泛型\")]), _vm._v(\" \"), _c('p', [_vm._v(\"类型的传参。 用 T 标识,在实际运用时你传入什么类型,该类型就作为后续推导。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"async function request(url: string): Promise {\\n const res = await fetch(url)\\n return res.json();\\n}\\n\\nconst res = await request('getPersonInfo?id=1'); \\n此时 ts 可以推导出 res 的类型是 Person\\n\")])]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"infer-%E7%B1%BB%E5%9E%8B%E5%8F%82%E6%95%B0%E4%BD%BF%E7%94%A8\"\n }\n }, [_vm._v(\"Infer 类型参数使用\")]), _vm._v(\" \"), _c('p', [_vm._v(\"通过 Infer 一个类型为变量,定义出获取类型的方法\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"type addResultType = T extends { a: infer U, b: infer U } ? U : never;\\ntype numberAdd = addResultType<{ a: 1, b: 2 }> // 推到出结果类型为 number\\ntype textAdd = addResultType<{ a: 'hello', b: 'world' }> // 推到出结果类型为 string\\n\")])]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E6%9E%9A%E4%B8%BE-enum\"\n }\n }, [_vm._v(\"枚举 enum\")]), _vm._v(\" \"), _c('p', [_vm._v(\"变量的值是约定的几个取值\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"const enum PageType {\\n HOME = 'home',\\n VIDEO = 'video',\\n}\\n\\nfunction getPageUrl(page: PageType) {\\n return {\\n [PageType.VIDEO]: \\\"/video\\\",\\n [PageType.HOME]: \\\"/home\\\",\\n }[page];\\n}\\n\")])]), _vm._v(\" \"), _c('h2', {\n attrs: {\n \"id\": \"tsconfig\"\n }\n }, [_vm._v(\"tsconfig\")]), _vm._v(\" \"), _c('p', [_vm._v(\"了解了 ts 对于类型的定义和各种规则后,我们则可以在编写 js 代码时利用并进行类型约束。于此同时,我们需要引入 typescript 库去获得这些 ts 能力。\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E5%A6%82%E4%BD%95%E5%BC%95%E5%85%A5\"\n }\n }, [_vm._v(\"如何引入\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"npm install typescript \\n// 不必再多说\\n\")])]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E5%91%BD%E4%BB%A4\"\n }\n }, [_vm._v(\"命令\")]), _vm._v(\" \"), _c('p', [_vm._v(\"typescript 包是有命令文件的,通常 ts 的运行则是通过 tsc 配合相关命令去执行的. 具体命令大家可以安装包之后通过 tsc -h 查看\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/349ffc362f0d831a780d2d7f754893a1.png\",\n \"alt\": \"在这里插入图片描述\"\n }\n })]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E9%85%8D%E7%BD%AE-%E5%AE%98%E7%BD%91\"\n }\n }, [_vm._v(\"配置 \"), _c('a', {\n attrs: {\n \"href\": \"https://www.typescriptlang.org/docs/handbook/tsconfig-json.html\"\n }\n }, [_vm._v(\"官网\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"如果你看了 tsc 命令,你会发现它是有很多命令的,并且有的命令还伴随这相关参数。在工作文件夹中,我们则通过配置文件 \"), _c('code', {\n pre: true\n }, [_vm._v(\"tsconfig.js\")]), _vm._v(\" 去配置,保证在项目中的运用。 配置参数这里就不细讲了,还是看官方文档靠谱点。\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-11390c96\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/typescript.md\n// module id = 105\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('h4', {\n attrs: {\n \"id\": \"%E4%B8%80-webpack-%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F\"\n }\n }, [_vm._v(\"一 webpack 是什么?\")]), _vm._v(\" \"), _c('p', [_vm._v(\"它是一个打包工具。 噗,完啦?\")]), _vm._v(\" \"), _c('p', [_vm._v(\"来,我们看官方概念: webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"内部如何构建一个依赖图,我们知道 webpack 会配置一个入口,这就是从这入口文件开始, 找到所有被依赖到的文件,比如其他 js / image / json 文件等,然后通过 loader 对这些文件进行处理、编译、打包、优化,生成一个 bundle 或者多个 bundle。\")]), _vm._v(\" \"), _c('h4', {\n attrs: {\n \"id\": \"%E5%AE%83%E7%9A%84%E5%8E%9F%E7%90%86\"\n }\n }, [_vm._v(\"它的原理\")]), _vm._v(\" \"), _c('p', [_vm._v(\"通过以上,主要就是找依赖, 通过配置处理相应环境,根据你的需要配置插件进行优化(如 profill、babel、 miniSize etc) 打包出文件,可以放到服务器上运行。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"关于找依赖,可以想到关于模块化的语法: import 、require、@import etc, 通过解析对应的语法寻找相应的依赖。然后通过读取依赖到的文件,根据对应的 loader 进行处理文件,最后根据你的插件配置,分割,压缩或注入等,根据 output config输出到对应的文件夹。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里推荐一篇 \"), _c('a', {\n attrs: {\n \"href\": \"https://juejin.im/entry/5b0e3eba5188251534379615\"\n }\n }, [_vm._v(\"webpack原理\")]), _vm._v(\" 文章, 下面就提一提我最近遇到的一个很神奇的问题吧\")]), _vm._v(\" \"), _c('h4', {\n attrs: {\n \"id\": \"%E5%85%B3%E4%BA%8E-tree-shaking\"\n }\n }, [_vm._v(\"关于 \"), _c('a', {\n attrs: {\n \"href\": \"https://webpack.docschina.org/guides/tree-shaking/\"\n }\n }, [_vm._v(\"tree shaking\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"想象抖一抖树,枯萎的叶子就会脱落。 这里指的是把没有用到的代码删除掉,从而减小文件的大小。通过这一优化,在引用多个第三方库时,能够大大的减少你的文件大小,但请确定这个包是没有副作用的。\")]), _vm._v(\" \"), _c('blockquote', [_c('p', [_vm._v(\"什么是副作用?\"), _c('br'), _vm._v(\"\\n就是在导入时会自行运行一段函数,从而改变了 window 变量啊或者其他的变量以供导入的包能正常运行, 而不是只单单 export 了变量。\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"它是依赖于 es2015 的 \"), _c('code', {\n pre: true\n }, [_vm._v(\"静态导入导出( import / export)\")]), _vm._v(\"。在打包时就会通过 import 确定引用包的 export 导出的某一个变量之一, 在告知没有副作用的情况下,删除掉没有用到的其他的导出代码。\")]), _vm._v(\" \"), _c('blockquote', [_c('p', [_vm._v(\"静态导入是指一开始就默认加载这个文件,而不是一步一步执行代码判断逻辑,去导入对应文件\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"webpack 在生成环境下,默认打开树抖动配置, 如下配置。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"optimization: {\\n\\tprovidedExports: true,\\n\\tusedExports: true,\\n\\tsideEffects: true,\\n\\tconcatenateModules: true,\\n }\\n\")])]), _vm._v(\" \"), _c('p', [_c('code', {\n pre: true\n }, [_vm._v(\"providedExports\")]), _vm._v(\" 开启 export 导出收集;\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"usedExportts\")]), _vm._v(\" 告诉webpack确定每个模块的已使用导出;\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"concatenateModules\")]), _vm._v(\" 告诉webpack查找模块图的各个部分,这些部分可以安全地连接成一个模块;\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"sideEffects\")]), _vm._v(\" 告诉webpack识别 sideEffects 标志的 package.json 或规则以跳过模块,这些模块在未使用导出时被标记为不包含副作用, 则可以把无副作用的未使用的导出进行删除。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"所以如果你的包无副作用,推荐在 package.json 设置 \"), _c('code', {\n pre: true\n }, [_vm._v(\"sideEffects: false\")]), _vm._v(\" 开启树抖动。\"), _c('br'), _vm._v(\"\\n注意, 它会删掉样式文件,因为样式文件是没有 export 的。所以我们需要声明样式文件是有副作用的。\"), _c('br'), _vm._v(\"\\n在 package.json 中设置:\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"sideEffects: [\\n\\t'*.css'\\n]\\n\")])]), _vm._v(\" \"), _c('blockquote', [_c('p', [_vm._v(\"总结,为了利用树木摇晃,你必须:\"), _c('br'), _vm._v(\"\\n1 使用ES2015模块语法 (配置 babel 禁止转义 es6 模块语义)\"), _c('br'), _vm._v(\"\\n2 将\\\"sideEffects\\\"属性添加到项目的 package.json文件中。\"), _c('br'), _vm._v(\"\\n3 配合压缩工具一起使用\")])]), _vm._v(\" \"), _c('p', [_c('a', {\n attrs: {\n \"href\": \"https://github.com/cleverboy32/tree-shaking-css\"\n }\n }, [_vm._v(\"demo\")]), _c('br'), _vm._v(\"\\n通过配置 \"), _c('code', {\n pre: true\n }, [_vm._v(\"webpack.prod.js\")]), _vm._v(\" sideEffects 值, 你可以看到 build 时 main.js 文件的大小发生改变。\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-3e6ea2fc\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/webpack.md\n// module id = 107\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('p', [_vm._v(\"###购买服务器\")]), _vm._v(\" \"), _c('p', [_vm._v(\"学生购买可以使用阿里云优惠专享, 每个月只要9.9 就好了。这里我用的是学生优惠,机型内存什么都限定好了的。所以- - 没什么可以说的。关于国内外服务器的区别就是,如果你购买了国外的服务器,就可以在云服务器上搭梯子访问国外的网站,也就是翻墙了。\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E5%AE%89%E8%A3%85%E7%8E%AF%E5%A2%83\"\n }\n }, [_vm._v(\"安装环境\")]), _vm._v(\" \"), _c('p', [_vm._v(\"因为服务器默认 linux 系统,所以这里讲怎么配置 linux 云服务环境。\"), _c('br'), _vm._v(\"\\n我第一次使用的时候,还以为是要去安装一个界面化桌面,以便我这个命令小白可以操作。但是,对于只有2G 的内存来说安装了之后将会很卡很卡。后来我问学长,他说不要安装界面化,使用命令就好了。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"首先关于远程服务器的登录, 默认系统的用户名是 root, 然后登录密码可以在控制台进行修改。如下图点击重置密码。\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20180107170054918?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"重置密码处\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"重置之后,然后点击远程连接,就可以连接登录到你的服务器上了。这里要将一点,如果你是 mac 电脑的话,可以在你的电脑上通过 ssh 登录到你的服务器。 命令如下:\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"ssh root@你的公网IP\")]), _vm._v(\",比如 \"), _c('code', {\n pre: true\n }, [_vm._v(\"ssh root@120.78.32.12\")]), _c('br'), _vm._v(\"\\n然后输入密码即可连接成功。\")]), _vm._v(\" \"), _c('p', [_c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20180107170503333?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"登录成功图\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"接下来在终端中输入命令。配置环境。如果你是配置 java 环境,那么可以去谷歌一下如何在 linux 中配置 java 环境,这里我是配置的 node 环境,就讲一下如何配置 node 环境以及 npm。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里我用的是源码安装。首先安装 node 编译依赖的第三方模块\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"yum -y install gcc make gcc-c++ openssl-devel\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"然后下载 node 的源码包\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20180107171300036?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"node 官网的源码 包。\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"wget https://nodejs.org/dist/v8.9.4/node-v8.9.4.tar.gz\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"你下载的时候可以手动改成当前最新版本。下载后,进行解压 \"), _c('code', {\n pre: true\n }, [_vm._v(\"tar -zxvf node-v8.9.4.tar.gz\")]), _vm._v(\", 然后进入解压后的文件夹 \"), _c('code', {\n pre: true\n }, [_vm._v(\"cd node-v8.9.4\")]), _vm._v(\", 依次\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"./configure\")]), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"make\")]), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"sudo make install\")]), _c('br'), _vm._v(\"\\n这里编译时间会有点久,请耐心等待- -\"), _c('br'), _vm._v(\"\\n查看安装成功\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20180107172311684?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"安装 npm\"), _c('br'), _vm._v(\"\\n同样下载 npm 包\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\"wget http://nodejs.org/dist/npm/npm-1.4.9.zip\")]), _c('br'), _vm._v(\"\\n解压 \"), _c('code', {\n pre: true\n }, [_vm._v(\"tar -zxvf npm-1.4.9.tgz\")]), _c('br'), _vm._v(\"\\n查看是否安装成功 \"), _c('code', {\n pre: true\n }, [_vm._v(\"npm -v\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这就是 node 环境配置了, 然后就是 mysql 数据库。\"), _c('br'), _vm._v(\" \"), _c('a', {\n attrs: {\n \"href\": \"http://blog.csdn.net/win7system/article/details/53579500\"\n }\n }, [_vm._v(\"http://blog.csdn.net/win7system/article/details/53579500\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"关于项目的上传,如果你本地编写了代码,想上传至服务器,第一个方式,可以是使用 ftp 上传文件。 第二个方式,就是在你的服务器上搭建一个 git 服务器,通过从服务器推送和克隆项目来获取文件。这里我使用的是第二种方法,参见教程:\"), _c('br'), _vm._v(\" \"), _c('a', {\n attrs: {\n \"href\": \"https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579bc4b458f044ce7afed3df579123eca000\"\n }\n }, [_vm._v(\"https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579bc4b458f044ce7afed3df579123eca000\")]), _c('br'), _vm._v(\"\\n这里注意一下, 关于 设置 ssh 登录,一定要把创建的 .ssh 文件放到你创建的用户下,如我这里是 git 用户,路径就是\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20180107174529969?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"放置在正确位置之后,还要注意项目的归属者也要是 git 用户,这样才会在 git 用户里匹配到对应的 ssh key。也就是下面这一个步骤\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20180107174749168?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"还有一点要注意的就是,你再本地推送了代码上 git 服务器之后,想要在云服务器上获取到代码, 需要在服务器上再次克隆 \"), _c('code', {\n pre: true\n }, [_vm._v(\"git clone git@server:/srv/sample.git\")]), _vm._v(\" 项目,git pull 获取到代码。 这里也可以通过自己配置 git 服务器的钩子函数,使其自动更新代码,我还没配置,就先不说了 - -。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"好了,现在现在基本环境配置好了就可以开始开发你的项目啦。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"另外附:\"), _c('br'), _vm._v(\"\\n项目在服务器上启动了,发现在本地电脑无法通过 ip 访问,那么可能是你的端口号没有开放,需要去服务器上设置安全组。\"), _c('br'), _vm._v(\"\\n具体添加方法 ,以及其他一些关于服务器的配置,都可以随时点击右侧的 \"), _c('strong', [_vm._v(\"点我提问\")]), _vm._v(\",像云博士提问。 = =\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20180107175548703?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n })])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-67257b53\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/aliyun-server.md\n// module id = 108\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('h3', {\n attrs: {\n \"id\": \"canvas\"\n }\n }, [_vm._v(\"canvas\")]), _vm._v(\" \"), _c('p', [_vm._v(\"canvas 是 HTML 5 新出的图片元素,它是 2d 绘图 API, 使用 JavaScript 调用API 可以画 lines, shapes, images, text 甚至其他你想话的, 并且不需要什么插件。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"它是作为一个画布存在在网页中, 画布上有你绘制的图案,利用 js 你可以实时的改变画布上的图案,以实现动画。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"它的支持性也挺好,IE 9 开始支持,Chrome和Opera 9+ 也支持。\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"svg\"\n }\n }, [_vm._v(\"svg\")]), _vm._v(\" \"), _c('p', [_vm._v(\"SVG 可缩放矢量图形, 是 XML 用来描述二维图形和绘图程序的语言。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。\")]), _vm._v(\" \"), _c('blockquote', [_c('p', [_vm._v(\"什么是 XML\"), _c('br'), _vm._v(\"\\n它是一种类似于 HTML 的标记语言,设计宗旨在于传输数据而不是显示数据。\"), _c('br'), _vm._v(\"\\nXML 数据以纯文本格式进行存储,因此提供了一种独立于软件和硬件的数据存储方法。通过读取你可以获取存储于其中的数据\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图,或者将这两种方式结合起来创建图形。图形和其组成部分可以变形,可以合成,还可以通过滤镜完全改变外观。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"SVG提供了一些元素,用于定义圆形、矩形、简单或复杂的曲线,以及其他形状。\"), _c('br'), _vm._v(\"\\n一个简单的SVG文档由 \"), _c('code', {\n pre: true\n }, [_vm._v(\"\")]), _vm._v(\" 根元素和基本的形状元素构成。另外还有一个g元素,它用来把若干个基本形状编成一个组。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"eg:\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"\\n\\n \\n\\n \\n\\n SVG\\n\\n\\n\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"可以看到 svg 是在内部组合各种元素绘制形成相应的图案。 并且矢量顾名思义是可以自由缩放的,根据屏幕像素点进行缩放,保留了图案的高清晰度。\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E6%80%BB%E7%BB%93\"\n }\n }, [_vm._v(\"总结\")]), _vm._v(\" \"), _c('p', [_vm._v(\"通过以上,我们可以知道 svg 和 canvas 的相同点,它们都是可以绘图的元素,并有自身的用法。\"), _c('br'), _vm._v(\"\\ncanvas 是一块画布,纯用 js 去画画的。根据你的 js 编写,动态去渲染画布上的图案,适用一些大量数据交互修改的,比较复杂的动画。由于它仅仅是根据你设定的大小,它是依赖于分辨率的。\"), _c('br'), _vm._v(\"\\n而 svg 是一个个元素组成在一起的, 包含 animate 元素,可做一些小小的动画, 它的矢量优点也更适合做一些高保真的静态图片。\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-71895c6c\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/canvas-svg.md\n// module id = 109\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('h1', {\n attrs: {\n \"id\": \"%E5%AE%89%E5%85%A8%E6%84%8F%E8%AF%86\"\n }\n }, [_vm._v(\"安全意识\")]), _vm._v(\" \"), _c('p', [_vm._v(\"你要离开家了, 所有的父母都会说,路上注意安全,可见安全是多么的重要!那么作为软件开发,有哪些危险使我们要知道并避免的呢?\"), _c('br'), _vm._v(\"\\n下面我说一些基本的需要知道的安全攻击, 以及应对方案。\")]), _vm._v(\" \"), _c('blockquote', [_c('p', [_vm._v(\"ps 作为一个安全小白,了解各种各样的防范方案真的太难了,我是真的水🤭。欢迎补充,以增长见识\")])]), _vm._v(\" \"), _c('h2', {\n attrs: {\n \"id\": \"xss%3A-%E8%B7%A8%E7%AB%99%E8%84%9A%E6%9C%AC%E6%94%BB%E5%87%BB\"\n }\n }, [_vm._v(\"XSS: 跨站脚本攻击\")]), _vm._v(\" \"), _c('p', [_vm._v(\"在用户可以输入的地方,并且将作为代码编译时,攻击者可以通过输入一个脚本地址的方式进行对页面注入脚本攻击。解决方式: 任何用户输入的地方都不要相信,对用户输入内容进行转义,如 \"), _c('code', {\n pre: true\n }, [_vm._v(\"<\")]), _vm._v(\" 使用转义字符串 \"), _c('code', {\n pre: true\n }, [_vm._v(\"<\")]), _vm._v(\" 代替。\")]), _vm._v(\" \"), _c('h2', {\n attrs: {\n \"id\": \"csrf%3A-%E8%B7%A8%E7%AB%99%E4%BC%AA%E8%A3%85%E8%AF%B7%E6%B1%82%E6%94%BB%E5%87%BB\"\n }\n }, [_vm._v(\"CSRF: 跨站伪装请求攻击\")]), _vm._v(\" \"), _c('p', [_vm._v(\"在用户已登录的情况下,伪装用户的身份发起请求,进行相关攻击。解决方式,确认用户的身份。比较好理解的解决方式是: 二次确认,通过用户的二次确认确认请求方为真实用户。然后就是 X-Requested-With 请求标志,通过该请求头设置标志位 \"), _c('code', {\n pre: true\n }, [_vm._v(\"ajax\")]), _vm._v(\" 请求,可以一定程度阻止跨域的伪装。\"), _c('code', {\n pre: true\n }, [_vm._v(\"Anti-CSRF TOKEN\")]), _vm._v(\" 方案:通过服务端与客户端唯一的 token 值进行校验,可以看做一个暗号,让别人无法伪装!\")]), _vm._v(\" \"), _c('h2', {\n attrs: {\n \"id\": \"%E7%BD%91%E7%BB%9C%E5%8A%AB%E6%8C%81\"\n }\n }, [_vm._v(\"网络劫持\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"jsonp-%E5%8A%AB%E6%8C%81\"\n }\n }, [_vm._v(\"Jsonp 劫持\")]), _vm._v(\" \"), _c('p', [_vm._v(\"我们都知道 \"), _c('code', {\n pre: true\n }, [_vm._v(\"jsonp\")]), _vm._v(\" 就是为了解决跨域的,如果传输信息设计到比较敏感的数据,那么别人可以很方便调用你的接口,获取你的数据,存储在自己的数据库中。解决方法,添加脚本可运行白名单,不要传输敏感信息。\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"http-%E5%8A%AB%E6%8C%81%E3%80%82\"\n }\n }, [_vm._v(\"HTTP 劫持。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"HTTP 是明文传输,所以运营商可以知道你的代码是什么,然后在里面加一点小广告什么的,改变你的内容。解决方法就是使用 https 协议,可耻的运营商\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"dns-%E5%8A%AB%E6%8C%81\"\n }\n }, [_vm._v(\"DNS 劫持\")]), _vm._v(\" \"), _c('p', [_vm._v(\"通过域名解析我们才能找到对域名的服务器 ip 地址,劫持了 DNS 就可以给你返回一个错误的 ip 地址。在 dns 解析中,会先在本机搜索域名解析记录,无相关记录像 dns 服务商发起请求。所以要么你本地信息被篡改,要么服务商欺骗你。\"), _c('br'), _vm._v(\" \"), _c('a', {\n attrs: {\n \"href\": \"https://juejin.im/post/5cff858a6fb9a07ed84238ec\"\n }\n }, [_vm._v(\"转一篇 DNS 劫持详解链接\")])]), _vm._v(\" \"), _c('h2', {\n attrs: {\n \"id\": \"%E6%8E%A5%E5%8F%A3%E5%AE%89%E5%85%A8\"\n }\n }, [_vm._v(\"接口安全\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E6%95%B0%E6%8D%AE%E5%BA%93\"\n }\n }, [_vm._v(\"数据库\")]), _vm._v(\" \"), _c('p', [_vm._v(\"数据库,插入数据库的参数,在执行 sql 的时候小心它把你整个数据库表给删了。这里的攻击类似 \"), _c('code', {\n pre: true\n }, [_vm._v(\"xss\")]), _vm._v(\" 攻击,通过传输、拼接一些字符串改变原本的 sql 语义\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E6%8E%A8%E9%80%81%E6%B6%88%E6%81%AF\"\n }\n }, [_vm._v(\"推送消息\")]), _vm._v(\" \"), _c('p', [_vm._v(\"比如短信发送消息,非常的有代表性。通过接口的参数传递,以及最后的发送内容,可以推测出你的推送内容的组合相关方式,就可以通过不良参数,很方便的发送的一些不合法的信息,或有毒链接给用户。解决方式就是不要相信用户传入的任何参数,对参数进行校验,发送内容尽量可选择匹配模式,如 code 值映射,对不合法的参数才有默认内容发送。\")]), _vm._v(\" \"), _c('h2', {\n attrs: {\n \"id\": \"ddos%EF%BC%9A%E5%88%86%E5%B8%83%E5%BC%8F%E6%8B%92%E7%BB%9D%E6%9C%8D%E5%8A%A1\"\n }\n }, [_vm._v(\"DDOS:分布式拒绝服务\")]), _vm._v(\" \"), _c('p', [_vm._v(\"就是很多请求大量涌入你的服务器,导致它们都没有空闲可以响应真正的用户请求。通过 TCP 连接,我们知道建立连接需要三次确认,一般攻击者可以伪造 ip, 发起大量连接请求,却又不确认 = = 导致服务器白白等待直到超时。其次可以借用别的用户,在一个大流量用户网站地方的某一个页面上了,通过 \"), _c('code', {\n pre: true\n }, [_vm._v(\"xss\")]), _vm._v(\" 默认发起对攻击网站的请求,并发送很大的数据,但每次发送很少的字节,这些用户就被当成了肉鸡,然后使其瘫痪。解决防范:增加机器, 对同一个ip 的过多请求进行防范。\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-7abc0d0e\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/safe.md\n// module id = 110\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('p', [_vm._v(\"作为一个前端,写页面结构,写CSS怎么命名?\"), _c('br'), _vm._v(\"\\n就算不用,但你的了解, 让自己的代码更规范。\")]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"bem%E6%98%AF%E4%BB%80%E4%B9%88\"\n }\n }, [_vm._v(\"BEM是什么\")]), _vm._v(\" \"), _c('p', [_vm._v(\"它是css命名的一种规范。试想,你写了一个页面,有input, button, div, 这些元素是什么样的关系,给他们添加样式的时候,怎么知道他们是一个页面的? 怎么知道input 是否放在div里面的? 不要急,这就说到了下面的命名之作用\")]), _vm._v(\" \"), _c('h4', {\n attrs: {\n \"id\": \"bem%E6%98%AF%E6%80%8E%E4%B9%88%E5%91%BD%E5%90%8D%E7%9A%84\"\n }\n }, [_vm._v(\"BEM是怎么命名的\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\",\n \"class\": \"language-html\"\n }\n }, [_c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"<\"), _c('span', {\n attrs: {\n \"class\": \"hljs-name\"\n }\n }, [_vm._v(\"html\")]), _vm._v(\">\")]), _vm._v(\"\\n\\t\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"<\"), _c('span', {\n attrs: {\n \"class\": \"hljs-name\"\n }\n }, [_vm._v(\"div\")]), _vm._v(\" \"), _c('span', {\n attrs: {\n \"class\": \"hljs-attr\"\n }\n }, [_vm._v(\"class\")]), _vm._v(\"=\"), _c('span', {\n attrs: {\n \"class\": \"hljs-string\"\n }\n }, [_vm._v(\"\\\"loggin-from\\\"\")]), _vm._v(\">\")]), _vm._v(\"\\n\\t\\t\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"<\"), _c('span', {\n attrs: {\n \"class\": \"hljs-name\"\n }\n }, [_vm._v(\"input\")]), _vm._v(\" \"), _c('span', {\n attrs: {\n \"class\": \"hljs-attr\"\n }\n }, [_vm._v(\"class\")]), _vm._v(\"=\"), _c('span', {\n attrs: {\n \"class\": \"hljs-string\"\n }\n }, [_vm._v(\"\\\"loggin-from__input\\\"\")]), _vm._v(\"/>\")]), _vm._v(\"\\n\\t\\t\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"<\"), _c('span', {\n attrs: {\n \"class\": \"hljs-name\"\n }\n }, [_vm._v(\"button\")]), _vm._v(\" \"), _c('span', {\n attrs: {\n \"class\": \"hljs-attr\"\n }\n }, [_vm._v(\"class\")]), _vm._v(\"=\"), _c('span', {\n attrs: {\n \"class\": \"hljs-string\"\n }\n }, [_vm._v(\"\\\"loggin-from__confim\\\"\")]), _vm._v(\">\")]), _vm._v(\"确定\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"\")]), _vm._v(\"\\t\\n\\t\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"\")]), _vm._v(\"\\n\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"\")]), _vm._v(\"\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"通过上面命名可以很直接看出,input 和button 在div 里面。\"), _c('br'), _vm._v(\"\\n这里讲 后面的 __input/__confim 这里后面接两个下划线,表示的是div里面的子元素。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\",\n \"class\": \"language-html\"\n }\n }, [_c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"<\"), _c('span', {\n attrs: {\n \"class\": \"hljs-name\"\n }\n }, [_vm._v(\"html\")]), _vm._v(\">\")]), _vm._v(\"\\n\\t\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"<\"), _c('span', {\n attrs: {\n \"class\": \"hljs-name\"\n }\n }, [_vm._v(\"div\")]), _vm._v(\" \"), _c('span', {\n attrs: {\n \"class\": \"hljs-attr\"\n }\n }, [_vm._v(\"class\")]), _vm._v(\"=\"), _c('span', {\n attrs: {\n \"class\": \"hljs-string\"\n }\n }, [_vm._v(\"\\\"loggin-from--big\\\"\")]), _vm._v(\">\")]), _vm._v(\"\\n\\t\\t\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"<\"), _c('span', {\n attrs: {\n \"class\": \"hljs-name\"\n }\n }, [_vm._v(\"input\")]), _vm._v(\" \"), _c('span', {\n attrs: {\n \"class\": \"hljs-attr\"\n }\n }, [_vm._v(\"class\")]), _vm._v(\"=\"), _c('span', {\n attrs: {\n \"class\": \"hljs-string\"\n }\n }, [_vm._v(\"\\\"loggin-from__input\\\"\")]), _vm._v(\"/>\")]), _vm._v(\"\\n\\t\\t\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"<\"), _c('span', {\n attrs: {\n \"class\": \"hljs-name\"\n }\n }, [_vm._v(\"button\")]), _vm._v(\" \"), _c('span', {\n attrs: {\n \"class\": \"hljs-attr\"\n }\n }, [_vm._v(\"class\")]), _vm._v(\"=\"), _c('span', {\n attrs: {\n \"class\": \"hljs-string\"\n }\n }, [_vm._v(\"\\\"loggin-from__confim\\\"\")]), _vm._v(\">\")]), _vm._v(\"确定\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"\")]), _vm._v(\"\\t\\n\\t\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"\")]), _vm._v(\"\\n\"), _c('span', {\n attrs: {\n \"class\": \"hljs-tag\"\n }\n }, [_vm._v(\"\")]), _vm._v(\"\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这里说, --big表示添加的描述, 很明显是大的注册表单的样式嘛。\")]), _vm._v(\" \"), _c('h4', {\n attrs: {\n \"id\": \"bem%E6%80%BB%E7%BB%93\"\n }\n }, [_vm._v(\"BEM总结\")]), _vm._v(\" \"), _c('p', [_vm._v(\"好了, 这里loggin-from 相当于一块整体(block), 里面包含了元素input/button(element), 还有这个块或者一些元素的修饰big(modifier) => BEM\"), _c('br'), _vm._v(\"\\n它一般和sass一起使用,在用@C代表块、 @d代表元素、 @m代码修饰符的时候, css可以这样写了\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"@C loggin-from {\\n\\twidth: 100px;\\n\\theight: 100px;\\n\\t@m big {\\n\\t\\twidth: 200px;\\n\\t\\theight: 200px;\\n\\t}\\n\\t@d input {\\n\\t\\tcolor: red;\\n\\t}\\n\\t@d button {\\n\\t\\tcolor: blue;\\n\\t}\\n}\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"怎么样,这样是不是就不用写那么长了, 而且一看样式文件,就能知道页面布局是什么样的。\"), _c('br'), _vm._v(\" \"), _c('strong', [_vm._v(\"以上写法, 要通过sass 插件配置的\")]), _c('br'), _vm._v(\"\\n这里有一个包 ,可以使用\"), _c('a', {\n attrs: {\n \"href\": \"https://www.npmjs.com/package/sass-bem-constructor\"\n }\n }, [_vm._v(\"sass-bem-constructor\")])])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-7bd31945\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/bem.md\n// module id = 111\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('h1', {\n attrs: {\n \"id\": \"cleverboy-%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0\"\n }\n }, [_vm._v(\"cleverboy 的学习笔记\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-7f26a466\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/readme.md\n// module id = 112\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('p', [_vm._v(\"当我们要完成一个应用的时候,会根据对应的功能划分为许多不同的模块,就像一个论坛,有发帖的模块,评论的模块,js 中的模块也正是如此,一个具体功能的代码抽成一个文件,当你做一个东西的时候需要用到这个功能的时,可以直接使用这个文件,实现功能的分离,并能在多个需要的地方使用。就像是螺丝钉、螺丝帽、垫片一样的,通过组合使用实现出你的产品。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"通过直白的描述,我们可以知道,模块化的好处就是,抽离代码,重复使用,如现在很直观的代表 npm 包。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"那么模块化到底是怎么实现的呢?\")]), _vm._v(\" \"), _c('p', [_vm._v(\"先来了解一下历史,以前的 html 不知道大家还记不记的, 一个html 页面引入了多个 js 文件.\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"\\n\\n\\n \\n So UI - A Component Library for Vue.js.\\n\\n\\n
\\n \\n \\n \\n \\n \\n\\n\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"如上,引入了 a/b/c/d/e 五个文件,这五个文件如果相互之间有依赖,还要注意引入的顺序,并且还需要注意它们里面的变量名,若是重复利用到其他的项目,其他项目也需要注意到以上两点问题。为了解决这一问题,就有了模块化的规范。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"模块化的规范,有 \"), _c('a', {\n attrs: {\n \"href\": \"http://javascript.ruanyifeng.com/nodejs/module.html\"\n }\n }, [_vm._v(\"CMD\")]), _vm._v(\" 和 \"), _c('a', {\n attrs: {\n \"href\": \"http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html\"\n }\n }, [_vm._v(\"AMD\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"CMD (Common Module Definition), 是sea.js在推广过程中对模块定义的规范化产出,主要用于浏览器端。它主要特点是:对于依赖的模块是延迟执行,依赖可以就近书写,等到需要用这个依赖的时候再引入这个依赖,应用有sea.js.\")]), _vm._v(\" \"), _c('p', [_vm._v(\"AMD规范(Asynchronous Module Definition):是 RequireJS 在推广过程中对模块定义的规范化产出,也是主要用于浏览器端。其特点是:依赖前置,需要在定义时就写好需要的依赖,提前执行依赖,应用有require.js\")]), _vm._v(\" \"), _c('p', [_vm._v(\"尽情的猜测,require.js 是怎么弄的呢? 它需要依次的加载模块然后去进行相应的操作,加载模块就是要引入这个文件,那么这里也还是通过动态加载 script 的方法,并通过 onload 去执行后面的回调了。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"我们知道现如今 es6 已经支持模块化了,它分为 export 和 import 两个命令。 export 导出你定义的模块变量, import 引入一个模块变量。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"export { \\n \\tone, \\n \\ttwo\\n }\\n export default three;\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"对应的引入代码\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"import { one, two } three from 'a.js'\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"可以看到 export 可以导出一个默认的变量,也可以导出变量对象,这里引入的时候名字不要写错了。 那么 es6 的模块化通过babel 转码其实就是 umd 模块规范, 它是一个兼容 cmd 和 amd 的模块化规范, 同时还支持老式的“全局”变量规范\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"(function (root, factory) {\\n if (typeof define === 'function' && define.amd) {\\n // AMD\\n define(['jquery'], factory);\\n } else if (typeof exports === 'object') {\\n // Node, CommonJS之类的\\n module.exports = factory(require('jquery'));\\n } else {\\n // 浏览器全局变量(root 即 window)\\n root.returnExports = factory(root.jQuery);\\n }\\n}(this, function ($) {\\n // 方法\\n function myFunc(){};\\n \\n // 暴露公共方法\\n return myFunc;\\n}));\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"那么浏览器是如何支持这种规范的呢?\"), _c('br'), _vm._v(\"\\n其实是实现了根据这种规范定制出来的功能。这里我们就按照 实现了 AMD 规范的 require.js 来讲一下实现代码。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"AMD 定义一个模块的方法是 define(id?, dependencies?, factory)。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"参考define 的方法代码\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" define = function (name, deps, callback) {\\n var node, context;\\n \\n //Allow for anonymous modules\\n if (typeof name !== 'string') {\\n //Adjust args appropriately\\n callback = deps;\\n deps = name;\\n name = null;\\n }\\n\\n //This module may not have dependencies\\n if (!isArray(deps)) {\\n callback = deps;\\n deps = null;\\n }\\n\\n //If no name, and callback is a function, then figure out if it a\\n //CommonJS thing with dependencies.\\n if (!deps && isFunction(callback)) {\\n deps = [];\\n //移除注释\\n //查找 require 语句,收集依赖到 deps 里面\\n // but only if there are function args.\\n if (callback.length) {\\n callback\\n .toString()\\n .replace(commentRegExp, commentReplace)\\n .replace(cjsRequireRegExp, function (match, dep) {\\n deps.push(dep);\\n });\\n\\n //May be a CommonJS thing even without require calls, but still\\n //could use exports, and module. Avoid doing exports and module\\n //work though if it just needs require.\\n //REQUIRES the function to expect the CommonJS variables in the\\n //order listed below.\\n deps = (callback.length === 1 ? ['require'] : ['require', 'exports', 'module']).concat(deps);\\n }\\n }\\n\\n //If in IE 6-8 and hit an anonymous define() call, do the interactive\\n //work.\\n if (useInteractive) {\\n node = currentlyAddingScript || getInteractiveScript();\\n if (node) {\\n if (!name) {\\n name = node.getAttribute('data-requiremodule');\\n }\\n context = contexts[node.getAttribute('data-requirecontext')];\\n }\\n }\\n\\n //Always save off evaluating the def call until the script onload handler.\\n //This allows multiple modules to be in a file without prematurely\\n //tracing dependencies, and allows for anonymous module support,\\n //where the module name is not known until the script onload event\\n //occurs. If no context, use the global queue, and get it processed\\n //in the onscript load callback.\\n if (context) {\\n context.defQueue.push([name, deps, callback]);\\n context.defQueueMap[name] = true;\\n } else {\\n globalDefQueue.push([name, deps, callback]);\\n }\\n };\\n\\n define.amd = {\\n jQuery: true\\n };\\n \\n\\treq.exec = function (text) {\\n /*jslint evil: true */\\n return eval(text);\\n };\\n\\n //Set up with config info.\\n req(cfg);\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"可以知道,这一段代码是解析定义是模块所需的依赖放置 context 的模块定义队列中。然后我们就要通过 req 去执行加载依赖,我们来看看 req 的定义。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"req = requirejs = function (deps, callback, errback, optional) {\\n\\n //Find the right context, use default\\n var context, config,\\n contextName = defContextName;\\n\\n // Determine if have config object in the call.\\n if (!isArray(deps) && typeof deps !== 'string') {\\n // deps is a config object\\n config = deps;\\n if (isArray(callback)) {\\n // Adjust args if there are dependencies\\n deps = callback;\\n callback = errback;\\n errback = optional;\\n } else {\\n deps = [];\\n }\\n }\\n\\n if (config && config.context) {\\n contextName = config.context;\\n }\\n \\n if (config) {\\n context.configure(config); // 完善配置\\n }\\n\\n return context.require(deps, callback, errback); \\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这里的代码把 依赖,回调, 错误处理和配置项都传进来了,进行了配置上的处理之后,我们可以看到最后再去根据配置加载。\"), _c('br'), _vm._v(\"\\n我们再来看 context.require 方法\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"makeRequire: function (relMap, options) {\\n\\t\\toptions = options || {};\\n\\t\\tfunction localRequire(deps, callback, errback) {\\n\\t\\t\\t.... 当前 require 的转换\\n \\t \\treturn localRequire;\\n \\t\\t }\\n\\t\\tcompleteLoad: function (moduleName) {\\n\\t\\t\\t判断 context 的依赖队列,是继续加载还是执行回调\\n\\t\\t}\\n\\t\\t nameToUrl: function (moduleName, ext, skipExt) {\\n\\t\\t \\t根据模块名和配置得到加载的路径\\n\\t\\t }\\n\\t\\t load: function (id, url) {\\n\\t req.load(context, id, url);\\n\\t },\\n\\t execCb: function (name, callback, args, exports) {\\n\\t return callback.apply(exports, args);\\n\\t },\\n\\t\\tonScriptLoad: function (evt) {\\n\\t\\t\\t脚本加载完成后得到数据,执行 context.completeLoad(data.id);\\n\\t\\t}\\n\\t\\tonScriptError: function (evt) {\\n\\t\\t\\t加载错误执行错误处理\\n\\t\\t}\\n\\t};\\n context.require = context.makeRequire();\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"那我们知道其实就是围着这语法的解析,进行一系列的脚本加载,然后执行回调。\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-b4ed7f62\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/module.md\n// module id = 113\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('p', [_vm._v(\"vue 是一个 js 框架,它实现了自己的模板,通过 .vue 文件可以经过编译成一个数据改变驱动视图改变的 js代码。\"), _c('br'), _vm._v(\"\\n那么这其中又是经历了什么样的步骤呢?\")]), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('p', [_vm._v(\"一个 vue 对象是通过 new Vue({options}) 来得到的,也就是构造函数了。我们来看这个函数\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"function Vue (options) {\\n if (process.env.NODE_ENV !== 'production' &&\\n !(this instanceof Vue)\\n ) {\\n warn('Vue is a constructor and should be called with the `new` keyword')\\n }\\n this._init(options)\\n}\\n\\n// 这里是一系列对这个函数进行的继承\\ninitMixin(Vue)\\nstateMixin(Vue)\\neventsMixin(Vue)\\nlifecycleMixin(Vue)\\nrenderMixin(Vue)\\n\\nexport default Vue\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"可以看到这个 Vue 构造函数,它经历了 5 个系列的mixin,并在新创建时会运行 _init(options) 方法。\"), _c('br'), _vm._v(\"\\n那么我们来看看, 这五个 mixin 分别做了啥。\")]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E4%B8%80%E4%B8%AA-initmixin\"\n }\n }, [_vm._v(\"第一个 initMixin\")]), _vm._v(\" \"), _c('p', [_vm._v(\"它只做了一件事, 定义了 _init 方法,那么你就知道创造一个Vue 实例,它执行的 _init 方法就是上面这个方法了。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"Vue.prototype._init = function (options?: Object) {\\n....\\n}\\n\")])]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E4%BA%8C%E4%B8%AA-statemixin\"\n }\n }, [_vm._v(\"第二个 stateMixin\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" Object.defineProperty(Vue.prototype, '$data', dataDef) // 能够返回 data\\n Object.defineProperty(Vue.prototype, '$props', propsDef) // 能够返回 props\\n Vue.prototype.$set = set // 就是我们用的 this.$set(this.people, 'name', ‘clever')方法, 下同。\\n Vue.prototype.$delete = del\\n Vue.prototype.$watch = function (\\n ....\\n }\\n\")])]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E4%B8%89%E4%B8%AA-eventsmixin\"\n }\n }, [_vm._v(\"第三个 eventsMixin\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"Vue.prototype.$on = function (eventname, fn) {\\n....\\n}\\nVue.prototype._$once = function (eventname, fn) {\\n // 监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。\\n}\\nVue.prototype._off = function (event, fn) {\\n// 移除自定义事件监听器。\\n}\\nVue.prototype.$emit = function (event) {\\n// 触发一个事件\\n}\\n\")])]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E5%9B%9B%E4%B8%AA-lifecyclemixin\"\n }\n }, [_vm._v(\"第四个 lifecycleMixin\"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/0227c8c15285fbd179573e7cd8cb4718.png\",\n \"alt\": \"在这里插入图片描述\"\n }\n })]), _vm._v(\" \"), _c('h5', {\n attrs: {\n \"id\": \"%E7%AC%AC%E4%BA%94%E4%B8%AA-rendermixin\"\n }\n }, [_vm._v(\"第五个 renderMixin\"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/715399a9ac35cef7c3aca2d3242ca5a3.png\",\n \"alt\": \"在这里插入图片描述\"\n }\n })]), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('p', [_vm._v(\"好, 这个 Vue 继承了这些方法,它已经是一个完整的 Vue 了,而新创建的时候要执行 _init 方法了, 现在我们来看看这个方法里面做了写啥\")]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"vm._uid = uid++ 创建 uid\")]), _vm._v(\" \"), _c('li', [_vm._v(\"合并 options\")]), _vm._v(\" \"), _c('li', [_vm._v(\"initLifecycle\"), _c('br'), _vm._v(\"\\ninitEvents(vm)\"), _c('br'), _vm._v(\"\\ninitRender(vm)\"), _c('br'), _vm._v(\"\\ncallHook(vm, 'beforeCreate')\"), _c('br'), _vm._v(\"\\ninitInjections(vm) // resolve injections before data/props\"), _c('br'), _vm._v(\"\\ninitState(vm)\"), _c('br'), _vm._v(\"\\ninitProvide(vm) // resolve provide after data/props\"), _c('br'), _vm._v(\"\\ncallHook(vm, 'created')\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"关于 initLifecycle\\n vm.$parent = parent\\n vm.$root = parent ? parent.$root : vm\\n vm.$children = []\\n vm.$refs = {}\\n vm._watcher = null\\n vm._inactive = null\\n vm._directInactive = false\\n vm._isMounted = false\\n vm._isDestroyed = false\\n vm._isBeingDestroyed = false\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"initEvents\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" vm._events = Object.create(null)\\n vm._hasHookEvent = false\\n // init parent attached events\\n const listeners = vm.$options._parentListeners\\n if (listeners) {\\n updateComponentListeners(vm, listeners)\\n }\\n 就是判断父级是否有事件监听,然后给父级进行监听事件\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"initRender\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" vm._vnode = null // the root of the child tree\\n vm._staticTrees = null // v-once cached trees\\n const options = vm.$options\\n const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree\\n const renderContext = parentVnode && parentVnode.context\\n vm.$slots = resolveSlots(options._renderChildren, renderContext)\\n vm.$scopedSlots = emptyObject\\n // 实例绑定 createElement 方法,以便可以正常在内部渲染\\n // 参数顺序 tag, data, children, normalizationType, alwaysNormalize\\n // 内部使用从模板编译而来的渲染函数\\n \\n vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)\\n // 公共版本必须是 normalization 的渲染函数\\n vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)\\n\\n // $attrs & $listeners 应该被监听热更新\\n const parentData = parentVnode && parentVnode.data\\n\\n if (process.env.NODE_ENV !== 'production') {\\n defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {\\n !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)\\n }, true)\\n defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {\\n !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)\\n }, true)\\n } else {\\n defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)\\n defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)\\n }\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_c('p', [_vm._v(\"callHook(vm, 'beforeCreate') 执行 beforeCreate 函数\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"initInjections(vm) 收集注入的依赖\")])])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" const result = resolveInject(vm.$options.inject, vm)\\n if (result) {\\n toggleObserving(false)\\n Object.keys(result).forEach(key => {\\n if (process.env.NODE_ENV !== 'production') {\\n defineReactive(vm, key, result[key], () => {\\n warn(\\n \\t`避免直接改变注入的值,因为将会重新渲染所提供这个值的组件, \\n \\t改变的值是: \\\"${key}\\\",\\n vm\\n )\\n })\\n } else {\\n defineReactive(vm, key, result[key])\\n }\\n })\\n toggleObserving(true)\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"initState 监听值收集依赖\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" vm._watchers = []\\n const opts = vm.$options\\n if (opts.props) initProps(vm, opts.props) // 赋值 props 数据并收集依赖\\n if (opts.methods) initMethods(vm, opts.methods) // 赋值 vue 的各个 method\\n if (opts.data) {\\n initData(vm) // 收集依赖\\n } else {\\n observe(vm._data = {}, true /* asRootData */)\\n }\\n if (opts.computed) initComputed(vm, opts.computed) // 收集依赖\\n if (opts.watch && opts.watch !== nativeWatch) {\\n initWatch(vm, opts.watch) // 初始化你写的监听对象\\n }\\n \\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"initProvide\")])]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\" const provide = vm.$options.provide\\n if (provide) {\\n vm._provided = typeof provide === 'function'\\n ? provide.call(vm)\\n : provide\\n }\\n\")])]), _vm._v(\" \"), _c('ul', [_c('li', [_vm._v(\"callHook(vm, 'created') 执行 created 函数\")])]), _vm._v(\" \"), _c('blockquote', [_c('p', [_vm._v(\"这就是 _init 中各个函数所做的了。 我们可以看到总结过来就是\"), _c('br'), _vm._v(\"\\n1.初始化了生命状态\"), _c('br'), _vm._v(\"\\n2.进行事件上的监听\"), _c('br'), _vm._v(\"\\n3.渲染视图的初始化;收集所用到的父组件的数据或事件\"), _c('br'), _vm._v(\"\\n4.调用你写的 beforeCreate 方法\"), _c('br'), _vm._v(\"\\n5.initState, 处理了 vue 中的各种数据(props/data/methods.....), 也在这一步针对这些数据进行了依赖收集,数据更新绑定\"), _c('br'), _vm._v(\"\\n6.初始化了 provide 的值, 也可以看出它没有被收集依赖, 是不会影响视图改变的\"), _c('br'), _vm._v(\"\\n7.调用了你写的 created 方法了。\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"以上,就是你 let app = new Vue() 这一步所发生的所有事情了。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"那通过平时的使用我们知道,我们是通过调用 $mounted 能把它挂载上页面。所以接下来我们就可以来看看 vue 自己的 $mount 都做了些什么?\")]), _vm._v(\" \"), _c('p', [_vm._v(\"答: 就是把 template 或直接写的 render 函数,进行指令、事件等vue 中的语法解析编译成一个 AST 树。通过这个树,通过之前 initRender 中的 $createElement 方法可以生成虚拟DOM, 然后添加到页面中出,不就渲染出来了么。 如果大家使用过 Vue 的 $createElement 方法,相信就知道这个 ast 是怎么一个结构了,拿示例的来说\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"createElement(\\n 'div',\\n [\\n '先写一些文字',\\n createElement('h1', '一则头条'),\\n createElement(MyComponent, {\\n props: {\\n someProp: 'foobar'\\n }\\n })\\n ]\\n)\\n\")])]), _vm._v(\" \"), _c('hr'), _vm._v(\" \"), _c('p', [_vm._v(\"说完了整个过程,现在还比较疑惑的就是它的收集依赖,然后数据改变引起的视图改变到底怎么做呢?\")]), _vm._v(\" \"), _c('p', [_vm._v(\"也就是说我们要实现一个模式,vm 可能 data 对象中的一个值,比如 name 改变了,然后就调用重新渲染的函数,这里为了性能,是生成了一个虚拟 Dom, 然后比较哪里改变了进行相应的替换。\"), _c('br'), _vm._v(\"\\n把这个模式抽象出来,就是我们需要一个\")]), _vm._v(\" \"), _c('p', [_vm._v(\"先说具体实现: 我们视图更新依赖到的值收集起来,这里把每一个依赖到的值称作 dep。每个依赖订阅与它有关的 vue 的 watcher 中心, 这里把 dep 所订阅的 watcher 叫做 sub。 那么 dep 被改变的时候,获取它订阅了那些 watcher, 通知他们进行 update 视图啦。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"可以看我画的简图\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/417c23088cb0224c6a4464651452c604.png\",\n \"alt\": \"在这里插入图片描述\"\n }\n }), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/59c0e76f684052df524761ee8f4f6942.png\",\n \"alt\": \"在这里插入图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"这就是依赖对象 和 一个 watcher 对象所涉及到的处理了。\"), _c('br'), _vm._v(\"\\nVue 中又是怎么把一个个的属性,进行操作变成依赖的呢?\"), _c('br'), _vm._v(\"\\n对应它的源码就是 defineReactive 方法。源码如图:\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"export function defineReactive (obj, key, val, customSetter, shallow) {\\n const dep = new Dep()\\n \\n // 迎合预定义的getter / setter\\n const getter = property && property.get\\n const setter = property && property.set\\n if ((!getter || setter) && arguments.length === 2) {\\n val = obj[key]\\n }\\n \\n let childOb = !shallow && observe(val)\\n Object.defineProperty(obj, key, {\\n enumerable: true,\\n configurable: true,\\n get: function reactiveGetter () {\\n const value = getter ? getter.call(obj) : val\\n if (Dep.target) {\\n dep.depend()\\n if (childOb) {\\n childOb.dep.depend()\\n if (Array.isArray(value)) {\\n dependArray(value)\\n }\\n }\\n }\\n return value\\n },\\n set: function reactiveSetter (newVal) {\\n const value = getter ? getter.call(obj) : val\\n if (newVal === value || (newVal !== newVal && value !== value)) {\\n return\\n }\\n if (setter) {\\n setter.call(obj, newVal)\\n } else {\\n val = newVal\\n }\\n childOb = !shallow && observe(newVal)\\n dep.notify()\\n }\\n })\\n}\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这里就是用的 Object.defineProperty 方法,它可以重写对象的属性的 get 和 set 方法。 当这个属性在 Vue 中被获取的时候,就开始收集依赖,把它收集在这个 vm 的 watcher 中心,并且让它订阅这个 watcher 。当这个属性被重新设置时, 就通知它所订阅的对象去更新。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"大致要知道的就是这些了。关于具体是怎么实现把 template 编译成 ast 树, 具体是怎么把事件绑定上去的,你可以尽情的去猜想和推测,或者去看看具体的实现方式。但是 VUE 框架总体来说所做的就是这些事情了, 如果有觉得本文写的不清楚的地方可以提哈 = =\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-c25c4a6e\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/vue.md\n// module id = 114\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('h3', {\n attrs: {\n \"id\": \"%E4%BB%80%E4%B9%88%E6%98%AF-ssl-%E8%AF%81%E4%B9%A6\"\n }\n }, [_vm._v(\"什么是 SSL 证书\")]), _vm._v(\" \"), _c('p', [_vm._v(\"SSL 证书是数字证书,是由证书认证机构(CA)对证书申请者真实身份验证之后,用CA的根证书对申请人的一些基本信息以及申请人的公钥进行签名(相当于加盖发证书机构的公章)后形成的一个数字文件。\"), _c('br'), _vm._v(\"\\n通俗一点, 就是包含了所使用的服务器的信息和公钥,这些信息是公开的。 而私钥是由证书申请者自己保存的,是保密的。\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E6%80%8E%E4%B9%88%E9%85%8D%E7%BD%AE%E5%91%A2\"\n }\n }, [_vm._v(\"怎么配置呢\")]), _vm._v(\" \"), _c('p', [_vm._v(\"要在服务器要发送SSL证书,那么在服务器上配置。首先你得有一个\"), _c('code', {\n pre: true\n }, [_vm._v(\"证书\")]), _vm._v(\"!\"), _c('br'), _vm._v(\"\\n证书如何获取,我也是百度了很多,也有很多免费的网站,ssl for free, freessl.org, 但是发现证书没有.crt 文件,或者验证域名不方便。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"######这里先讲一下 SSL 证书包含的几个文件:\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\".key\")]), _vm._v(\" => 私钥\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\".csr\")]), _vm._v(\" => 公钥,让你的证书去认证的时,可以把它发送给权威机构认证。\"), _c('br'), _vm._v(\" \"), _c('code', {\n pre: true\n }, [_vm._v(\".crt\")]), _vm._v(\" => 证书了\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里可以自己去体验一下用 OpenSSL 给自己生成一个证书。需自行安装 openssl 软件\"), _c('br'), _vm._v(\" \"), _c('a', {\n attrs: {\n \"href\": \"https://www.cnblogs.com/yjmyzz/p/openssl-tutorial.html\"\n }\n }, [_vm._v(\"openssl 给自己颁发证书的步骤\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"openssl 的证书既然是自己给自己颁发的,那么就不具有权威性,在连接时会向客户端提示不是安全的链接。也没有小绿锁。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"最后我发现腾讯云有免费的证书可以用。\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/6c5cab65c69586f9228ecf2896a12ad0.jpeg\",\n \"alt\": \"这里写图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"申请好证书之后, 如图\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/6aa539ccc93a564348a6b975a998cf80.jpeg\",\n \"alt\": \"这里写图片描述\"\n }\n }), _c('br'), _vm._v(\"\\n点击详情可以看到 \"), _c('a', {\n attrs: {\n \"href\": \"https://cloud.tencent.com/document/product/400/4143\"\n }\n }, [_vm._v(\"指引文档\")]), _vm._v(\", 里面的服务器配置方法就很全面了, 不管你是不是用它的证书,都可以按照这样去配。\")]), _vm._v(\" \"), _c('h3', {\n attrs: {\n \"id\": \"%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B-ssl-%E5%B7%A5%E4%BD%9C\"\n }\n }, [_vm._v(\"了解一下 SSL 工作\")]), _vm._v(\" \"), _c('p', [_vm._v(\"我们知道,在客户端和服务器之间的请求,就是来回发送数据,普通的 HTTP 协议是没有对数据进行加密的,那么可能被第三方截取到你的请求,改变你们的通信数据或者冒充身份发送信息给你。 哇,突然感觉这些很常见 = =\")]), _vm._v(\" \"), _c('p', [_vm._v(\"HTTPS 就是一种安全的通信了,它会加密你的数据, 使第三方无法获取,并在建立通信的握手阶段,互相确认身份, 使别人无法冒充身份。 SSL 证书就是使用在 握手阶段,通过证书的信息,确认服务器身份。\"), _c('br'), _vm._v(\"\\n具体如下:\")]), _vm._v(\" \"), _c('p', [_c('img', {\n attrs: {\n \"src\": \"https://i-blog.csdnimg.cn/blog_migrate/29104c17fe7cebb091ec79ad1714bc32.png\",\n \"alt\": \"这里写图片描述\"\n }\n })]), _vm._v(\" \"), _c('p', [_vm._v(\"详细讲解每一步就是:\"), _c('br'), _vm._v(\"\\n第一步:客户端 say hello, 向服务端发送自己生成的 random 数,和自己支持的加密方法。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"第二步:服务端接收消息后,又向客户端发送自己生成的 random 数、SSL 证书,确定使用的加密方法。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"第三步:客户端读取证书信息,确认证书有效,然后自己再生成一个 random 数,并使用证书的公钥进行加密,发送给服务端。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"第四步:服务端使用自己本地的私钥,解密获取客户端的随机数。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"第五步:客户端和服务端使用这三个随机数生成 \"), _c('code', {\n pre: true\n }, [_vm._v(\"对话密钥\")]), _vm._v(\", 用来加密接下来的对话过程。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"可以看到下面英文有提到 session。 因为如果每次建立连接都去进行这五步,那么会很浪费时间。 所以这里有 sessionID 和 session ticket 两种。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"session ID,记录有本次的握手存在,再次发送信息时,客户端发送该ID,服务器确认该编号存在,双方就不再进行握手阶段剩余的步骤,而直接用已有的对话密钥进行加密通信。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"session ID是目前所有浏览器都支持的方法,但是它的缺点在于session ID往往只保留在一台服务器上。所以,如果客户端的请求发到另一台服务器,就无法恢复对话。session ticket就是为了解决这个问题而诞生的,目前只有Firefox和Chrome浏览器支持。session ticket是加密的,只有服务器才能解密,其中包括本次对话的主要信息,比如对话密钥和加密方法。当服务器收到session ticket以后,解密后就不必重新生成对话密钥了。\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-cccb5efa\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/ssl.md\n// module id = 115\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('undefined', [_c('p', [_vm._v(\"###\"), _c('strong', [_vm._v(\"什么是PWA\")]), _c('br'), _vm._v(\"\\n先说一下全名,progressive web app: 渐进式网页应用。这是谷歌推出的,我是这样理解的:\")]), _vm._v(\" \"), _c('ul', [_c('li', [_c('p', [_vm._v(\"我们一般写web应用,在 pc 上是没有缓存的,打开页面的时去请求数据。\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"第二个也没有像 app 一样的小图标放在桌面,一点开就进入了应用,而是通过打开浏览器输入网址,\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"第三个就是,不能像 app 一样给用户推送消息,像微博会跟你推送说有谁评论了你的微博之类的功能。\")])])]), _vm._v(\" \"), _c('p', [_vm._v(\"而谷歌推出的 pwa,就是具有这些了这些特点, 使我们的 web 应用,能够像一款 app 一样使用。并且对比与 app, 它不用复杂的安装,也不用下载更新包,刷新页面就可以了(注意到缓存的处理)。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"####\"), _c('strong', [_vm._v(\"那么这些功能分别是怎么实现的呢?\")]), _c('br'), _vm._v(\" \"), _c('strong', [_vm._v(\"关于缓存\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"其实这个就是 我们平时做的 Session 啊、localStorage、CacheStorage 之类的。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里用的就是 \"), _c('a', {\n attrs: {\n \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/CacheStorage\"\n }\n }, [_vm._v(\"cacheStorage\")]), _vm._v(\" 缓存,它提供了一个ServiceWorker类型的工作者或window范围可以访问的所有命名缓存的主目录, 并维护字符串的映射名称到相应的 Cache 对象。\"), _c('br'), _vm._v(\"\\n主要方法包括:\"), _c('br'), _vm._v(\" \"), _c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20171112212302073?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n }), _c('br'), _vm._v(\"\\n有了这些方法你可以对你的缓存进行操作。目前还在草案状态,仅火狐和谷歌浏览器支持此特性。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"PWA是通过 ServiceWorker 访问 cache ,所以需要注册 ServiceWorker 工作者。在之前别忘记判断浏览器是否支持。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"if ('serviceWorker' in navigator) {\\n\\tnavigator.serviceWorker.register(sw.js) // 注册sw.js 文件中变成的服务对象,返回注册成功的对象\\n\\t.then(function(swReg){\\n swRegistration = swReg;\\n }).catch(function(error) {\\n console.error('Service Worker Error', error);\\n });\\n}\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这个 \"), _c('a', {\n attrs: {\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\"\n }\n }, [_vm._v(\"Service Worker\")]), _vm._v(\" 服务工作者就厉害了,它相当于浏览器和网络之间的代理服务器,可以拦截网络请求,做一些你可能需要的处理(请求资源从缓存中获取等)。\")]), _vm._v(\" \"), _c('ul', [_c('li', [_c('p', [_vm._v(\"它能够创建有效的离线体验,拦截网络请求,并根据网络是否可用判断是否使用缓存数据或者更新缓存数据。\")])]), _vm._v(\" \"), _c('li', [_c('p', [_vm._v(\"它们还允许访问推送的通知和后台的API。\")])])]), _vm._v(\" \"), _c('p', [_vm._v(\"关于 sw.js 中具体的缓存的代码:\")]), _vm._v(\" \"), _c('p', [_vm._v(\"创建需要缓存的文件\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"'use strict'\\nlet cacheName = 'pwa-demo-assets'; // 缓存名字\\nlet imgCacheName = 'pwa-img';\\nlet filesToCache;\\nfilesToCache = [ // 所需缓存的文件\\n '/',\\n '/index.html',\\n '/scripts/app.js',\\n '/assets/imgs/48.png',\\n '/assets/imgs/96.png',\\n '/assets/imgs/192.png',\\n '/dist/js/app.js',\\n '/manifest.json'\\n];\\n\\nself.addEventListener('install', function(e) {\\n e.waitUntil(\\n\\t // 安装服务者时,对需要缓存的文件进行缓存\\n caches.open(cacheName).then(function(cache) {\\n return cache.addAll(filesToCache);\\n })\\n );\\n});\\n\\n\\nself.addEventListener('fetch', (e) => {\\n // 判断地址是不是需要实时去请求,是就继续发送请求\\n if (e.request.url.indexOf('/api/400/200') > -1) {\\n e.respondWith(\\n caches.open(imgCacheName).then(function(cache){\\n return fetch(e.request).then(function (response){\\n cache.put(e.request.url, response.clone()); // 每请求一次缓存更新一次新加载的图片\\n return response;\\n });\\n })\\n );\\n } else {\\n e.respondWith(\\n\\t // 匹配到缓存资源,就从缓存中返回数据\\n caches.match(e.request).then(function (response) {\\n return response || fetch(e.request);\\n })\\n );\\n }\\n\\n});\\n\")])]), _vm._v(\" \"), _c('p', [_c('strong', [_vm._v(\"这里进而就引入到 pwa 的推送通知功能。这都是通过 ServiceWorker 去实现的。\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"基本原理是,你的客户端要和推送服务进行绑定,会生成一个绑定后的推送服务API接口,服务端调用此接口,发送消息。同时,浏览器也要支持推送功能,在注册 sw 时, 加上推送功能的判断。\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"if ('serviceWorker' in navigator && 'PushManager' in window) {\\n\\tnavigator.serviceWorker.register(sw.js)\\n\\t.then(function(swReg) {\\n swRegistration = swReg;\\n }).catch(function(error) {\\n console.error('Service Worker Error', error);\\n });\\n } else {\\n console.warn('Push messaging is not supported');\\n }\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"PushManager 注册好之后, 那么要做的就是浏览器和服务器的绑定了。\")]), _vm._v(\" \"), _c('p', [_c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20171112203347222?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n }), _c('br'), _vm._v(\"\\n此图是用户订阅某个应用程序的推送服务。\"), _c('br'), _vm._v(\"\\n客户端传入应用程序服务器公钥,向将生成端点的 \"), _c('code', {\n pre: true\n }, [_vm._v(\"webpush 服务器\")]), _vm._v(\"( 这是谷歌自己实现的一个推送功能的服务器)发出网络请求,将生成的端点(一个推送服务)与应用程序公钥关联,并将端点返回给应用程序。浏览器会将此端点添加到 PushSubscription,通过 promise异步成功时,可以将它的信息保存到你的数据库。\")]), _vm._v(\" \"), _c('p', [_c('img', {\n attrs: {\n \"src\": \"https://img-blog.csdn.net/20171112203753820?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFkYWRlZ2FuaHVv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast\",\n \"alt\": \"这里写图片描述\"\n }\n }), _c('br'), _vm._v(\"\\n服务器发送推送的时候,请求相关接口,验证成功后推送服务会发消息给客户端。\")]), _vm._v(\" \"), _c('p', [_c('strong', [_vm._v(\"最后关于桌面小图标\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"这个可以说是非常简单了,就是一个manifest.json配置文件,然后在页面引入此文件就好了\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"\\n\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"关于\"), _c('a', {\n attrs: {\n \"href\": \"https://developers.google.com/web/fundamentals/web-app-manifest/\"\n }\n }, [_vm._v(\"清单内容\")]), _vm._v(\"这里简单介绍一下:\")]), _vm._v(\" \"), _c('pre', {\n pre: true\n }, [_c('code', {\n attrs: {\n \"v-pre\": \"\"\n }\n }, [_vm._v(\"{\\n \\\"short_name\\\": \\\"pwa\\\",\\n \\\"name\\\": \\\"pwa - demo\\\", // 应用名称\\n \\\"icons\\\": [ // 应用显示图标,根据容器大小适配\\n {\\n \\\"src\\\": \\\"assets/imgs/48.png\\\",\\n \\\"type\\\": \\\"image/png\\\",\\n \\\"sizes\\\": \\\"48x48\\\"\\n },\\n {\\n \\\"src\\\": \\\"assets/imgs/96.png\\\",\\n \\\"type\\\": \\\"image/png\\\",\\n \\\"sizes\\\": \\\"96x96\\\"\\n },\\n {\\n \\\"src\\\": \\\"assets/imgs/192.png\\\",\\n \\\"type\\\": \\\"image/png\\\",\\n \\\"sizes\\\": \\\"192x192\\\"\\n }\\n ],\\n \\\"background_color\\\": \\\"#2196F3\\\", // 刚打开页面时的背景\\n \\\"theme_color\\\": \\\"#2196F3\\\", // 主题颜色\\n \\\"display\\\": \\\"standalone\\\", //独立显示\\n \\\"start_url\\\": \\\"index.html?launcher=true\\\" // 启动的页面\\n}\\n\")])]), _vm._v(\" \"), _c('p', [_vm._v(\"好了, 如果感兴趣赶快上手吧。\"), _c('br'), _vm._v(\"\\n可以查看\"), _c('a', {\n attrs: {\n \"href\": \"https://developers.google.com/web/progressive-web-apps/\"\n }\n }, [_vm._v(\"谷歌官方教程\")]), _vm._v(\"。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里说一下坑的点,\\tPWA应用需要在本地localhost:8080 上运行或者 https 协议下, 要保证你的页面是安全页面。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"添加桌面时,确保你的谷歌浏览器可以显示弹出通知。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"如果你要自己实现推送,自己服务器要有公钥和私钥的获取, 这里可以通过 https://web-push-codelab.glitch.me 获取, 用 chrome 的 \"), _c('a', {\n attrs: {\n \"href\": \"https://github.com/zaru/webpush\"\n }\n }, [_vm._v(\"webpush\")]), _vm._v(\" 推送。\")]), _vm._v(\" \"), _c('p', [_vm._v(\"这里也可以看一下我的\"), _c('a', {\n attrs: {\n \"href\": \"https://github.com/cleverboy32/chorme-PwaDemo\"\n }\n }, [_vm._v(\" GitHub 项项目 \")]), _vm._v(\",官方也有很多例子。\")])])\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-d6a1b6d6\",\"hasScoped\":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./~/vue-markdown-loader/lib/markdown-compiler.js?raw!./src/docs/pwa.md\n// module id = 116\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./aliyun-server.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/aliyun-server.md\n// module id = 118\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./bem.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/bem.md\n// module id = 119\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./canvas-svg.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/canvas-svg.md\n// module id = 120\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./code-format.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/code-format.md\n// module id = 121\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./module.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/module.md\n// module id = 122\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./postcss-plugin.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/postcss-plugin.md\n// module id = 123\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./pwa.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/pwa.md\n// module id = 124\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./readme.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/readme.md\n// module id = 125\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./safe.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/safe.md\n// module id = 126\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./ssl.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/ssl.md\n// module id = 127\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./typescript.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/typescript.md\n// module id = 128\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./vue.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/vue.md\n// module id = 129\n// module chunks = 0","module.exports = require(\"!!vue-loader!../../node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./webpack.md\");\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/webpack.md\n// module id = 130\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/static/js/1.4d2d575be7ce3da7f9de.js b/dist/static/js/1.4d2d575be7ce3da7f9de.js new file mode 100644 index 0000000..65c9810 --- /dev/null +++ b/dist/static/js/1.4d2d575be7ce3da7f9de.js @@ -0,0 +1,2 @@ +webpackJsonp([1],{101:function(e,A,n){var t=n(7)(null,null,null,null,null);e.exports=t.exports},102:function(e,A,n){function t(e){n(85)}var a=n(7)(n(82),n(106),t,null,null);e.exports=a.exports},106:function(e,A){e.exports={render:function(){var e=this,A=e.$createElement,n=e._self._c||A;return n("div",{staticClass:"passage"},[n("page-header"),e._v(" "),n("div",{staticClass:"content"},[n("div",{staticClass:"nav"},e._l(e.navs,function(A,t){return n("ul",{key:t},e._l(A.children,function(t,a){return n("router-link",{key:a,staticClass:"docs-trans page-docs__side__item",attrs:{to:A.path+"/"+t.path,tag:"li"}},[n("div",{staticClass:"nav__item__title"},[e._v(e._s(t.name))])])}))})),e._v(" "),n("div",{staticClass:"blog"},[n("router-view")],1)])],1)},staticRenderFns:[]}},117:function(e,A,n){e.exports={render:function(){var e=this,A=e.$createElement,n=e._self._c||A;return n("div",{staticClass:"header"},[e._m(0),e._v(" "),n("div",{ref:"nav",staticClass:"nav"},[n("span",[e._v("blog")]),e._v(" "),e._m(1),e._v(" "),n("span",[e._v("pay")])])])},staticRenderFns:[function(){var e=this,A=e.$createElement,t=e._self._c||A;return t("div",{staticClass:"title"},[t("img",{attrs:{src:n(87)}}),e._v(" "),t("div",[e._v("cleverboy blog")])])},function(){var e=this,A=e.$createElement,n=e._self._c||A;return n("span",[n("a",{attrs:{href:"https://github.com/cleverboy32"}},[e._v("github")])])}]}},78:function(e,A,n){function t(e){return n(a(e))}function a(e){var A=i[e];if(!(A+1))throw new Error("Cannot find module '"+e+"'.");return A}var i={"./components/bg-page.vue":29,"./components/left-nav.vue":101,"./components/page-header.vue":80,"./components/passage.vue":102};t.keys=function(){return Object.keys(i)},t.resolve=a,e.exports=t,t.id=78},80:function(e,A,n){function t(e){n(86)}var a=n(7)(n(81),n(117),t,null,null);e.exports=a.exports},81:function(e,A,n){"use strict";Object.defineProperty(A,"__esModule",{value:!0}),A.default={name:"PageHeader",mounted:function(){var e=this.$refs.nav;this.$refs.nav.querySelectorAll("span").forEach(function(e){}),e.addEventListener("mouseover",this.stopAnimate,!1),e.addEventListener("mouseout",this.playAnimate,!1)},methods:{stopAnimate:function(e){this.$refs.nav.querySelectorAll("span").forEach(function(e){e.style.animationPlayState="paused"})},playAnimate:function(){this.$refs.nav.querySelectorAll("span").forEach(function(e){e.style.animationPlayState="running"})}}}},82:function(e,A,n){"use strict";Object.defineProperty(A,"__esModule",{value:!0});var t=n(80),a=n.n(t),i=n(30),o=n.n(i);A.default={name:"Passage",data:function(){return{navs:o.a}},components:{PageHeader:a.a}}},83:function(e,A,n){A=e.exports=n(76)(!0),A.push([e.i,".passage{position:relative;width:100%;padding-top:90px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#8c5d2c;-webkit-perspective:300;text-align:center}.passage a{color:#8c5d2c;text-decoration:none}.passage .content{width:100%;height:100%;background:#fffde6;position:relative;margin:0 auto;padding-top:100px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}.passage .nav{width:300px;border-right:5px solid #8c5d2c}.passage .nav ul>li{text-align:left;line-height:28px;list-style:none}.passage .blog{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;text-align:justify;padding:20px 16px;line-height:24px}.passage .blog h1,.passage .blog h2,.passage .blog h3,.passage .blog h4,.passage .blog h5,.passage .blog h6{margin:16px 0;font-weight:500}.passage .blog pre{background-color:#eaefdc;padding:20px 12px}.passage .blog p{margin:16px 0}.passage .blog a{color:red;margin-left:4px}.passage .router-link-active{background-color:#efe9c385}.passage .nav__item__title{padding:8px 16px}.passage .content:after,.passage .content:before{-webkit-animation:move1 5s infinite ease-in-out}@-webkit-keyframes move1{0%{-webkit-transform:rotateX(-15deg);height:110px}25%{top:-10;height:110px;-webkit-transform:rotateX(0deg)}50%{top:-20px;height:150px;-webkit-transform:rotateX(15deg)}75%{height:110px;-webkit-transform:rotateX(0deg)}to{height:110px;-webkit-transform:rotateX(-15deg)}}@keyframes move1{0%{-webkit-transform:rotateX(-15deg);height:110px}25%{top:-10;height:110px;-webkit-transform:rotateX(0deg)}50%{top:-20px;height:150px;-webkit-transform:rotateX(15deg)}75%{height:110px;-webkit-transform:rotateX(0deg)}to{height:110px;-webkit-transform:rotateX(-15deg)}}","",{version:3,sources:["/Users/cleverboy/Documents/mything/cboy-blog/src/components/passage.vue"],names:[],mappings:"AACA,SACE,kBAAmB,AACnB,WAAY,AACZ,iBAAkB,AAClB,8BAA+B,AACvB,sBAAuB,AAC/B,mBAAoB,AACpB,wBAAyB,AACzB,iBAAmB,CACpB,AACD,WACE,cAAe,AACf,oBAAsB,CACvB,AACD,kBACE,WAAY,AACZ,YAAa,AACb,mBAAoB,AACpB,kBAAmB,AACnB,cAAe,AACf,kBAAmB,AACnB,8BAA+B,AACvB,sBAAuB,AAC/B,oBAAqB,AACrB,oBAAqB,AACrB,YAAc,CACf,AACD,cACE,YAAa,AACb,8BAAgC,CACjC,AACD,oBACE,gBAAiB,AACjB,iBAAkB,AAClB,eAAiB,CAClB,AACD,eACE,mBAAoB,AAChB,WAAY,AACR,OAAQ,AAChB,YAAa,AACb,mBAAoB,AACpB,kBAAmB,AACnB,gBAAkB,CACnB,AACD,4GAME,cAAiB,AACjB,eAAiB,CAClB,AACD,mBACE,yBAA0B,AAC1B,iBAAmB,CACpB,AACD,iBACE,aAAiB,CAClB,AACD,iBACE,UAAW,AACX,eAAiB,CAClB,AACD,6BACE,0BAA4B,CAC7B,AACD,2BACE,gBAAkB,CACnB,AACD,iDAEE,+CAAiD,CAClD,AACD,yBACA,GACI,kCAAmC,AACnC,YAAc,CACjB,AACD,IACI,QAAS,AACT,aAAc,AACd,+BAAiC,CACpC,AACD,IACI,UAAW,AACX,aAAc,AACd,gCAAkC,CACrC,AACD,IACI,aAAc,AACd,+BAAiC,CACpC,AACD,GACI,aAAc,AACd,iCAAmC,CACtC,CACA,AACD,iBACA,GACI,kCAAmC,AACnC,YAAc,CACjB,AACD,IACI,QAAS,AACT,aAAc,AACd,+BAAiC,CACpC,AACD,IACI,UAAW,AACX,aAAc,AACd,gCAAkC,CACrC,AACD,IACI,aAAc,AACd,+BAAiC,CACpC,AACD,GACI,aAAc,AACd,iCAAmC,CACtC,CACA",file:"passage.vue",sourcesContent:["\n.passage {\n position: relative;\n width: 100%;\n padding-top: 90px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n background: #8c5d2c;\n -webkit-perspective: 300;\n text-align: center;\n}\n.passage a {\n color: #8c5d2c;\n text-decoration: none;\n}\n.passage .content {\n width: 100%;\n height: 100%;\n background: #fffde6;\n position: relative;\n margin: 0 auto;\n padding-top: 100px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.passage .nav {\n width: 300px;\n border-right: 5px solid #8c5d2c;\n}\n.passage .nav ul > li {\n text-align: left;\n line-height: 28px;\n list-style: none;\n}\n.passage .blog {\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n height: 100%;\n text-align: justify;\n padding: 20px 16px;\n line-height: 24px;\n}\n.passage .blog h1,\n.passage .blog h2,\n.passage .blog h3,\n.passage .blog h4,\n.passage .blog h5,\n.passage .blog h6 {\n margin: 16px 0px;\n font-weight: 500;\n}\n.passage .blog pre {\n background-color: #eaefdc;\n padding: 20px 12px;\n}\n.passage .blog p {\n margin: 16px 0px;\n}\n.passage .blog a {\n color: red;\n margin-left: 4px;\n}\n.passage .router-link-active {\n background-color: #efe9c385;\n}\n.passage .nav__item__title {\n padding: 8px 16px;\n}\n.passage .content:before,\n.passage .content:after {\n -webkit-animation: move1 5s infinite ease-in-out;\n}\n@-webkit-keyframes move1 {\n0% {\n -webkit-transform: rotateX(-15deg);\n height: 110px;\n}\n25% {\n top: -10;\n height: 110px;\n -webkit-transform: rotateX(0deg);\n}\n50% {\n top: -20px;\n height: 150px;\n -webkit-transform: rotateX(15deg);\n}\n75% {\n height: 110px;\n -webkit-transform: rotateX(0deg);\n}\n100% {\n height: 110px;\n -webkit-transform: rotateX(-15deg);\n}\n}\n@keyframes move1 {\n0% {\n -webkit-transform: rotateX(-15deg);\n height: 110px;\n}\n25% {\n top: -10;\n height: 110px;\n -webkit-transform: rotateX(0deg);\n}\n50% {\n top: -20px;\n height: 150px;\n -webkit-transform: rotateX(15deg);\n}\n75% {\n height: 110px;\n -webkit-transform: rotateX(0deg);\n}\n100% {\n height: 110px;\n -webkit-transform: rotateX(-15deg);\n}\n}\n"],sourceRoot:""}])},84:function(e,A,n){A=e.exports=n(76)(!0),A.push([e.i,".header{background:#fffde6;height:70px;width:100%;top:0;left:0;text-align:left;position:fixed}.header .nav{display:inline-block;height:100%;cursor:pointer;position:relative}.header .nav>span{display:inline-block;background:#8c5d2c;color:#fff;font-size:20px;padding:2px 0;border-radius:4px;margin-top:20px;width:60px;text-align:center;position:absolute;-webkit-box-shadow:1px 1px 10px 0 #fed76f;box-shadow:1px 1px 10px 0 #fed76f}.header .nav>span a{color:inherit}.header .nav span:first-child{-webkit-animation:rotate1 7s infinite}@-webkit-keyframes rotate1{0%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}33%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}66%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}to{z-index:2;-webkit-transform:rotateY(60deg);left:30px}}@keyframes rotate1{0%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}33%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}66%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}to{z-index:2;-webkit-transform:rotateY(60deg);left:30px}}.header .nav span:nth-child(2){-webkit-animation:rotate2 7s infinite}@-webkit-keyframes rotate2{0%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}33%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}66%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}to{z-index:10;-webkit-transform:rotateY(0deg);left:90px}}@keyframes rotate2{0%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}33%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}66%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}to{z-index:10;-webkit-transform:rotateY(0deg);left:90px}}.header .nav span:last-child{-webkit-animation:rotate3 7s infinite}@-webkit-keyframes rotate3{0%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}33%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}66%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}to{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}}@keyframes rotate3{0%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}33%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}66%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}to{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}}.header .title{color:#e48734;font-weight:700;float:right;margin-right:30px}.header .title img{width:80px;height:80px;margin-top:5px;border:1px dotted #f8f03e;border-radius:40px}.header .title div{font-size:28px;float:right;margin-top:47px}","",{version:3,sources:["/Users/cleverboy/Documents/mything/cboy-blog/src/components/page-header.vue"],names:[],mappings:"AACA,QACE,mBAAoB,AACpB,YAAa,AACb,WAAY,AACZ,MAAO,AACP,OAAQ,AACR,gBAAiB,AACjB,cAAgB,CACjB,AACD,aACE,qBAAsB,AACtB,YAAa,AACb,eAAgB,AAChB,iBAAmB,CACpB,AACD,kBACE,qBAAsB,AACtB,mBAAoB,AACpB,WAAY,AACZ,eAAgB,AAChB,cAAiB,AACjB,kBAAmB,AACnB,gBAAiB,AACjB,WAAY,AACZ,kBAAmB,AACnB,kBAAmB,AACnB,0CAA6C,AACrC,iCAAqC,CAC9C,AACD,oBACE,aAAe,CAChB,AACD,8BACE,qCAAuC,CACxC,AACD,2BACA,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,CACA,AACD,mBACA,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,CACA,AACD,+BACE,qCAAuC,CACxC,AACD,2BACA,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,CACA,AACD,mBACA,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,CACA,AACD,6BACE,qCAAuC,CACxC,AACD,2BACA,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,CACA,AACD,mBACA,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,CACA,AACD,eACE,cAAe,AACf,gBAAkB,AAClB,YAAa,AACb,iBAAmB,CACpB,AACD,mBACE,WAAY,AACZ,YAAa,AACb,eAAgB,AAChB,0BAA2B,AAC3B,kBAAoB,CACrB,AACD,mBACE,eAAgB,AAChB,YAAa,AACb,eAAiB,CAClB",file:"page-header.vue",sourcesContent:["\n.header {\n background: #fffde6;\n height: 70px;\n width: 100%;\n top: 0;\n left: 0;\n text-align: left;\n position: fixed;\n}\n.header .nav {\n display: inline-block;\n height: 100%;\n cursor: pointer;\n position: relative;\n}\n.header .nav > span {\n display: inline-block;\n background: #8c5d2c;\n color: #fff;\n font-size: 20px;\n padding: 2px 0px;\n border-radius: 4px;\n margin-top: 20px;\n width: 60px;\n text-align: center;\n position: absolute;\n -webkit-box-shadow: 1px 1px 10px 0px #FED76F;\n box-shadow: 1px 1px 10px 0px #FED76F;\n}\n.header .nav > span a {\n color: inherit;\n}\n.header .nav span:nth-child(1) {\n -webkit-animation: rotate1 7s infinite;\n}\n@-webkit-keyframes rotate1 {\n0% {\n z-index: 2;\n -webkit-transform: rotateY(60deg);\n left: 30px;\n}\n33% {\n z-index: 3;\n -webkit-transform: rotateY(-60deg);\n left: 150px;\n}\n66% {\n z-index: 10;\n -webkit-transform: rotateY(0deg);\n left: 90px;\n}\n100% {\n z-index: 2;\n -webkit-transform: rotateY(60deg);\n left: 30px;\n}\n}\n@keyframes rotate1 {\n0% {\n z-index: 2;\n -webkit-transform: rotateY(60deg);\n left: 30px;\n}\n33% {\n z-index: 3;\n -webkit-transform: rotateY(-60deg);\n left: 150px;\n}\n66% {\n z-index: 10;\n -webkit-transform: rotateY(0deg);\n left: 90px;\n}\n100% {\n z-index: 2;\n -webkit-transform: rotateY(60deg);\n left: 30px;\n}\n}\n.header .nav span:nth-child(2) {\n -webkit-animation: rotate2 7s infinite;\n}\n@-webkit-keyframes rotate2 {\n0% {\n z-index: 10;\n -webkit-transform: rotateY(0deg);\n left: 90px;\n}\n33% {\n z-index: 2;\n -webkit-transform: rotateY(60deg);\n left: 30px;\n}\n66% {\n z-index: 3;\n -webkit-transform: rotateY(-60deg);\n left: 150px;\n}\n100% {\n z-index: 10;\n -webkit-transform: rotateY(0deg);\n left: 90px;\n}\n}\n@keyframes rotate2 {\n0% {\n z-index: 10;\n -webkit-transform: rotateY(0deg);\n left: 90px;\n}\n33% {\n z-index: 2;\n -webkit-transform: rotateY(60deg);\n left: 30px;\n}\n66% {\n z-index: 3;\n -webkit-transform: rotateY(-60deg);\n left: 150px;\n}\n100% {\n z-index: 10;\n -webkit-transform: rotateY(0deg);\n left: 90px;\n}\n}\n.header .nav span:last-child {\n -webkit-animation: rotate3 7s infinite;\n}\n@-webkit-keyframes rotate3 {\n0% {\n z-index: 3;\n -webkit-transform: rotateY(-60deg);\n left: 150px;\n}\n33% {\n z-index: 10;\n -webkit-transform: rotateY(0deg);\n left: 90px;\n}\n66% {\n z-index: 2;\n -webkit-transform: rotateY(60deg);\n left: 30px;\n}\n100% {\n z-index: 3;\n -webkit-transform: rotateY(-60deg);\n left: 150px;\n}\n}\n@keyframes rotate3 {\n0% {\n z-index: 3;\n -webkit-transform: rotateY(-60deg);\n left: 150px;\n}\n33% {\n z-index: 10;\n -webkit-transform: rotateY(0deg);\n left: 90px;\n}\n66% {\n z-index: 2;\n -webkit-transform: rotateY(60deg);\n left: 30px;\n}\n100% {\n z-index: 3;\n -webkit-transform: rotateY(-60deg);\n left: 150px;\n}\n}\n.header .title {\n color: #e48734;\n font-weight: bold;\n float: right;\n margin-right: 30px;\n}\n.header .title img {\n width: 80px;\n height: 80px;\n margin-top: 5px;\n border: 1px dotted #f8f03e;\n border-radius: 40px;\n}\n.header .title div {\n font-size: 28px;\n float: right;\n margin-top: 47px;\n}\n"],sourceRoot:""}])},85:function(e,A,n){var t=n(83);"string"==typeof t&&(t=[[e.i,t,""]]),t.locals&&(e.exports=t.locals);n(77)("d0462bdc",t,!0)},86:function(e,A,n){var t=n(84);"string"==typeof t&&(t=[[e.i,t,""]]),t.locals&&(e.exports=t.locals);n(77)("e1ba4f2c",t,!0)},87:function(e,A,n){e.exports=n.p+"static/img/lion.a2175aa.jpeg"}}); +//# sourceMappingURL=1.4d2d575be7ce3da7f9de.js.map \ No newline at end of file diff --git a/dist/static/js/1.4d2d575be7ce3da7f9de.js.map b/dist/static/js/1.4d2d575be7ce3da7f9de.js.map new file mode 100644 index 0000000..47a3f42 --- /dev/null +++ b/dist/static/js/1.4d2d575be7ce3da7f9de.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///static/js/1.4d2d575be7ce3da7f9de.js","webpack:///./src/components/left-nav.vue","webpack:///./src/components/passage.vue","webpack:///./src/components/passage.vue?e1c4","webpack:///./src/components/page-header.vue?9f9e","webpack:///./src ^\\.\\/components.*\\.vue$","webpack:///./src/components/page-header.vue","webpack:///page-header.vue","webpack:///passage.vue","webpack:///./src/components/passage.vue?b39f","webpack:///./src/components/page-header.vue?181b","webpack:///./src/components/passage.vue?bae4","webpack:///./src/components/page-header.vue?ca89","webpack:///./src/assets/lion.jpeg"],"names":["webpackJsonp","101","module","exports","__webpack_require__","Component","102","injectStyle","ssrContext","106","render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","_l","nav","key","item","index","attrs","to","path","tag","_s","name","staticRenderFns","117","_m","ref","src","href","78","webpackContext","req","webpackContextResolve","id","map","Error","./components/bg-page.vue","./components/left-nav.vue","./components/page-header.vue","./components/passage.vue","keys","Object","resolve","80","81","__webpack_exports__","defineProperty","value","mounted","container","$refs","querySelectorAll","forEach","addEventListener","stopAnimate","playAnimate","methods","event","style","animationPlayState","82","__WEBPACK_IMPORTED_MODULE_0__components_page_header__","__WEBPACK_IMPORTED_MODULE_0__components_page_header___default","n","__WEBPACK_IMPORTED_MODULE_1__map_json__","__WEBPACK_IMPORTED_MODULE_1__map_json___default","data","navs","a","components","PageHeader","83","push","i","version","sources","names","mappings","file","sourcesContent","sourceRoot","84","85","content","locals","86","87","p"],"mappings":"AAAAA,cAAc,IAERC,IACA,SAAUC,EAAQC,EAASC,GCHjC,GAAAC,GAAAD,EAAA,GAEA,KAEA,KAEA,KAEA,KAEA,KAGAF,GAAAC,QAAAE,EAAAF,SDUMG,IACA,SAAUJ,EAAQC,EAASC,GExBjC,QAAAG,GAAAC,GACAJ,EAAA,IAEA,GAAAC,GAAAD,EAAA,GAEAA,EAAA,IAEAA,EAAA,KAEAG,EAEA,KAEA,KAGAL,GAAAC,QAAAE,EAAAF,SF+BMM,IACA,SAAUP,EAAQC,GGhDxBD,EAAAC,SAAgBO,OAAA,WAAmB,GAAAC,GAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,CAC1E,OAAAE,GAAA,OACAE,YAAA,YACGF,EAAA,eAAAJ,EAAAO,GAAA,KAAAH,EAAA,OACHE,YAAA,YACGF,EAAA,OACHE,YAAA,OACGN,EAAAQ,GAAAR,EAAA,cAAAS,EAAAC,GACH,MAAAN,GAAA,MACAM,OACKV,EAAAQ,GAAAC,EAAA,kBAAAE,EAAAC,GACL,MAAAR,GAAA,eACAM,IAAAE,EACAN,YAAA,mCACAO,OACAC,GAAAL,EAAAM,KAAA,IAAAJ,EAAAI,KACAC,IAAA,QAEOZ,EAAA,OACPE,YAAA,qBACON,EAAAO,GAAAP,EAAAiB,GAAAN,EAAAO,iBAEJlB,EAAAO,GAAA,KAAAH,EAAA,OACHE,YAAA,SACGF,EAAA,0BACFe,qBHsDKC,IACA,SAAU7B,EAAQC,EAASC,GIhFjCF,EAAAC,SAAgBO,OAAA,WAAmB,GAAAC,GAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,CAC1E,OAAAE,GAAA,OACAE,YAAA,WACGN,EAAAqB,GAAA,GAAArB,EAAAO,GAAA,KAAAH,EAAA,OACHkB,IAAA,MACAhB,YAAA,QACGF,EAAA,QAAAJ,EAAAO,GAAA,UAAAP,EAAAO,GAAA,KAAAP,EAAAqB,GAAA,GAAArB,EAAAO,GAAA,KAAAH,EAAA,QAAAJ,EAAAO,GAAA,cACFY,iBAAA,WAA+B,GAAAnB,GAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,CACvE,OAAAE,GAAA,OACAE,YAAA,UACGF,EAAA,OACHS,OACAU,IAAA9B,EAAA,OAEGO,EAAAO,GAAA,KAAAH,EAAA,OAAAJ,EAAAO,GAAA,uBACF,WAAa,GAAAP,GAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,CACrD,OAAAE,GAAA,QAAAA,EAAA,KACAS,OACAW,KAAA,oCAEGxB,EAAAO,GAAA,kBJuFGkB,GACA,SAAUlC,EAAQC,EAASC,GKtGjC,QAAAiC,GAAAC,GACA,MAAAlC,GAAAmC,EAAAD,IAEA,QAAAC,GAAAD,GACA,GAAAE,GAAAC,EAAAH,EACA,MAAAE,EAAA,GACA,SAAAE,OAAA,uBAAAJ,EAAA,KACA,OAAAE,GAbA,GAAAC,IACAE,2BAAA,GACAC,4BAAA,IACAC,+BAAA,GACAC,2BAAA,IAWAT,GAAAU,KAAA,WACA,MAAAC,QAAAD,KAAAN,IAEAJ,EAAAY,QAAAV,EACArC,EAAAC,QAAAkC,EACAA,EAAAG,GAAA,ILkHMU,GACA,SAAUhD,EAAQC,EAASC,GMvIjC,QAAAG,GAAAC,GACAJ,EAAA,IAEA,GAAAC,GAAAD,EAAA,GAEAA,EAAA,IAEAA,EAAA,KAEAG,EAEA,KAEA,KAGAL,GAAAC,QAAAE,EAAAF,SN8IMgD,GACA,SAAUjD,EAAQkD,EAAqBhD,GAE7C,YACA4C,QAAOK,eAAeD,EAAqB,cAAgBE,OAAO,IOpJlEF,EAAA,SPoKIvB,KOlKJ,aPmKI0B,QAAS,WACL,GAAIC,GAAY5C,KAAK6C,MOlK7BrC,GPmKQR,MAAK6C,MAAMrC,IAAIsC,iBAAiB,QAAQC,QAAQ,SAAUrC,MAG1DkC,EAAUI,iBAAiB,YAAahD,KAAKiD,aOlKrD,GPmKQL,EAAUI,iBAAiB,WAAYhD,KAAKkD,aOlKpD,IPqKIC,SACIF,YAAa,SAAqBG,GACnBpD,KAAK6C,MAAMrC,IAAIsC,iBOnKtC,QPoKiBC,QAAQ,SAAUrC,GACnBA,EAAK2C,MAAMC,mBOnK3B,YPsKQJ,YAAa,WACElD,KAAK6C,MAAMrC,IAAIsC,iBOnKtC,QPoKiBC,QAAQ,SAAUrC,GACnBA,EAAK2C,MAAMC,mBOnK3B,gBP2KMC,GACA,SAAUjE,EAAQkD,EAAqBhD,GAE7C,YACA4C,QAAOK,eAAeD,EAAqB,cAAgBE,OAAO,GAC7C,IAAIc,GAAwDhE,EAAoB,IAC5EiE,EAAgEjE,EAAoBkE,EAAEF,GACtFG,EAA0CnE,EAAoB,IAC9DoE,EAAkDpE,EAAoBkE,EAAEC,EQnLjGnB,GAAA,SRwNIvB,KQtNJ,URuNI4C,KAAM,WACF,OACIC,KQrNZF,EAAAG,IRyNIC,YQrNJC,WAAAR,EAAAM,KR4NMG,GACA,SAAU5E,EAAQC,EAASC,GS1QjCD,EAAAD,EAAAC,QAAAC,EAAA,QAKAD,EAAA4E,MAAA7E,EAAA8E,EAAA,2rDAAktD,IAAQC,QAAA,EAAAC,SAAA,2EAAAC,SAAAC,SAAA,iiCAAAC,KAAA,cAAAC,gBAAA,mwEAA87GC,WAAA,OTmRlpKC,GACA,SAAUtF,EAAQC,EAASC,GUzRjCD,EAAAD,EAAAC,QAAAC,EAAA,QAKAD,EAAA4E,MAAA7E,EAAA8E,EAAA,w3EAA+4E,IAAQC,QAAA,EAAAC,SAAA,+EAAAC,SAAAC,SAAA,qoDAAAC,KAAA,kBAAAC,gBAAA,g0GAAumKC,WAAA,OVkSx/OE,GACA,SAAUvF,EAAQC,EAASC,GWrSjC,GAAAsF,GAAAtF,EAAA,GACA,iBAAAsF,SAAAxF,EAAA8E,EAAAU,EAAA,MACAA,EAAAC,SAAAzF,EAAAC,QAAAuF,EAAAC,OAEAvF,GAAA,eAAAsF,GAAA,IX8SME,GACA,SAAU1F,EAAQC,EAASC,GYnTjC,GAAAsF,GAAAtF,EAAA,GACA,iBAAAsF,SAAAxF,EAAA8E,EAAAU,EAAA,MACAA,EAAAC,SAAAzF,EAAAC,QAAAuF,EAAAC,OAEAvF,GAAA,eAAAsF,GAAA,IZ4TMG,GACA,SAAU3F,EAAQC,EAASC,GapUjCF,EAAAC,QAAAC,EAAA0F,EAAA","file":"static/js/1.4d2d575be7ce3da7f9de.js","sourcesContent":["webpackJsonp([1],{\n\n/***/ 101:\n/***/ (function(module, exports, __webpack_require__) {\n\nvar Component = __webpack_require__(7)(\n /* script */\n null,\n /* template */\n null,\n /* styles */\n null,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n\n/***/ 102:\n/***/ (function(module, exports, __webpack_require__) {\n\nfunction injectStyle (ssrContext) {\n __webpack_require__(85)\n}\nvar Component = __webpack_require__(7)(\n /* script */\n __webpack_require__(82),\n /* template */\n __webpack_require__(106),\n /* styles */\n injectStyle,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n\n/***/ 106:\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"passage\"\n }, [_c('page-header'), _vm._v(\" \"), _c('div', {\n staticClass: \"content\"\n }, [_c('div', {\n staticClass: \"nav\"\n }, _vm._l((_vm.navs), function(nav, key) {\n return _c('ul', {\n key: key\n }, _vm._l((nav.children), function(item, index) {\n return _c('router-link', {\n key: index,\n staticClass: \"docs-trans page-docs__side__item\",\n attrs: {\n \"to\": nav.path + '/' + item.path,\n \"tag\": \"li\"\n }\n }, [_c('div', {\n staticClass: \"nav__item__title\"\n }, [_vm._v(_vm._s(item.name))])])\n }))\n })), _vm._v(\" \"), _c('div', {\n staticClass: \"blog\"\n }, [_c('router-view')], 1)])], 1)\n},staticRenderFns: []}\n\n/***/ }),\n\n/***/ 117:\n/***/ (function(module, exports, __webpack_require__) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"header\"\n }, [_vm._m(0), _vm._v(\" \"), _c('div', {\n ref: \"nav\",\n staticClass: \"nav\"\n }, [_c('span', [_vm._v(\"blog\")]), _vm._v(\" \"), _vm._m(1), _vm._v(\" \"), _c('span', [_vm._v(\"pay\")])])])\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"title\"\n }, [_c('img', {\n attrs: {\n \"src\": __webpack_require__(87)\n }\n }), _vm._v(\" \"), _c('div', [_vm._v(\"cleverboy blog\")])])\n},function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('span', [_c('a', {\n attrs: {\n \"href\": \"https://github.com/cleverboy32\"\n }\n }, [_vm._v(\"github\")])])\n}]}\n\n/***/ }),\n\n/***/ 78:\n/***/ (function(module, exports, __webpack_require__) {\n\nvar map = {\n\t\"./components/bg-page.vue\": 29,\n\t\"./components/left-nav.vue\": 101,\n\t\"./components/page-header.vue\": 80,\n\t\"./components/passage.vue\": 102\n};\nfunction webpackContext(req) {\n\treturn __webpack_require__(webpackContextResolve(req));\n};\nfunction webpackContextResolve(req) {\n\tvar id = map[req];\n\tif(!(id + 1)) // check for number or string\n\t\tthrow new Error(\"Cannot find module '\" + req + \"'.\");\n\treturn id;\n};\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = 78;\n\n/***/ }),\n\n/***/ 80:\n/***/ (function(module, exports, __webpack_require__) {\n\nfunction injectStyle (ssrContext) {\n __webpack_require__(86)\n}\nvar Component = __webpack_require__(7)(\n /* script */\n __webpack_require__(81),\n /* template */\n __webpack_require__(117),\n /* styles */\n injectStyle,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n\n/***/ 81:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'PageHeader',\n mounted: function mounted() {\n var container = this.$refs.nav;\n this.$refs.nav.querySelectorAll('span').forEach(function (item) {\n // item.addEventListener('mouseout', this.)\n });\n container.addEventListener('mouseover', this.stopAnimate, false);\n container.addEventListener('mouseout', this.playAnimate, false);\n },\n\n methods: {\n stopAnimate: function stopAnimate(event) {\n var span = this.$refs.nav.querySelectorAll('span');\n span.forEach(function (item) {\n item.style.animationPlayState = 'paused';\n });\n },\n playAnimate: function playAnimate() {\n var span = this.$refs.nav.querySelectorAll('span');\n span.forEach(function (item) {\n item.style.animationPlayState = 'running';\n });\n }\n }\n});\n\n/***/ }),\n\n/***/ 82:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_page_header__ = __webpack_require__(80);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_page_header___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__components_page_header__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__map_json__ = __webpack_require__(30);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__map_json___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__map_json__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n name: 'Passage',\n data: function data() {\n return {\n navs: __WEBPACK_IMPORTED_MODULE_1__map_json___default.a\n };\n },\n\n components: {\n PageHeader: __WEBPACK_IMPORTED_MODULE_0__components_page_header___default.a\n }\n});\n\n/***/ }),\n\n/***/ 83:\n/***/ (function(module, exports, __webpack_require__) {\n\nexports = module.exports = __webpack_require__(76)(true);\n// imports\n\n\n// module\nexports.push([module.i, \".passage{position:relative;width:100%;padding-top:90px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#8c5d2c;-webkit-perspective:300;text-align:center}.passage a{color:#8c5d2c;text-decoration:none}.passage .content{width:100%;height:100%;background:#fffde6;position:relative;margin:0 auto;padding-top:100px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}.passage .nav{width:300px;border-right:5px solid #8c5d2c}.passage .nav ul>li{text-align:left;line-height:28px;list-style:none}.passage .blog{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;text-align:justify;padding:20px 16px;line-height:24px}.passage .blog h1,.passage .blog h2,.passage .blog h3,.passage .blog h4,.passage .blog h5,.passage .blog h6{margin:16px 0;font-weight:500}.passage .blog pre{background-color:#eaefdc;padding:20px 12px}.passage .blog p{margin:16px 0}.passage .blog a{color:red;margin-left:4px}.passage .router-link-active{background-color:#efe9c385}.passage .nav__item__title{padding:8px 16px}.passage .content:after,.passage .content:before{-webkit-animation:move1 5s infinite ease-in-out}@-webkit-keyframes move1{0%{-webkit-transform:rotateX(-15deg);height:110px}25%{top:-10;height:110px;-webkit-transform:rotateX(0deg)}50%{top:-20px;height:150px;-webkit-transform:rotateX(15deg)}75%{height:110px;-webkit-transform:rotateX(0deg)}to{height:110px;-webkit-transform:rotateX(-15deg)}}@keyframes move1{0%{-webkit-transform:rotateX(-15deg);height:110px}25%{top:-10;height:110px;-webkit-transform:rotateX(0deg)}50%{top:-20px;height:150px;-webkit-transform:rotateX(15deg)}75%{height:110px;-webkit-transform:rotateX(0deg)}to{height:110px;-webkit-transform:rotateX(-15deg)}}\", \"\", {\"version\":3,\"sources\":[\"/Users/cleverboy/Documents/mything/cboy-blog/src/components/passage.vue\"],\"names\":[],\"mappings\":\"AACA,SACE,kBAAmB,AACnB,WAAY,AACZ,iBAAkB,AAClB,8BAA+B,AACvB,sBAAuB,AAC/B,mBAAoB,AACpB,wBAAyB,AACzB,iBAAmB,CACpB,AACD,WACE,cAAe,AACf,oBAAsB,CACvB,AACD,kBACE,WAAY,AACZ,YAAa,AACb,mBAAoB,AACpB,kBAAmB,AACnB,cAAe,AACf,kBAAmB,AACnB,8BAA+B,AACvB,sBAAuB,AAC/B,oBAAqB,AACrB,oBAAqB,AACrB,YAAc,CACf,AACD,cACE,YAAa,AACb,8BAAgC,CACjC,AACD,oBACE,gBAAiB,AACjB,iBAAkB,AAClB,eAAiB,CAClB,AACD,eACE,mBAAoB,AAChB,WAAY,AACR,OAAQ,AAChB,YAAa,AACb,mBAAoB,AACpB,kBAAmB,AACnB,gBAAkB,CACnB,AACD,4GAME,cAAiB,AACjB,eAAiB,CAClB,AACD,mBACE,yBAA0B,AAC1B,iBAAmB,CACpB,AACD,iBACE,aAAiB,CAClB,AACD,iBACE,UAAW,AACX,eAAiB,CAClB,AACD,6BACE,0BAA4B,CAC7B,AACD,2BACE,gBAAkB,CACnB,AACD,iDAEE,+CAAiD,CAClD,AACD,yBACA,GACI,kCAAmC,AACnC,YAAc,CACjB,AACD,IACI,QAAS,AACT,aAAc,AACd,+BAAiC,CACpC,AACD,IACI,UAAW,AACX,aAAc,AACd,gCAAkC,CACrC,AACD,IACI,aAAc,AACd,+BAAiC,CACpC,AACD,GACI,aAAc,AACd,iCAAmC,CACtC,CACA,AACD,iBACA,GACI,kCAAmC,AACnC,YAAc,CACjB,AACD,IACI,QAAS,AACT,aAAc,AACd,+BAAiC,CACpC,AACD,IACI,UAAW,AACX,aAAc,AACd,gCAAkC,CACrC,AACD,IACI,aAAc,AACd,+BAAiC,CACpC,AACD,GACI,aAAc,AACd,iCAAmC,CACtC,CACA\",\"file\":\"passage.vue\",\"sourcesContent\":[\"\\n.passage {\\n position: relative;\\n width: 100%;\\n padding-top: 90px;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n background: #8c5d2c;\\n -webkit-perspective: 300;\\n text-align: center;\\n}\\n.passage a {\\n color: #8c5d2c;\\n text-decoration: none;\\n}\\n.passage .content {\\n width: 100%;\\n height: 100%;\\n background: #fffde6;\\n position: relative;\\n margin: 0 auto;\\n padding-top: 100px;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n}\\n.passage .nav {\\n width: 300px;\\n border-right: 5px solid #8c5d2c;\\n}\\n.passage .nav ul > li {\\n text-align: left;\\n line-height: 28px;\\n list-style: none;\\n}\\n.passage .blog {\\n -webkit-box-flex: 1;\\n -ms-flex: 1;\\n flex: 1;\\n height: 100%;\\n text-align: justify;\\n padding: 20px 16px;\\n line-height: 24px;\\n}\\n.passage .blog h1,\\n.passage .blog h2,\\n.passage .blog h3,\\n.passage .blog h4,\\n.passage .blog h5,\\n.passage .blog h6 {\\n margin: 16px 0px;\\n font-weight: 500;\\n}\\n.passage .blog pre {\\n background-color: #eaefdc;\\n padding: 20px 12px;\\n}\\n.passage .blog p {\\n margin: 16px 0px;\\n}\\n.passage .blog a {\\n color: red;\\n margin-left: 4px;\\n}\\n.passage .router-link-active {\\n background-color: #efe9c385;\\n}\\n.passage .nav__item__title {\\n padding: 8px 16px;\\n}\\n.passage .content:before,\\n.passage .content:after {\\n -webkit-animation: move1 5s infinite ease-in-out;\\n}\\n@-webkit-keyframes move1 {\\n0% {\\n -webkit-transform: rotateX(-15deg);\\n height: 110px;\\n}\\n25% {\\n top: -10;\\n height: 110px;\\n -webkit-transform: rotateX(0deg);\\n}\\n50% {\\n top: -20px;\\n height: 150px;\\n -webkit-transform: rotateX(15deg);\\n}\\n75% {\\n height: 110px;\\n -webkit-transform: rotateX(0deg);\\n}\\n100% {\\n height: 110px;\\n -webkit-transform: rotateX(-15deg);\\n}\\n}\\n@keyframes move1 {\\n0% {\\n -webkit-transform: rotateX(-15deg);\\n height: 110px;\\n}\\n25% {\\n top: -10;\\n height: 110px;\\n -webkit-transform: rotateX(0deg);\\n}\\n50% {\\n top: -20px;\\n height: 150px;\\n -webkit-transform: rotateX(15deg);\\n}\\n75% {\\n height: 110px;\\n -webkit-transform: rotateX(0deg);\\n}\\n100% {\\n height: 110px;\\n -webkit-transform: rotateX(-15deg);\\n}\\n}\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n/***/ }),\n\n/***/ 84:\n/***/ (function(module, exports, __webpack_require__) {\n\nexports = module.exports = __webpack_require__(76)(true);\n// imports\n\n\n// module\nexports.push([module.i, \".header{background:#fffde6;height:70px;width:100%;top:0;left:0;text-align:left;position:fixed}.header .nav{display:inline-block;height:100%;cursor:pointer;position:relative}.header .nav>span{display:inline-block;background:#8c5d2c;color:#fff;font-size:20px;padding:2px 0;border-radius:4px;margin-top:20px;width:60px;text-align:center;position:absolute;-webkit-box-shadow:1px 1px 10px 0 #fed76f;box-shadow:1px 1px 10px 0 #fed76f}.header .nav>span a{color:inherit}.header .nav span:first-child{-webkit-animation:rotate1 7s infinite}@-webkit-keyframes rotate1{0%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}33%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}66%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}to{z-index:2;-webkit-transform:rotateY(60deg);left:30px}}@keyframes rotate1{0%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}33%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}66%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}to{z-index:2;-webkit-transform:rotateY(60deg);left:30px}}.header .nav span:nth-child(2){-webkit-animation:rotate2 7s infinite}@-webkit-keyframes rotate2{0%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}33%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}66%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}to{z-index:10;-webkit-transform:rotateY(0deg);left:90px}}@keyframes rotate2{0%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}33%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}66%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}to{z-index:10;-webkit-transform:rotateY(0deg);left:90px}}.header .nav span:last-child{-webkit-animation:rotate3 7s infinite}@-webkit-keyframes rotate3{0%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}33%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}66%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}to{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}}@keyframes rotate3{0%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}33%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}66%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}to{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}}.header .title{color:#e48734;font-weight:700;float:right;margin-right:30px}.header .title img{width:80px;height:80px;margin-top:5px;border:1px dotted #f8f03e;border-radius:40px}.header .title div{font-size:28px;float:right;margin-top:47px}\", \"\", {\"version\":3,\"sources\":[\"/Users/cleverboy/Documents/mything/cboy-blog/src/components/page-header.vue\"],\"names\":[],\"mappings\":\"AACA,QACE,mBAAoB,AACpB,YAAa,AACb,WAAY,AACZ,MAAO,AACP,OAAQ,AACR,gBAAiB,AACjB,cAAgB,CACjB,AACD,aACE,qBAAsB,AACtB,YAAa,AACb,eAAgB,AAChB,iBAAmB,CACpB,AACD,kBACE,qBAAsB,AACtB,mBAAoB,AACpB,WAAY,AACZ,eAAgB,AAChB,cAAiB,AACjB,kBAAmB,AACnB,gBAAiB,AACjB,WAAY,AACZ,kBAAmB,AACnB,kBAAmB,AACnB,0CAA6C,AACrC,iCAAqC,CAC9C,AACD,oBACE,aAAe,CAChB,AACD,8BACE,qCAAuC,CACxC,AACD,2BACA,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,CACA,AACD,mBACA,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,CACA,AACD,+BACE,qCAAuC,CACxC,AACD,2BACA,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,CACA,AACD,mBACA,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,CACA,AACD,6BACE,qCAAuC,CACxC,AACD,2BACA,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,CACA,AACD,mBACA,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,CACA,AACD,eACE,cAAe,AACf,gBAAkB,AAClB,YAAa,AACb,iBAAmB,CACpB,AACD,mBACE,WAAY,AACZ,YAAa,AACb,eAAgB,AAChB,0BAA2B,AAC3B,kBAAoB,CACrB,AACD,mBACE,eAAgB,AAChB,YAAa,AACb,eAAiB,CAClB\",\"file\":\"page-header.vue\",\"sourcesContent\":[\"\\n.header {\\n background: #fffde6;\\n height: 70px;\\n width: 100%;\\n top: 0;\\n left: 0;\\n text-align: left;\\n position: fixed;\\n}\\n.header .nav {\\n display: inline-block;\\n height: 100%;\\n cursor: pointer;\\n position: relative;\\n}\\n.header .nav > span {\\n display: inline-block;\\n background: #8c5d2c;\\n color: #fff;\\n font-size: 20px;\\n padding: 2px 0px;\\n border-radius: 4px;\\n margin-top: 20px;\\n width: 60px;\\n text-align: center;\\n position: absolute;\\n -webkit-box-shadow: 1px 1px 10px 0px #FED76F;\\n box-shadow: 1px 1px 10px 0px #FED76F;\\n}\\n.header .nav > span a {\\n color: inherit;\\n}\\n.header .nav span:nth-child(1) {\\n -webkit-animation: rotate1 7s infinite;\\n}\\n@-webkit-keyframes rotate1 {\\n0% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n33% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n66% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n100% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n}\\n@keyframes rotate1 {\\n0% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n33% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n66% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n100% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n}\\n.header .nav span:nth-child(2) {\\n -webkit-animation: rotate2 7s infinite;\\n}\\n@-webkit-keyframes rotate2 {\\n0% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n33% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n66% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n100% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n}\\n@keyframes rotate2 {\\n0% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n33% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n66% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n100% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n}\\n.header .nav span:last-child {\\n -webkit-animation: rotate3 7s infinite;\\n}\\n@-webkit-keyframes rotate3 {\\n0% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n33% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n66% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n100% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n}\\n@keyframes rotate3 {\\n0% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n33% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n66% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n100% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n}\\n.header .title {\\n color: #e48734;\\n font-weight: bold;\\n float: right;\\n margin-right: 30px;\\n}\\n.header .title img {\\n width: 80px;\\n height: 80px;\\n margin-top: 5px;\\n border: 1px dotted #f8f03e;\\n border-radius: 40px;\\n}\\n.header .title div {\\n font-size: 28px;\\n float: right;\\n margin-top: 47px;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n/***/ }),\n\n/***/ 85:\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a \n\n\n\n// WEBPACK FOOTER //\n// page-header.vue?3059ab83","\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// passage.vue?ca4d8a08","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \".passage{position:relative;width:100%;padding-top:90px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#8c5d2c;-webkit-perspective:300;text-align:center}.passage a{color:#8c5d2c;text-decoration:none}.passage .content{width:100%;height:100%;background:#fffde6;position:relative;margin:0 auto;padding-top:100px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}.passage .nav{width:300px;border-right:5px solid #8c5d2c}.passage .nav ul>li{text-align:left;line-height:28px;list-style:none}.passage .blog{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;text-align:justify;padding:20px 16px;line-height:24px}.passage .blog h1,.passage .blog h2,.passage .blog h3,.passage .blog h4,.passage .blog h5,.passage .blog h6{margin:16px 0;font-weight:500}.passage .blog pre{background-color:#eaefdc;padding:20px 12px}.passage .blog p{margin:16px 0}.passage .blog a{color:red;margin-left:4px}.passage .router-link-active{background-color:#efe9c385}.passage .nav__item__title{padding:8px 16px}.passage .content:after,.passage .content:before{-webkit-animation:move1 5s infinite ease-in-out}@-webkit-keyframes move1{0%{-webkit-transform:rotateX(-15deg);height:110px}25%{top:-10;height:110px;-webkit-transform:rotateX(0deg)}50%{top:-20px;height:150px;-webkit-transform:rotateX(15deg)}75%{height:110px;-webkit-transform:rotateX(0deg)}to{height:110px;-webkit-transform:rotateX(-15deg)}}@keyframes move1{0%{-webkit-transform:rotateX(-15deg);height:110px}25%{top:-10;height:110px;-webkit-transform:rotateX(0deg)}50%{top:-20px;height:150px;-webkit-transform:rotateX(15deg)}75%{height:110px;-webkit-transform:rotateX(0deg)}to{height:110px;-webkit-transform:rotateX(-15deg)}}\", \"\", {\"version\":3,\"sources\":[\"/Users/cleverboy/Documents/mything/cboy-blog/src/components/passage.vue\"],\"names\":[],\"mappings\":\"AACA,SACE,kBAAmB,AACnB,WAAY,AACZ,iBAAkB,AAClB,8BAA+B,AACvB,sBAAuB,AAC/B,mBAAoB,AACpB,wBAAyB,AACzB,iBAAmB,CACpB,AACD,WACE,cAAe,AACf,oBAAsB,CACvB,AACD,kBACE,WAAY,AACZ,YAAa,AACb,mBAAoB,AACpB,kBAAmB,AACnB,cAAe,AACf,kBAAmB,AACnB,8BAA+B,AACvB,sBAAuB,AAC/B,oBAAqB,AACrB,oBAAqB,AACrB,YAAc,CACf,AACD,cACE,YAAa,AACb,8BAAgC,CACjC,AACD,oBACE,gBAAiB,AACjB,iBAAkB,AAClB,eAAiB,CAClB,AACD,eACE,mBAAoB,AAChB,WAAY,AACR,OAAQ,AAChB,YAAa,AACb,mBAAoB,AACpB,kBAAmB,AACnB,gBAAkB,CACnB,AACD,4GAME,cAAiB,AACjB,eAAiB,CAClB,AACD,mBACE,yBAA0B,AAC1B,iBAAmB,CACpB,AACD,iBACE,aAAiB,CAClB,AACD,iBACE,UAAW,AACX,eAAiB,CAClB,AACD,6BACE,0BAA4B,CAC7B,AACD,2BACE,gBAAkB,CACnB,AACD,iDAEE,+CAAiD,CAClD,AACD,yBACA,GACI,kCAAmC,AACnC,YAAc,CACjB,AACD,IACI,QAAS,AACT,aAAc,AACd,+BAAiC,CACpC,AACD,IACI,UAAW,AACX,aAAc,AACd,gCAAkC,CACrC,AACD,IACI,aAAc,AACd,+BAAiC,CACpC,AACD,GACI,aAAc,AACd,iCAAmC,CACtC,CACA,AACD,iBACA,GACI,kCAAmC,AACnC,YAAc,CACjB,AACD,IACI,QAAS,AACT,aAAc,AACd,+BAAiC,CACpC,AACD,IACI,UAAW,AACX,aAAc,AACd,gCAAkC,CACrC,AACD,IACI,aAAc,AACd,+BAAiC,CACpC,AACD,GACI,aAAc,AACd,iCAAmC,CACtC,CACA\",\"file\":\"passage.vue\",\"sourcesContent\":[\"\\n.passage {\\n position: relative;\\n width: 100%;\\n padding-top: 90px;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n background: #8c5d2c;\\n -webkit-perspective: 300;\\n text-align: center;\\n}\\n.passage a {\\n color: #8c5d2c;\\n text-decoration: none;\\n}\\n.passage .content {\\n width: 100%;\\n height: 100%;\\n background: #fffde6;\\n position: relative;\\n margin: 0 auto;\\n padding-top: 100px;\\n -webkit-box-sizing: border-box;\\n box-sizing: border-box;\\n display: -webkit-box;\\n display: -ms-flexbox;\\n display: flex;\\n}\\n.passage .nav {\\n width: 300px;\\n border-right: 5px solid #8c5d2c;\\n}\\n.passage .nav ul > li {\\n text-align: left;\\n line-height: 28px;\\n list-style: none;\\n}\\n.passage .blog {\\n -webkit-box-flex: 1;\\n -ms-flex: 1;\\n flex: 1;\\n height: 100%;\\n text-align: justify;\\n padding: 20px 16px;\\n line-height: 24px;\\n}\\n.passage .blog h1,\\n.passage .blog h2,\\n.passage .blog h3,\\n.passage .blog h4,\\n.passage .blog h5,\\n.passage .blog h6 {\\n margin: 16px 0px;\\n font-weight: 500;\\n}\\n.passage .blog pre {\\n background-color: #eaefdc;\\n padding: 20px 12px;\\n}\\n.passage .blog p {\\n margin: 16px 0px;\\n}\\n.passage .blog a {\\n color: red;\\n margin-left: 4px;\\n}\\n.passage .router-link-active {\\n background-color: #efe9c385;\\n}\\n.passage .nav__item__title {\\n padding: 8px 16px;\\n}\\n.passage .content:before,\\n.passage .content:after {\\n -webkit-animation: move1 5s infinite ease-in-out;\\n}\\n@-webkit-keyframes move1 {\\n0% {\\n -webkit-transform: rotateX(-15deg);\\n height: 110px;\\n}\\n25% {\\n top: -10;\\n height: 110px;\\n -webkit-transform: rotateX(0deg);\\n}\\n50% {\\n top: -20px;\\n height: 150px;\\n -webkit-transform: rotateX(15deg);\\n}\\n75% {\\n height: 110px;\\n -webkit-transform: rotateX(0deg);\\n}\\n100% {\\n height: 110px;\\n -webkit-transform: rotateX(-15deg);\\n}\\n}\\n@keyframes move1 {\\n0% {\\n -webkit-transform: rotateX(-15deg);\\n height: 110px;\\n}\\n25% {\\n top: -10;\\n height: 110px;\\n -webkit-transform: rotateX(0deg);\\n}\\n50% {\\n top: -20px;\\n height: 150px;\\n -webkit-transform: rotateX(15deg);\\n}\\n75% {\\n height: 110px;\\n -webkit-transform: rotateX(0deg);\\n}\\n100% {\\n height: 110px;\\n -webkit-transform: rotateX(-15deg);\\n}\\n}\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/css-loader?{\"minimize\":true,\"sourceMap\":true}!./~/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-3cc96a37\",\"scoped\":false,\"hasInlineConfig\":false}!./~/less-loader/dist/cjs.js?{\"sourceMap\":true}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/passage.vue\n// module id = 83\n// module chunks = 1","exports = module.exports = require(\"../../node_modules/css-loader/lib/css-base.js\")(true);\n// imports\n\n\n// module\nexports.push([module.id, \".header{background:#fffde6;height:70px;width:100%;top:0;left:0;text-align:left;position:fixed}.header .nav{display:inline-block;height:100%;cursor:pointer;position:relative}.header .nav>span{display:inline-block;background:#8c5d2c;color:#fff;font-size:20px;padding:2px 0;border-radius:4px;margin-top:20px;width:60px;text-align:center;position:absolute;-webkit-box-shadow:1px 1px 10px 0 #fed76f;box-shadow:1px 1px 10px 0 #fed76f}.header .nav>span a{color:inherit}.header .nav span:first-child{-webkit-animation:rotate1 7s infinite}@-webkit-keyframes rotate1{0%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}33%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}66%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}to{z-index:2;-webkit-transform:rotateY(60deg);left:30px}}@keyframes rotate1{0%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}33%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}66%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}to{z-index:2;-webkit-transform:rotateY(60deg);left:30px}}.header .nav span:nth-child(2){-webkit-animation:rotate2 7s infinite}@-webkit-keyframes rotate2{0%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}33%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}66%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}to{z-index:10;-webkit-transform:rotateY(0deg);left:90px}}@keyframes rotate2{0%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}33%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}66%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}to{z-index:10;-webkit-transform:rotateY(0deg);left:90px}}.header .nav span:last-child{-webkit-animation:rotate3 7s infinite}@-webkit-keyframes rotate3{0%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}33%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}66%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}to{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}}@keyframes rotate3{0%{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}33%{z-index:10;-webkit-transform:rotateY(0deg);left:90px}66%{z-index:2;-webkit-transform:rotateY(60deg);left:30px}to{z-index:3;-webkit-transform:rotateY(-60deg);left:150px}}.header .title{color:#e48734;font-weight:700;float:right;margin-right:30px}.header .title img{width:80px;height:80px;margin-top:5px;border:1px dotted #f8f03e;border-radius:40px}.header .title div{font-size:28px;float:right;margin-top:47px}\", \"\", {\"version\":3,\"sources\":[\"/Users/cleverboy/Documents/mything/cboy-blog/src/components/page-header.vue\"],\"names\":[],\"mappings\":\"AACA,QACE,mBAAoB,AACpB,YAAa,AACb,WAAY,AACZ,MAAO,AACP,OAAQ,AACR,gBAAiB,AACjB,cAAgB,CACjB,AACD,aACE,qBAAsB,AACtB,YAAa,AACb,eAAgB,AAChB,iBAAmB,CACpB,AACD,kBACE,qBAAsB,AACtB,mBAAoB,AACpB,WAAY,AACZ,eAAgB,AAChB,cAAiB,AACjB,kBAAmB,AACnB,gBAAiB,AACjB,WAAY,AACZ,kBAAmB,AACnB,kBAAmB,AACnB,0CAA6C,AACrC,iCAAqC,CAC9C,AACD,oBACE,aAAe,CAChB,AACD,8BACE,qCAAuC,CACxC,AACD,2BACA,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,CACA,AACD,mBACA,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,GACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,CACA,AACD,+BACE,qCAAuC,CACxC,AACD,2BACA,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,CACA,AACD,mBACA,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,IACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,GACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,CACA,AACD,6BACE,qCAAuC,CACxC,AACD,2BACA,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,CACA,AACD,mBACA,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,AACD,IACI,WAAY,AACZ,gCAAiC,AACjC,SAAW,CACd,AACD,IACI,UAAW,AACX,iCAAkC,AAClC,SAAW,CACd,AACD,GACI,UAAW,AACX,kCAAmC,AACnC,UAAY,CACf,CACA,AACD,eACE,cAAe,AACf,gBAAkB,AAClB,YAAa,AACb,iBAAmB,CACpB,AACD,mBACE,WAAY,AACZ,YAAa,AACb,eAAgB,AAChB,0BAA2B,AAC3B,kBAAoB,CACrB,AACD,mBACE,eAAgB,AAChB,YAAa,AACb,eAAiB,CAClB\",\"file\":\"page-header.vue\",\"sourcesContent\":[\"\\n.header {\\n background: #fffde6;\\n height: 70px;\\n width: 100%;\\n top: 0;\\n left: 0;\\n text-align: left;\\n position: fixed;\\n}\\n.header .nav {\\n display: inline-block;\\n height: 100%;\\n cursor: pointer;\\n position: relative;\\n}\\n.header .nav > span {\\n display: inline-block;\\n background: #8c5d2c;\\n color: #fff;\\n font-size: 20px;\\n padding: 2px 0px;\\n border-radius: 4px;\\n margin-top: 20px;\\n width: 60px;\\n text-align: center;\\n position: absolute;\\n -webkit-box-shadow: 1px 1px 10px 0px #FED76F;\\n box-shadow: 1px 1px 10px 0px #FED76F;\\n}\\n.header .nav > span a {\\n color: inherit;\\n}\\n.header .nav span:nth-child(1) {\\n -webkit-animation: rotate1 7s infinite;\\n}\\n@-webkit-keyframes rotate1 {\\n0% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n33% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n66% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n100% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n}\\n@keyframes rotate1 {\\n0% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n33% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n66% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n100% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n}\\n.header .nav span:nth-child(2) {\\n -webkit-animation: rotate2 7s infinite;\\n}\\n@-webkit-keyframes rotate2 {\\n0% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n33% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n66% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n100% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n}\\n@keyframes rotate2 {\\n0% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n33% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n66% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n100% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n}\\n.header .nav span:last-child {\\n -webkit-animation: rotate3 7s infinite;\\n}\\n@-webkit-keyframes rotate3 {\\n0% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n33% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n66% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n100% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n}\\n@keyframes rotate3 {\\n0% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n33% {\\n z-index: 10;\\n -webkit-transform: rotateY(0deg);\\n left: 90px;\\n}\\n66% {\\n z-index: 2;\\n -webkit-transform: rotateY(60deg);\\n left: 30px;\\n}\\n100% {\\n z-index: 3;\\n -webkit-transform: rotateY(-60deg);\\n left: 150px;\\n}\\n}\\n.header .title {\\n color: #e48734;\\n font-weight: bold;\\n float: right;\\n margin-right: 30px;\\n}\\n.header .title img {\\n width: 80px;\\n height: 80px;\\n margin-top: 5px;\\n border: 1px dotted #f8f03e;\\n border-radius: 40px;\\n}\\n.header .title div {\\n font-size: 28px;\\n float: right;\\n margin-top: 47px;\\n}\\n\"],\"sourceRoot\":\"\"}]);\n\n// exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/css-loader?{\"minimize\":true,\"sourceMap\":true}!./~/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-f79d4118\",\"scoped\":false,\"hasInlineConfig\":false}!./~/less-loader/dist/cjs.js?{\"sourceMap\":true}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/page-header.vue\n// module id = 84\n// module chunks = 1","// style-loader: Adds some css to the DOM by adding a \n\n\n\n// WEBPACK FOOTER //\n// App.vue?f3a7524a","\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// bg-page.vue?30a7a12a","\n\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// index.vue?01924600","function injectStyle (ssrContext) {\n require(\"!!../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?{\\\"minimize\\\":true,\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/style-compiler/index?{\\\"vue\\\":true,\\\"id\\\":\\\"data-v-5942d160\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":false}!less-loader?{\\\"sourceMap\\\":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue\")\n}\nvar Component = require(\"!../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../node_modules/vue-loader/lib/selector?type=script&index=0!./index.vue\"),\n /* template */\n require(\"!!../node_modules/vue-loader/lib/template-compiler/index?{\\\"id\\\":\\\"data-v-5942d160\\\",\\\"hasScoped\\\":false,\\\"transformToRequire\\\":{\\\"video\\\":\\\"src\\\",\\\"source\\\":\\\"src\\\",\\\"img\\\":\\\"src\\\",\\\"image\\\":\\\"xlink:href\\\"}}!../node_modules/vue-loader/lib/selector?type=template&index=0!./index.vue\"),\n /* styles */\n injectStyle,\n /* scopeId */\n null,\n /* moduleIdentifier (server only) */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/index.vue\n// module id = 69\n// module chunks = 3","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _vm._m(0)\n},staticRenderFns: [function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n staticClass: \"bg-page\"\n }, [_c('div', {\n staticClass: \"bg-page__mouse\"\n }, [_c('div', {\n staticClass: \"bg-page__halfmouse top\"\n }, [_c('div', {\n staticClass: \"bg-page__teeth\"\n }), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__teeth\"\n }), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__teeth\"\n }), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__bigteeth\"\n }), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__lips\"\n })]), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__halfmouse bottom\"\n }, [_c('div', {\n staticClass: \"bg-page__teeth\"\n }), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__teeth\"\n }), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__teeth\"\n }), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__bigteeth\"\n }), _vm._v(\" \"), _c('div'), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__lips\"\n })])]), _vm._v(\" \"), _c('div', {\n staticClass: \"bg-page__teethbrush\"\n })])\n}]}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-0fa66980\",\"hasScoped\":false,\"transformToRequire\":{\"video\":\"src\",\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"}}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/bg-page.vue\n// module id = 70\n// module chunks = 3","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n ref: \"page\",\n staticClass: \"lion\"\n }, [_c('mouse', {\n ref: \"mouse\"\n }), _vm._v(\" \"), _c('div', {\n ref: \"text\",\n staticClass: \"text\"\n }, _vm._l((_vm.text), function(v, i) {\n return _c('P', {\n key: i\n }, [_vm._v(_vm._s(v))])\n })), _vm._v(\" \"), _c('div', {\n ref: \"lion\",\n staticClass: \"lions\"\n }, [_c('div', {\n staticClass: \"lion-head\"\n }, [_c('div', {\n staticClass: \"lion-eye left\"\n }), _vm._v(\" \"), _c('div', {\n staticClass: \"lion-eye right\"\n }), _vm._v(\" \"), _c('div', {\n staticClass: \"lion-mouse\"\n }), _vm._v(\" \"), _vm._l((_vm.head), function(v, i) {\n return _c('span', {\n key: i\n })\n })], 2), _vm._v(\" \"), _c('div', {\n staticClass: \"lion-body\"\n }, _vm._l((_vm.body), function(v, i) {\n return _c('span', {\n key: i\n })\n })), _vm._v(\" \"), _c('div', {\n staticClass: \"lion-foot\"\n }, _vm._l((_vm.foot), function(v, i) {\n return _c('span', {\n key: i\n })\n })), _vm._v(\" \"), _c('div', {\n staticClass: \"lion-tail\"\n }, _vm._l((_vm.tail), function(v, i) {\n return _c('span', {\n key: i\n })\n }))]), _vm._v(\" \"), _c('router-link', {\n staticClass: \"door\",\n attrs: {\n \"to\": \"passage\"\n }\n }, [_vm._v(\"enter\")])], 1)\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-5942d160\",\"hasScoped\":false,\"transformToRequire\":{\"video\":\"src\",\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"}}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/index.vue\n// module id = 71\n// module chunks = 3","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n attrs: {\n \"id\": \"app\"\n }\n }, [_c('router-view')], 1)\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler?{\"id\":\"data-v-9c947ee2\",\"hasScoped\":false,\"transformToRequire\":{\"video\":\"src\",\"source\":\"src\",\"img\":\"src\",\"image\":\"xlink:href\"}}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = 72\n// module chunks = 3"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/static/js/manifest.7602aebcb7bc26fea514.js b/dist/static/js/manifest.7602aebcb7bc26fea514.js new file mode 100644 index 0000000..5890c02 --- /dev/null +++ b/dist/static/js/manifest.7602aebcb7bc26fea514.js @@ -0,0 +1,2 @@ +!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,a,c){for(var i,u,f,s=0,d=[];s0?r:n)(t)}},function(t,e,n){var r=n(46),o=n(9);t.exports=function(t){return r(o(t))}},function(t,e,n){"use strict";(function(t){/*! + * Vue.js v2.4.2 + * (c) 2014-2017 Evan You + * Released under the MIT License. + */ +function n(t){return void 0===t||null===t}function r(t){return void 0!==t&&null!==t}function o(t){return!0===t}function i(t){return!1===t}function a(t){return"string"==typeof t||"number"==typeof t||"boolean"==typeof t}function s(t){return null!==t&&"object"==typeof t}function c(t){return"[object Object]"===Do.call(t)}function u(t){return"[object RegExp]"===Do.call(t)}function f(t){var e=parseFloat(t);return e>=0&&Math.floor(e)===e&&isFinite(t)}function l(t){return null==t?"":"object"==typeof t?JSON.stringify(t,null,2):String(t)}function p(t){var e=parseFloat(t);return isNaN(e)?t:e}function d(t,e){for(var n=Object.create(null),r=t.split(","),o=0;o-1)return t.splice(n,1)}}function v(t,e){return Bo.call(t,e)}function m(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}function y(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n}function g(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function _(t,e){for(var n in e)t[n]=e[n];return t}function b(t){for(var e={},n=0;nBi&&Ni[n].id>t.id;)n--;Ni.splice(n+1,0,t)}else Ni.push(t);Fi||(Fi=!0,_i(Tt))}}function Mt(t){qi.clear(),Pt(t,qi)}function Pt(t,e){var n,r,o=Array.isArray(t);if((o||s(t))&&Object.isExtensible(t)){if(t.__ob__){var i=t.__ob__.dep.id;if(e.has(i))return;e.add(i)}if(o)for(n=t.length;n--;)Pt(t[n],e);else for(r=Object.keys(t),n=r.length;n--;)Pt(t[r[n]],e)}}function Nt(t,e,n){zi.get=function(){return this[e][n]},zi.set=function(t){this[e][n]=t},Object.defineProperty(t,n,zi)}function It(t){t._watchers=[];var e=t.$options;e.props&&Dt(t,e.props),e.methods&&qt(t,e.methods),e.data?Ft(t):M(t._data={},!0),e.computed&&Bt(t,e.computed),e.watch&&e.watch!==li&&zt(t,e.watch)}function Dt(t,e){var n=t.$options.propsData||{},r=t._props={},o=t.$options._propKeys=[],i=!t.$parent;Oi.shouldConvert=i;for(var a in e)!function(i){o.push(i);var a=G(i,e,n,t);P(r,i,a),i in t||Nt(t,"_props",i)}(a);Oi.shouldConvert=!0}function Ft(t){var e=t.$options.data;e=t._data="function"==typeof e?Ut(e,t):e||{},c(e)||(e={});for(var n=Object.keys(e),r=t.$options.props,o=(t.$options.methods,n.length);o--;){var i=n[o];r&&v(r,i)||k(i)||Nt(t,"_data",i)}M(e,!0)}function Ut(t,e){try{return t.call(e)}catch(t){return S(t,e,"data()"),{}}}function Bt(t,e){var n=t._computedWatchers=Object.create(null);for(var r in e){var o=e[r],i="function"==typeof o?o:o.get;n[r]=new Vi(t,i||w,w,Ki),r in t||Ht(t,r,o)}}function Ht(t,e,n){"function"==typeof n?(zi.get=Vt(e),zi.set=w):(zi.get=n.get?!1!==n.cache?Vt(e):n.get:w,zi.set=n.set?n.set:w),Object.defineProperty(t,e,zi)}function Vt(t){return function(){var e=this._computedWatchers&&this._computedWatchers[t];if(e)return e.dirty&&e.evaluate(),wi.target&&e.depend(),e.value}}function qt(t,e){t.$options.props;for(var n in e)t[n]=null==e[n]?w:y(e[n],t)}function zt(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var o=0;o=0||n.indexOf(t[o])<0)&&r.push(t[o]);return r}return t}function we(t){this._init(t)}function xe(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=g(arguments,1);return n.unshift(this),"function"==typeof t.install?t.install.apply(t,n):"function"==typeof t&&t.apply(null,n),e.push(t),this}}function $e(t){t.mixin=function(t){return this.options=K(this.options,t),this}}function Ce(t){t.cid=0;var e=1;t.extend=function(t){t=t||{};var n=this,r=n.cid,o=t._Ctor||(t._Ctor={});if(o[r])return o[r];var i=t.name||n.options.name,a=function(t){this._init(t)};return a.prototype=Object.create(n.prototype),a.prototype.constructor=a,a.cid=e++,a.options=K(n.options,t),a.super=n,a.options.props&&ke(a),a.options.computed&&Oe(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,Zo.forEach(function(t){a[t]=n[t]}),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=t,a.sealedOptions=_({},a.options),o[r]=a,a}}function ke(t){var e=t.options.props;for(var n in e)Nt(t.prototype,"_props",n)}function Oe(t){var e=t.options.computed;for(var n in e)Ht(t.prototype,n,e[n])}function Ae(t){Zo.forEach(function(e){t[e]=function(t,n){return n?("component"===e&&c(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),"directive"===e&&"function"==typeof n&&(n={bind:n,update:n}),this.options[e+"s"][t]=n,n):this.options[e+"s"][t]}})}function Se(t){return t&&(t.Ctor.options.name||t.tag)}function Te(t,e){return Array.isArray(t)?t.indexOf(e)>-1:"string"==typeof t?t.split(",").indexOf(e)>-1:!!u(t)&&t.test(e)}function Ee(t,e,n){for(var r in t){var o=t[r];if(o){var i=Se(o.componentOptions);i&&!n(i)&&(o!==e&&je(o),t[r]=null)}}}function je(t){t&&t.componentInstance.$destroy()}function Le(t){for(var e=t.data,n=t,o=t;r(o.componentInstance);)o=o.componentInstance._vnode,o.data&&(e=Re(o.data,e));for(;r(n=n.parent);)n.data&&(e=Re(e,n.data));return Me(e.staticClass,e.class)}function Re(t,e){return{staticClass:Pe(t.staticClass,e.staticClass),class:r(t.class)?[t.class,e.class]:e.class}}function Me(t,e){return r(t)||r(e)?Pe(t,Ne(e)):""}function Pe(t,e){return t?e?t+" "+e:t:e||""}function Ne(t){return Array.isArray(t)?Ie(t):s(t)?De(t):"string"==typeof t?t:""}function Ie(t){for(var e,n="",o=0,i=t.length;o-1?Ca[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:Ca[t]=/HTMLUnknownElement/.test(e.toString())}function Be(t){if("string"==typeof t){var e=document.querySelector(t);return e||document.createElement("div")}return t}function He(t,e){var n=document.createElement(t);return"select"!==t?n:(e.data&&e.data.attrs&&void 0!==e.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n)}function Ve(t,e){return document.createElementNS(_a[t],e)}function qe(t){return document.createTextNode(t)}function ze(t){return document.createComment(t)}function Ke(t,e,n){t.insertBefore(e,n)}function Je(t,e){t.removeChild(e)}function Ge(t,e){t.appendChild(e)}function We(t){return t.parentNode}function Ze(t){return t.nextSibling}function Xe(t){return t.tagName}function Ye(t,e){t.textContent=e}function Qe(t,e,n){t.setAttribute(e,n)}function tn(t,e){var n=t.data.ref;if(n){var r=t.context,o=t.componentInstance||t.elm,i=r.$refs;e?Array.isArray(i[n])?h(i[n],o):i[n]===o&&(i[n]=void 0):t.data.refInFor?Array.isArray(i[n])?i[n].indexOf(o)<0&&i[n].push(o):i[n]=[o]:i[n]=o}}function en(t,e){return t.key===e.key&&(t.tag===e.tag&&t.isComment===e.isComment&&r(t.data)===r(e.data)&&nn(t,e)||o(t.isAsyncPlaceholder)&&t.asyncFactory===e.asyncFactory&&n(e.asyncFactory.error))}function nn(t,e){if("input"!==t.tag)return!0;var n;return(r(n=t.data)&&r(n=n.attrs)&&n.type)===(r(n=e.data)&&r(n=n.attrs)&&n.type)}function rn(t,e,n){var o,i,a={};for(o=e;o<=n;++o)i=t[o].key,r(i)&&(a[i]=o);return a}function on(t,e){(t.data.directives||e.data.directives)&&an(t,e)}function an(t,e){var n,r,o,i=t===Aa,a=e===Aa,s=sn(t.data.directives,t.context),c=sn(e.data.directives,e.context),u=[],f=[];for(n in c)r=s[n],o=c[n],r?(o.oldValue=r.value,un(o,"update",e,t),o.def&&o.def.componentUpdated&&f.push(o)):(un(o,"bind",e,t),o.def&&o.def.inserted&&u.push(o));if(u.length){var l=function(){for(var n=0;n=0&&" "===(m=t.charAt(v));v--);m&&Ma.test(m)||(f=!0)}}else void 0===i?(h=o+1,i=t.slice(0,o).trim()):e();if(void 0===i?i=t.slice(0,o).trim():0!==h&&e(),a)for(o=0;o=ea}function Sn(t){return 34===t||39===t}function Tn(t){var e=1;for(ia=oa;!An();)if(t=On(),Sn(t))En(t);else if(91===t&&e++,93===t&&e--,0===e){aa=oa;break}}function En(t){for(var e=t;!An()&&(t=On())!==e;);}function jn(t,e,n){sa=n;var r=e.value,o=e.modifiers,i=t.tag,a=t.attrsMap.type;if(t.component)return $n(t,r,o),!1;if("select"===i)Mn(t,r,o);else if("input"===i&&"checkbox"===a)Ln(t,r,o);else if("input"===i&&"radio"===a)Rn(t,r,o);else if("input"===i||"textarea"===i)Pn(t,r,o);else if(!Yo.isReservedTag(i))return $n(t,r,o),!1;return!0}function Ln(t,e,n){var r=n&&n.number,o=wn(t,"value")||"null",i=wn(t,"true-value")||"true",a=wn(t,"false-value")||"false";yn(t,"checked","Array.isArray("+e+")?_i("+e+","+o+")>-1"+("true"===i?":("+e+")":":_q("+e+","+i+")")),bn(t,Na,"var $$a="+e+",$$el=$event.target,$$c=$$el.checked?("+i+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+o+")":o)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+e+"=$$a.concat($$v))}else{$$i>-1&&("+e+"=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{"+Cn(e,"$$c")+"}",null,!0)}function Rn(t,e,n){var r=n&&n.number,o=wn(t,"value")||"null";o=r?"_n("+o+")":o,yn(t,"checked","_q("+e+","+o+")"),bn(t,Na,Cn(e,o),null,!0)}function Mn(t,e,n){var r=n&&n.number,o='Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+(r?"_n(val)":"val")+"})",i="var $$selectedVal = "+o+";";i=i+" "+Cn(e,"$event.target.multiple ? $$selectedVal : $$selectedVal[0]"),bn(t,"change",i,null,!0)}function Pn(t,e,n){var r=t.attrsMap.type,o=n||{},i=o.lazy,a=o.number,s=o.trim,c=!i&&"range"!==r,u=i?"change":"range"===r?Pa:"input",f="$event.target.value";s&&(f="$event.target.value.trim()"),a&&(f="_n("+f+")");var l=Cn(e,f);c&&(l="if($event.target.composing)return;"+l),yn(t,"value","("+e+")"),bn(t,u,l,null,!0),(s||a)&&bn(t,"blur","$forceUpdate()")}function Nn(t){var e;r(t[Pa])&&(e=ii?"change":"input",t[e]=[].concat(t[Pa],t[e]||[]),delete t[Pa]),r(t[Na])&&(e=fi?"click":"change",t[e]=[].concat(t[Na],t[e]||[]),delete t[Na])}function In(t,e,n,r,o){if(n){var i=e,a=ca;e=function(n){null!==(1===arguments.length?i(n):i.apply(null,arguments))&&Dn(t,e,r,a)}}ca.addEventListener(t,e,pi?{capture:r,passive:o}:r)}function Dn(t,e,n,r){(r||ca).removeEventListener(t,e,n)}function Fn(t,e){if(!n(t.data.on)||!n(e.data.on)){var r=e.data.on||{},o=t.data.on||{};ca=e.elm,Nn(r),nt(r,o,In,Dn,e.context)}}function Un(t,e){if(!n(t.data.domProps)||!n(e.data.domProps)){var o,i,a=e.elm,s=t.data.domProps||{},c=e.data.domProps||{};r(c.__ob__)&&(c=e.data.domProps=_({},c));for(o in s)n(c[o])&&(a[o]="");for(o in c)if(i=c[o],"textContent"!==o&&"innerHTML"!==o||(e.children&&(e.children.length=0),i!==s[o]))if("value"===o){a._value=i;var u=n(i)?"":String(i);Bn(a,e,u)&&(a.value=u)}else a[o]=i}}function Bn(t,e,n){return!t.composing&&("option"===e.tag||Hn(t,n)||Vn(t,n))}function Hn(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}function Vn(t,e){var n=t.value,o=t._vModifiers;return r(o)&&o.number?p(n)!==p(e):r(o)&&o.trim?n.trim()!==e.trim():n!==e}function qn(t){var e=zn(t.style);return t.staticStyle?_(t.staticStyle,e):e}function zn(t){return Array.isArray(t)?b(t):"string"==typeof t?Fa(t):t}function Kn(t,e){var n,r={};if(e)for(var o=t;o.componentInstance;)o=o.componentInstance._vnode,o.data&&(n=qn(o.data))&&_(r,n);(n=qn(t.data))&&_(r,n);for(var i=t;i=i.parent;)i.data&&(n=qn(i.data))&&_(r,n);return r}function Jn(t,e){var o=e.data,i=t.data;if(!(n(o.staticStyle)&&n(o.style)&&n(i.staticStyle)&&n(i.style))){var a,s,c=e.elm,u=i.staticStyle,f=i.normalizedStyle||i.style||{},l=u||f,p=zn(e.data.style)||{};e.data.normalizedStyle=r(p.__ob__)?_({},p):p;var d=Kn(e,!0);for(s in l)n(d[s])&&Ha(c,s,"");for(s in d)(a=d[s])!==l[s]&&Ha(c,s,null==a?"":a)}}function Gn(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(/\s+/).forEach(function(e){return t.classList.add(e)}):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function Wn(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(/\s+/).forEach(function(e){return t.classList.remove(e)}):t.classList.remove(e),t.classList.length||t.removeAttribute("class");else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");n=n.trim(),n?t.setAttribute("class",n):t.removeAttribute("class")}}function Zn(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&_(e,Ka(t.name||"v")),_(e,t),e}return"string"==typeof t?Ka(t):void 0}}function Xn(t){ts(function(){ts(t)})}function Yn(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),Gn(t,e))}function Qn(t,e){t._transitionClasses&&h(t._transitionClasses,e),Wn(t,e)}function tr(t,e,n){var r=er(t,e),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s=o===Ga?Xa:Qa,c=0,u=function(){t.removeEventListener(s,f),n()},f=function(e){e.target===t&&++c>=a&&u()};setTimeout(function(){c0&&(n=Ga,f=a,l=i.length):e===Wa?u>0&&(n=Wa,f=u,l=c.length):(f=Math.max(a,u),n=f>0?a>u?Ga:Wa:null,l=n?n===Ga?i.length:c.length:0),{type:n,timeout:f,propCount:l,hasTransform:n===Ga&&es.test(r[Za+"Property"])}}function nr(t,e){for(;t.length1}function cr(t,e){!0!==e.data.show&&or(e)}function ur(t,e,n){var r=e.value,o=t.multiple;if(!o||Array.isArray(r)){for(var i,a,s=0,c=t.options.length;s-1,a.selected!==i&&(a.selected=i);else if(x(fr(a),r))return void(t.selectedIndex!==s&&(t.selectedIndex=s));o||(t.selectedIndex=-1)}}function fr(t){return"_value"in t?t._value:t.value}function lr(t){t.target.composing=!0}function pr(t){t.target.composing&&(t.target.composing=!1,dr(t.target,"input"))}function dr(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function hr(t){return!t.componentInstance||t.data&&t.data.transition?t:hr(t.componentInstance._vnode)}function vr(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?vr(dt(e.children)):t}function mr(t){var e={},n=t.$options;for(var r in n.propsData)e[r]=t[r];var o=n._parentListeners;for(var i in o)e[Vo(i)]=o[i];return e}function yr(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}function gr(t){for(;t=t.parent;)if(t.data.transition)return!0}function _r(t,e){return e.key===t.key&&e.tag===t.tag}function br(t){return t.isComment&&t.asyncFactory}function wr(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function xr(t){t.data.newPos=t.elm.getBoundingClientRect()}function $r(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,o=e.top-n.top;if(r||o){t.data.moved=!0;var i=t.elm.style;i.transform=i.WebkitTransform="translate("+r+"px,"+o+"px)",i.transitionDuration="0s"}}function Cr(t,e){var n=e?_s(e):ys;if(n.test(t)){for(var r,o,i=[],a=n.lastIndex=0;r=n.exec(t);){o=r.index,o>a&&i.push(JSON.stringify(t.slice(a,o)));var s=dn(r[1].trim());i.push("_s("+s+")"),a=o+r[0].length}return a=0&&a[o].lowerCasedTag!==s;o--);else o=0;if(o>=0){for(var c=a.length-1;c>=o;c--)e.end&&e.end(a[c].tag,n,r);a.length=o,i=o&&a[o-1].tag}else"br"===s?e.start&&e.start(t,[],!0,n,r):"p"===s&&(e.start&&e.start(t,[],!1,n,r),e.end&&e.end(t,n,r))}for(var o,i,a=[],s=e.expectHTML,c=e.isUnaryTag||Jo,u=e.canBeLeftOpenTag||Jo,f=0;t;){if(o=t,i&&Ys(i)){var l=0,p=i.toLowerCase(),d=Qs[p]||(Qs[p]=new RegExp("([\\s\\S]*?)(]*>)","i")),h=t.replace(d,function(t,n,r){return l=r.length,Ys(p)||"noscript"===p||(n=n.replace(//g,"$1").replace(//g,"$1")),oc(p,n)&&(n=n.slice(1)),e.chars&&e.chars(n),""});f+=t.length-h.length,t=h,r(p,f-l,f)}else{var v=t.indexOf("<");if(0===v){if(Fs.test(t)){var m=t.indexOf("--\x3e");if(m>=0){e.shouldKeepComment&&e.comment(t.substring(4,m)),n(m+3);continue}}if(Us.test(t)){var y=t.indexOf("]>");if(y>=0){n(y+2);continue}}var g=t.match(Ds);if(g){n(g[0].length);continue}var _=t.match(Is);if(_){var b=f;n(_[0].length),r(_[1],b,f);continue}var w=function(){var e=t.match(Ps);if(e){var r={tagName:e[1],attrs:[],start:f};n(e[0].length);for(var o,i;!(o=t.match(Ns))&&(i=t.match(Ls));)n(i[0].length),r.attrs.push(i);if(o)return r.unarySlash=o[1],n(o[0].length),r.end=f,r}}();if(w){!function(t){var n=t.tagName,o=t.unarySlash;s&&("p"===i&&Os(n)&&r(i),u(n)&&i===n&&r(n));for(var f=c(n)||!!o,l=t.attrs.length,p=new Array(l),d=0;d=0){for($=t.slice(v);!(Is.test($)||Ps.test($)||Fs.test($)||Us.test($)||(C=$.indexOf("<",1))<0);)v+=C,$=t.slice(v);x=t.substring(0,v),n(v)}v<0&&(x=t,t=""),e.chars&&x&&e.chars(x)}if(t===o){e.chars&&e.chars(t);break}}r()}function Rr(t,e){function n(t){t.pre&&(s=!1),Js(t.tag)&&(c=!1)}Hs=e.warn||vn,Js=e.isPreTag||Jo,Gs=e.mustUseProp||Jo,Ws=e.getTagNamespace||Jo,qs=mn(e.modules,"transformNode"),zs=mn(e.modules,"preTransformNode"),Ks=mn(e.modules,"postTransformNode"),Vs=e.delimiters;var r,o,i=[],a=!1!==e.preserveWhitespace,s=!1,c=!1;return Lr(t,{warn:Hs,expectHTML:e.expectHTML,isUnaryTag:e.isUnaryTag,canBeLeftOpenTag:e.canBeLeftOpenTag,shouldDecodeNewlines:e.shouldDecodeNewlines,shouldKeepComment:e.comments,start:function(t,a,u){var f=o&&o.ns||Ws(t);ii&&"svg"===f&&(a=Yr(a));var l={type:1,tag:t,attrsList:a,attrsMap:Wr(a),parent:o,children:[]};f&&(l.ns=f),Xr(l)&&!mi()&&(l.forbidden=!0);for(var p=0;p0,si=oi&&oi.indexOf("edge/")>0,ci=oi&&oi.indexOf("android")>0,ui=oi&&/iphone|ipad|ipod|ios/.test(oi),fi=oi&&/chrome\/\d+/.test(oi)&&!si,li={}.watch,pi=!1;if(ri)try{var di={};Object.defineProperty(di,"passive",{get:function(){pi=!0}}),window.addEventListener("test-passive",null,di)}catch(t){}var hi,vi,mi=function(){return void 0===hi&&(hi=!ri&&void 0!==t&&"server"===t.process.env.VUE_ENV),hi},yi=ri&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__,gi="undefined"!=typeof Symbol&&T(Symbol)&&"undefined"!=typeof Reflect&&T(Reflect.ownKeys),_i=function(){function t(){r=!1;var t=n.slice(0);n.length=0;for(var e=0;e1?g(n):n;for(var r=g(arguments,1),o=0,i=n.length;o1&&(e[n[0].trim()]=n[1].trim())}}),e}),Ua=/^--/,Ba=/\s*!important$/,Ha=function(t,e,n){if(Ua.test(e))t.style.setProperty(e,n);else if(Ba.test(n))t.style.setProperty(e,n.replace(Ba,""),"important");else{var r=qa(e);if(Array.isArray(n))for(var o=0,i=n.length;oh?(l=n(o[y+1])?null:o[y+1].elm,g(t,l,o,d,y,i)):d>y&&b(t,e,p,h)}function $(t,e,i,a){if(t!==e){var s=e.elm=t.elm;if(o(t.isAsyncPlaceholder))return void(r(e.asyncFactory.resolved)?k(t.elm,e,i):e.isAsyncPlaceholder=!0);if(o(e.isStatic)&&o(t.isStatic)&&e.key===t.key&&(o(e.isCloned)||o(e.isOnce)))return void(e.componentInstance=t.componentInstance);var c,u=e.data;r(u)&&r(c=u.hook)&&r(c=c.prepatch)&&c(t,e);var f=t.children,l=e.children;if(r(u)&&v(e)){for(c=0;c',n.innerHTML.indexOf(e)>0}("\n"," "),ys=/\{\{((?:.|\n)+?)\}\}/g,gs=/[-.*+?^${}()|[\]\/\\]/g,_s=m(function(t){var e=t[0].replace(gs,"\\$&"),n=t[1].replace(gs,"\\$&");return new RegExp(e+"((?:.|\\n)+?)"+n,"g")}),bs={staticKeys:["staticClass"],transformNode:kr,genData:Or},ws={staticKeys:["staticStyle"],transformNode:Ar,genData:Sr},xs=[bs,ws],$s={model:jn,text:Tr,html:Er},Cs=d("area,base,br,col,embed,frame,hr,img,input,isindex,keygen,link,meta,param,source,track,wbr"),ks=d("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source"),Os=d("address,article,aside,base,blockquote,body,caption,col,colgroup,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,title,tr,track"),As={expectHTML:!0,modules:xs,directives:$s,isPreTag:xa,isUnaryTag:Cs,mustUseProp:pa,canBeLeftOpenTag:ks,isReservedTag:$a,getTagNamespace:Fe,staticKeys:function(t){return t.reduce(function(t,e){return t.concat(e.staticKeys||[])},[]).join(",")}(xs)},Ss={decode:function(t){return vs=vs||document.createElement("div"),vs.innerHTML=t,vs.textContent}},Ts=/([^\s"'<>/=]+)/,Es=/(?:=)/,js=[/"([^"]*)"+/.source,/'([^']*)'+/.source,/([^\s"'=<>`]+)/.source],Ls=new RegExp("^\\s*"+Ts.source+"(?:\\s*("+Es.source+")\\s*(?:"+js.join("|")+"))?"),Rs="[a-zA-Z_][\\w\\-\\.]*",Ms="((?:"+Rs+"\\:)?"+Rs+")",Ps=new RegExp("^<"+Ms),Ns=/^\s*(\/?)>/,Is=new RegExp("^<\\/"+Ms+"[^>]*>"),Ds=/^]+>/i,Fs=/^ ' : repeat(' ', 5 + i * 2)) + (Array.isArray(vm)\n ? ((formatComponentName(vm[0])) + \"... (\" + (vm[1]) + \" recursive calls)\")\n : formatComponentName(vm))); })\n .join('\\n')\n } else {\n return (\"\\n\\n(found in \" + (formatComponentName(vm)) + \")\")\n }\n };\n}\n\n/* */\n\nfunction handleError (err, vm, info) {\n if (config.errorHandler) {\n config.errorHandler.call(null, err, vm, info);\n } else {\n if (false) {\n warn((\"Error in \" + info + \": \\\"\" + (err.toString()) + \"\\\"\"), vm);\n }\n /* istanbul ignore else */\n if (inBrowser && typeof console !== 'undefined') {\n console.error(err);\n } else {\n throw err\n }\n }\n}\n\n/* */\n/* globals MutationObserver */\n\n// can we use __proto__?\nvar hasProto = '__proto__' in {};\n\n// Browser environment sniffing\nvar inBrowser = typeof window !== 'undefined';\nvar UA = inBrowser && window.navigator.userAgent.toLowerCase();\nvar isIE = UA && /msie|trident/.test(UA);\nvar isIE9 = UA && UA.indexOf('msie 9.0') > 0;\nvar isEdge = UA && UA.indexOf('edge/') > 0;\nvar isAndroid = UA && UA.indexOf('android') > 0;\nvar isIOS = UA && /iphone|ipad|ipod|ios/.test(UA);\nvar isChrome = UA && /chrome\\/\\d+/.test(UA) && !isEdge;\n\n// Firefix has a \"watch\" function on Object.prototype...\nvar nativeWatch = ({}).watch;\n\nvar supportsPassive = false;\nif (inBrowser) {\n try {\n var opts = {};\n Object.defineProperty(opts, 'passive', ({\n get: function get () {\n /* istanbul ignore next */\n supportsPassive = true;\n }\n })); // https://github.com/facebook/flow/issues/285\n window.addEventListener('test-passive', null, opts);\n } catch (e) {}\n}\n\n// this needs to be lazy-evaled because vue may be required before\n// vue-server-renderer can set VUE_ENV\nvar _isServer;\nvar isServerRendering = function () {\n if (_isServer === undefined) {\n /* istanbul ignore if */\n if (!inBrowser && typeof global !== 'undefined') {\n // detect presence of vue-server-renderer and avoid\n // Webpack shimming the process\n _isServer = global['process'].env.VUE_ENV === 'server';\n } else {\n _isServer = false;\n }\n }\n return _isServer\n};\n\n// detect devtools\nvar devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__;\n\n/* istanbul ignore next */\nfunction isNative (Ctor) {\n return typeof Ctor === 'function' && /native code/.test(Ctor.toString())\n}\n\nvar hasSymbol =\n typeof Symbol !== 'undefined' && isNative(Symbol) &&\n typeof Reflect !== 'undefined' && isNative(Reflect.ownKeys);\n\n/**\n * Defer a task to execute it asynchronously.\n */\nvar nextTick = (function () {\n var callbacks = [];\n var pending = false;\n var timerFunc;\n\n function nextTickHandler () {\n pending = false;\n var copies = callbacks.slice(0);\n callbacks.length = 0;\n for (var i = 0; i < copies.length; i++) {\n copies[i]();\n }\n }\n\n // the nextTick behavior leverages the microtask queue, which can be accessed\n // via either native Promise.then or MutationObserver.\n // MutationObserver has wider support, however it is seriously bugged in\n // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It\n // completely stops working after triggering a few times... so, if native\n // Promise is available, we will use it:\n /* istanbul ignore if */\n if (typeof Promise !== 'undefined' && isNative(Promise)) {\n var p = Promise.resolve();\n var logError = function (err) { console.error(err); };\n timerFunc = function () {\n p.then(nextTickHandler).catch(logError);\n // in problematic UIWebViews, Promise.then doesn't completely break, but\n // it can get stuck in a weird state where callbacks are pushed into the\n // microtask queue but the queue isn't being flushed, until the browser\n // needs to do some other work, e.g. handle a timer. Therefore we can\n // \"force\" the microtask queue to be flushed by adding an empty timer.\n if (isIOS) { setTimeout(noop); }\n };\n } else if (typeof MutationObserver !== 'undefined' && (\n isNative(MutationObserver) ||\n // PhantomJS and iOS 7.x\n MutationObserver.toString() === '[object MutationObserverConstructor]'\n )) {\n // use MutationObserver where native Promise is not available,\n // e.g. PhantomJS IE11, iOS7, Android 4.4\n var counter = 1;\n var observer = new MutationObserver(nextTickHandler);\n var textNode = document.createTextNode(String(counter));\n observer.observe(textNode, {\n characterData: true\n });\n timerFunc = function () {\n counter = (counter + 1) % 2;\n textNode.data = String(counter);\n };\n } else {\n // fallback to setTimeout\n /* istanbul ignore next */\n timerFunc = function () {\n setTimeout(nextTickHandler, 0);\n };\n }\n\n return function queueNextTick (cb, ctx) {\n var _resolve;\n callbacks.push(function () {\n if (cb) {\n try {\n cb.call(ctx);\n } catch (e) {\n handleError(e, ctx, 'nextTick');\n }\n } else if (_resolve) {\n _resolve(ctx);\n }\n });\n if (!pending) {\n pending = true;\n timerFunc();\n }\n if (!cb && typeof Promise !== 'undefined') {\n return new Promise(function (resolve, reject) {\n _resolve = resolve;\n })\n }\n }\n})();\n\nvar _Set;\n/* istanbul ignore if */\nif (typeof Set !== 'undefined' && isNative(Set)) {\n // use native Set when available.\n _Set = Set;\n} else {\n // a non-standard Set polyfill that only works with primitive keys.\n _Set = (function () {\n function Set () {\n this.set = Object.create(null);\n }\n Set.prototype.has = function has (key) {\n return this.set[key] === true\n };\n Set.prototype.add = function add (key) {\n this.set[key] = true;\n };\n Set.prototype.clear = function clear () {\n this.set = Object.create(null);\n };\n\n return Set;\n }());\n}\n\n/* */\n\n\nvar uid = 0;\n\n/**\n * A dep is an observable that can have multiple\n * directives subscribing to it.\n */\nvar Dep = function Dep () {\n this.id = uid++;\n this.subs = [];\n};\n\nDep.prototype.addSub = function addSub (sub) {\n this.subs.push(sub);\n};\n\nDep.prototype.removeSub = function removeSub (sub) {\n remove(this.subs, sub);\n};\n\nDep.prototype.depend = function depend () {\n if (Dep.target) {\n Dep.target.addDep(this);\n }\n};\n\nDep.prototype.notify = function notify () {\n // stabilize the subscriber list first\n var subs = this.subs.slice();\n for (var i = 0, l = subs.length; i < l; i++) {\n subs[i].update();\n }\n};\n\n// the current target watcher being evaluated.\n// this is globally unique because there could be only one\n// watcher being evaluated at any time.\nDep.target = null;\nvar targetStack = [];\n\nfunction pushTarget (_target) {\n if (Dep.target) { targetStack.push(Dep.target); }\n Dep.target = _target;\n}\n\nfunction popTarget () {\n Dep.target = targetStack.pop();\n}\n\n/*\n * not type checking this file because flow doesn't play well with\n * dynamically accessing methods on Array prototype\n */\n\nvar arrayProto = Array.prototype;\nvar arrayMethods = Object.create(arrayProto);[\n 'push',\n 'pop',\n 'shift',\n 'unshift',\n 'splice',\n 'sort',\n 'reverse'\n]\n.forEach(function (method) {\n // cache original method\n var original = arrayProto[method];\n def(arrayMethods, method, function mutator () {\n var args = [], len = arguments.length;\n while ( len-- ) args[ len ] = arguments[ len ];\n\n var result = original.apply(this, args);\n var ob = this.__ob__;\n var inserted;\n switch (method) {\n case 'push':\n case 'unshift':\n inserted = args;\n break\n case 'splice':\n inserted = args.slice(2);\n break\n }\n if (inserted) { ob.observeArray(inserted); }\n // notify change\n ob.dep.notify();\n return result\n });\n});\n\n/* */\n\nvar arrayKeys = Object.getOwnPropertyNames(arrayMethods);\n\n/**\n * By default, when a reactive property is set, the new value is\n * also converted to become reactive. However when passing down props,\n * we don't want to force conversion because the value may be a nested value\n * under a frozen data structure. Converting it would defeat the optimization.\n */\nvar observerState = {\n shouldConvert: true\n};\n\n/**\n * Observer class that are attached to each observed\n * object. Once attached, the observer converts target\n * object's property keys into getter/setters that\n * collect dependencies and dispatches updates.\n */\nvar Observer = function Observer (value) {\n this.value = value;\n this.dep = new Dep();\n this.vmCount = 0;\n def(value, '__ob__', this);\n if (Array.isArray(value)) {\n var augment = hasProto\n ? protoAugment\n : copyAugment;\n augment(value, arrayMethods, arrayKeys);\n this.observeArray(value);\n } else {\n this.walk(value);\n }\n};\n\n/**\n * Walk through each property and convert them into\n * getter/setters. This method should only be called when\n * value type is Object.\n */\nObserver.prototype.walk = function walk (obj) {\n var keys = Object.keys(obj);\n for (var i = 0; i < keys.length; i++) {\n defineReactive$$1(obj, keys[i], obj[keys[i]]);\n }\n};\n\n/**\n * Observe a list of Array items.\n */\nObserver.prototype.observeArray = function observeArray (items) {\n for (var i = 0, l = items.length; i < l; i++) {\n observe(items[i]);\n }\n};\n\n// helpers\n\n/**\n * Augment an target Object or Array by intercepting\n * the prototype chain using __proto__\n */\nfunction protoAugment (target, src, keys) {\n /* eslint-disable no-proto */\n target.__proto__ = src;\n /* eslint-enable no-proto */\n}\n\n/**\n * Augment an target Object or Array by defining\n * hidden properties.\n */\n/* istanbul ignore next */\nfunction copyAugment (target, src, keys) {\n for (var i = 0, l = keys.length; i < l; i++) {\n var key = keys[i];\n def(target, key, src[key]);\n }\n}\n\n/**\n * Attempt to create an observer instance for a value,\n * returns the new observer if successfully observed,\n * or the existing observer if the value already has one.\n */\nfunction observe (value, asRootData) {\n if (!isObject(value)) {\n return\n }\n var ob;\n if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {\n ob = value.__ob__;\n } else if (\n observerState.shouldConvert &&\n !isServerRendering() &&\n (Array.isArray(value) || isPlainObject(value)) &&\n Object.isExtensible(value) &&\n !value._isVue\n ) {\n ob = new Observer(value);\n }\n if (asRootData && ob) {\n ob.vmCount++;\n }\n return ob\n}\n\n/**\n * Define a reactive property on an Object.\n */\nfunction defineReactive$$1 (\n obj,\n key,\n val,\n customSetter,\n shallow\n) {\n var dep = new Dep();\n\n var property = Object.getOwnPropertyDescriptor(obj, key);\n if (property && property.configurable === false) {\n return\n }\n\n // cater for pre-defined getter/setters\n var getter = property && property.get;\n var setter = property && property.set;\n\n var childOb = !shallow && observe(val);\n Object.defineProperty(obj, key, {\n enumerable: true,\n configurable: true,\n get: function reactiveGetter () {\n var value = getter ? getter.call(obj) : val;\n if (Dep.target) {\n dep.depend();\n if (childOb) {\n childOb.dep.depend();\n }\n if (Array.isArray(value)) {\n dependArray(value);\n }\n }\n return value\n },\n set: function reactiveSetter (newVal) {\n var value = getter ? getter.call(obj) : val;\n /* eslint-disable no-self-compare */\n if (newVal === value || (newVal !== newVal && value !== value)) {\n return\n }\n /* eslint-enable no-self-compare */\n if (false) {\n customSetter();\n }\n if (setter) {\n setter.call(obj, newVal);\n } else {\n val = newVal;\n }\n childOb = !shallow && observe(newVal);\n dep.notify();\n }\n });\n}\n\n/**\n * Set a property on an object. Adds the new property and\n * triggers change notification if the property doesn't\n * already exist.\n */\nfunction set (target, key, val) {\n if (Array.isArray(target) && isValidArrayIndex(key)) {\n target.length = Math.max(target.length, key);\n target.splice(key, 1, val);\n return val\n }\n if (hasOwn(target, key)) {\n target[key] = val;\n return val\n }\n var ob = (target).__ob__;\n if (target._isVue || (ob && ob.vmCount)) {\n \"production\" !== 'production' && warn(\n 'Avoid adding reactive properties to a Vue instance or its root $data ' +\n 'at runtime - declare it upfront in the data option.'\n );\n return val\n }\n if (!ob) {\n target[key] = val;\n return val\n }\n defineReactive$$1(ob.value, key, val);\n ob.dep.notify();\n return val\n}\n\n/**\n * Delete a property and trigger change if necessary.\n */\nfunction del (target, key) {\n if (Array.isArray(target) && isValidArrayIndex(key)) {\n target.splice(key, 1);\n return\n }\n var ob = (target).__ob__;\n if (target._isVue || (ob && ob.vmCount)) {\n \"production\" !== 'production' && warn(\n 'Avoid deleting properties on a Vue instance or its root $data ' +\n '- just set it to null.'\n );\n return\n }\n if (!hasOwn(target, key)) {\n return\n }\n delete target[key];\n if (!ob) {\n return\n }\n ob.dep.notify();\n}\n\n/**\n * Collect dependencies on array elements when the array is touched, since\n * we cannot intercept array element access like property getters.\n */\nfunction dependArray (value) {\n for (var e = (void 0), i = 0, l = value.length; i < l; i++) {\n e = value[i];\n e && e.__ob__ && e.__ob__.dep.depend();\n if (Array.isArray(e)) {\n dependArray(e);\n }\n }\n}\n\n/* */\n\n/**\n * Option overwriting strategies are functions that handle\n * how to merge a parent option value and a child option\n * value into the final value.\n */\nvar strats = config.optionMergeStrategies;\n\n/**\n * Options with restrictions\n */\nif (false) {\n strats.el = strats.propsData = function (parent, child, vm, key) {\n if (!vm) {\n warn(\n \"option \\\"\" + key + \"\\\" can only be used during instance \" +\n 'creation with the `new` keyword.'\n );\n }\n return defaultStrat(parent, child)\n };\n}\n\n/**\n * Helper that recursively merges two data objects together.\n */\nfunction mergeData (to, from) {\n if (!from) { return to }\n var key, toVal, fromVal;\n var keys = Object.keys(from);\n for (var i = 0; i < keys.length; i++) {\n key = keys[i];\n toVal = to[key];\n fromVal = from[key];\n if (!hasOwn(to, key)) {\n set(to, key, fromVal);\n } else if (isPlainObject(toVal) && isPlainObject(fromVal)) {\n mergeData(toVal, fromVal);\n }\n }\n return to\n}\n\n/**\n * Data\n */\nfunction mergeDataOrFn (\n parentVal,\n childVal,\n vm\n) {\n if (!vm) {\n // in a Vue.extend merge, both should be functions\n if (!childVal) {\n return parentVal\n }\n if (!parentVal) {\n return childVal\n }\n // when parentVal & childVal are both present,\n // we need to return a function that returns the\n // merged result of both functions... no need to\n // check if parentVal is a function here because\n // it has to be a function to pass previous merges.\n return function mergedDataFn () {\n return mergeData(\n typeof childVal === 'function' ? childVal.call(this) : childVal,\n typeof parentVal === 'function' ? parentVal.call(this) : parentVal\n )\n }\n } else if (parentVal || childVal) {\n return function mergedInstanceDataFn () {\n // instance merge\n var instanceData = typeof childVal === 'function'\n ? childVal.call(vm)\n : childVal;\n var defaultData = typeof parentVal === 'function'\n ? parentVal.call(vm)\n : undefined;\n if (instanceData) {\n return mergeData(instanceData, defaultData)\n } else {\n return defaultData\n }\n }\n }\n}\n\nstrats.data = function (\n parentVal,\n childVal,\n vm\n) {\n if (!vm) {\n if (childVal && typeof childVal !== 'function') {\n \"production\" !== 'production' && warn(\n 'The \"data\" option should be a function ' +\n 'that returns a per-instance value in component ' +\n 'definitions.',\n vm\n );\n\n return parentVal\n }\n return mergeDataOrFn.call(this, parentVal, childVal)\n }\n\n return mergeDataOrFn(parentVal, childVal, vm)\n};\n\n/**\n * Hooks and props are merged as arrays.\n */\nfunction mergeHook (\n parentVal,\n childVal\n) {\n return childVal\n ? parentVal\n ? parentVal.concat(childVal)\n : Array.isArray(childVal)\n ? childVal\n : [childVal]\n : parentVal\n}\n\nLIFECYCLE_HOOKS.forEach(function (hook) {\n strats[hook] = mergeHook;\n});\n\n/**\n * Assets\n *\n * When a vm is present (instance creation), we need to do\n * a three-way merge between constructor options, instance\n * options and parent options.\n */\nfunction mergeAssets (parentVal, childVal) {\n var res = Object.create(parentVal || null);\n return childVal\n ? extend(res, childVal)\n : res\n}\n\nASSET_TYPES.forEach(function (type) {\n strats[type + 's'] = mergeAssets;\n});\n\n/**\n * Watchers.\n *\n * Watchers hashes should not overwrite one\n * another, so we merge them as arrays.\n */\nstrats.watch = function (parentVal, childVal) {\n // work around Firefox's Object.prototype.watch...\n if (parentVal === nativeWatch) { parentVal = undefined; }\n if (childVal === nativeWatch) { childVal = undefined; }\n /* istanbul ignore if */\n if (!childVal) { return Object.create(parentVal || null) }\n if (!parentVal) { return childVal }\n var ret = {};\n extend(ret, parentVal);\n for (var key in childVal) {\n var parent = ret[key];\n var child = childVal[key];\n if (parent && !Array.isArray(parent)) {\n parent = [parent];\n }\n ret[key] = parent\n ? parent.concat(child)\n : Array.isArray(child) ? child : [child];\n }\n return ret\n};\n\n/**\n * Other object hashes.\n */\nstrats.props =\nstrats.methods =\nstrats.inject =\nstrats.computed = function (parentVal, childVal) {\n if (!parentVal) { return childVal }\n var ret = Object.create(null);\n extend(ret, parentVal);\n if (childVal) { extend(ret, childVal); }\n return ret\n};\nstrats.provide = mergeDataOrFn;\n\n/**\n * Default strategy.\n */\nvar defaultStrat = function (parentVal, childVal) {\n return childVal === undefined\n ? parentVal\n : childVal\n};\n\n/**\n * Validate component names\n */\nfunction checkComponents (options) {\n for (var key in options.components) {\n var lower = key.toLowerCase();\n if (isBuiltInTag(lower) || config.isReservedTag(lower)) {\n warn(\n 'Do not use built-in or reserved HTML elements as component ' +\n 'id: ' + key\n );\n }\n }\n}\n\n/**\n * Ensure all props option syntax are normalized into the\n * Object-based format.\n */\nfunction normalizeProps (options) {\n var props = options.props;\n if (!props) { return }\n var res = {};\n var i, val, name;\n if (Array.isArray(props)) {\n i = props.length;\n while (i--) {\n val = props[i];\n if (typeof val === 'string') {\n name = camelize(val);\n res[name] = { type: null };\n } else if (false) {\n warn('props must be strings when using array syntax.');\n }\n }\n } else if (isPlainObject(props)) {\n for (var key in props) {\n val = props[key];\n name = camelize(key);\n res[name] = isPlainObject(val)\n ? val\n : { type: val };\n }\n }\n options.props = res;\n}\n\n/**\n * Normalize all injections into Object-based format\n */\nfunction normalizeInject (options) {\n var inject = options.inject;\n if (Array.isArray(inject)) {\n var normalized = options.inject = {};\n for (var i = 0; i < inject.length; i++) {\n normalized[inject[i]] = inject[i];\n }\n }\n}\n\n/**\n * Normalize raw function directives into object format.\n */\nfunction normalizeDirectives (options) {\n var dirs = options.directives;\n if (dirs) {\n for (var key in dirs) {\n var def = dirs[key];\n if (typeof def === 'function') {\n dirs[key] = { bind: def, update: def };\n }\n }\n }\n}\n\n/**\n * Merge two option objects into a new one.\n * Core utility used in both instantiation and inheritance.\n */\nfunction mergeOptions (\n parent,\n child,\n vm\n) {\n if (false) {\n checkComponents(child);\n }\n\n if (typeof child === 'function') {\n child = child.options;\n }\n\n normalizeProps(child);\n normalizeInject(child);\n normalizeDirectives(child);\n var extendsFrom = child.extends;\n if (extendsFrom) {\n parent = mergeOptions(parent, extendsFrom, vm);\n }\n if (child.mixins) {\n for (var i = 0, l = child.mixins.length; i < l; i++) {\n parent = mergeOptions(parent, child.mixins[i], vm);\n }\n }\n var options = {};\n var key;\n for (key in parent) {\n mergeField(key);\n }\n for (key in child) {\n if (!hasOwn(parent, key)) {\n mergeField(key);\n }\n }\n function mergeField (key) {\n var strat = strats[key] || defaultStrat;\n options[key] = strat(parent[key], child[key], vm, key);\n }\n return options\n}\n\n/**\n * Resolve an asset.\n * This function is used because child instances need access\n * to assets defined in its ancestor chain.\n */\nfunction resolveAsset (\n options,\n type,\n id,\n warnMissing\n) {\n /* istanbul ignore if */\n if (typeof id !== 'string') {\n return\n }\n var assets = options[type];\n // check local registration variations first\n if (hasOwn(assets, id)) { return assets[id] }\n var camelizedId = camelize(id);\n if (hasOwn(assets, camelizedId)) { return assets[camelizedId] }\n var PascalCaseId = capitalize(camelizedId);\n if (hasOwn(assets, PascalCaseId)) { return assets[PascalCaseId] }\n // fallback to prototype chain\n var res = assets[id] || assets[camelizedId] || assets[PascalCaseId];\n if (false) {\n warn(\n 'Failed to resolve ' + type.slice(0, -1) + ': ' + id,\n options\n );\n }\n return res\n}\n\n/* */\n\nfunction validateProp (\n key,\n propOptions,\n propsData,\n vm\n) {\n var prop = propOptions[key];\n var absent = !hasOwn(propsData, key);\n var value = propsData[key];\n // handle boolean props\n if (isType(Boolean, prop.type)) {\n if (absent && !hasOwn(prop, 'default')) {\n value = false;\n } else if (!isType(String, prop.type) && (value === '' || value === hyphenate(key))) {\n value = true;\n }\n }\n // check default value\n if (value === undefined) {\n value = getPropDefaultValue(vm, prop, key);\n // since the default value is a fresh copy,\n // make sure to observe it.\n var prevShouldConvert = observerState.shouldConvert;\n observerState.shouldConvert = true;\n observe(value);\n observerState.shouldConvert = prevShouldConvert;\n }\n if (false) {\n assertProp(prop, key, value, vm, absent);\n }\n return value\n}\n\n/**\n * Get the default value of a prop.\n */\nfunction getPropDefaultValue (vm, prop, key) {\n // no default, return undefined\n if (!hasOwn(prop, 'default')) {\n return undefined\n }\n var def = prop.default;\n // warn against non-factory defaults for Object & Array\n if (false) {\n warn(\n 'Invalid default value for prop \"' + key + '\": ' +\n 'Props with type Object/Array must use a factory function ' +\n 'to return the default value.',\n vm\n );\n }\n // the raw prop value was also undefined from previous render,\n // return previous default value to avoid unnecessary watcher trigger\n if (vm && vm.$options.propsData &&\n vm.$options.propsData[key] === undefined &&\n vm._props[key] !== undefined\n ) {\n return vm._props[key]\n }\n // call factory function for non-Function types\n // a value is Function if its prototype is function even across different execution context\n return typeof def === 'function' && getType(prop.type) !== 'Function'\n ? def.call(vm)\n : def\n}\n\n/**\n * Assert whether a prop is valid.\n */\nfunction assertProp (\n prop,\n name,\n value,\n vm,\n absent\n) {\n if (prop.required && absent) {\n warn(\n 'Missing required prop: \"' + name + '\"',\n vm\n );\n return\n }\n if (value == null && !prop.required) {\n return\n }\n var type = prop.type;\n var valid = !type || type === true;\n var expectedTypes = [];\n if (type) {\n if (!Array.isArray(type)) {\n type = [type];\n }\n for (var i = 0; i < type.length && !valid; i++) {\n var assertedType = assertType(value, type[i]);\n expectedTypes.push(assertedType.expectedType || '');\n valid = assertedType.valid;\n }\n }\n if (!valid) {\n warn(\n 'Invalid prop: type check failed for prop \"' + name + '\".' +\n ' Expected ' + expectedTypes.map(capitalize).join(', ') +\n ', got ' + Object.prototype.toString.call(value).slice(8, -1) + '.',\n vm\n );\n return\n }\n var validator = prop.validator;\n if (validator) {\n if (!validator(value)) {\n warn(\n 'Invalid prop: custom validator check failed for prop \"' + name + '\".',\n vm\n );\n }\n }\n}\n\nvar simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/;\n\nfunction assertType (value, type) {\n var valid;\n var expectedType = getType(type);\n if (simpleCheckRE.test(expectedType)) {\n valid = typeof value === expectedType.toLowerCase();\n } else if (expectedType === 'Object') {\n valid = isPlainObject(value);\n } else if (expectedType === 'Array') {\n valid = Array.isArray(value);\n } else {\n valid = value instanceof type;\n }\n return {\n valid: valid,\n expectedType: expectedType\n }\n}\n\n/**\n * Use function string name to check built-in types,\n * because a simple equality check will fail when running\n * across different vms / iframes.\n */\nfunction getType (fn) {\n var match = fn && fn.toString().match(/^\\s*function (\\w+)/);\n return match ? match[1] : ''\n}\n\nfunction isType (type, fn) {\n if (!Array.isArray(fn)) {\n return getType(fn) === getType(type)\n }\n for (var i = 0, len = fn.length; i < len; i++) {\n if (getType(fn[i]) === getType(type)) {\n return true\n }\n }\n /* istanbul ignore next */\n return false\n}\n\n/* */\n\nvar mark;\nvar measure;\n\nif (false) {\n var perf = inBrowser && window.performance;\n /* istanbul ignore if */\n if (\n perf &&\n perf.mark &&\n perf.measure &&\n perf.clearMarks &&\n perf.clearMeasures\n ) {\n mark = function (tag) { return perf.mark(tag); };\n measure = function (name, startTag, endTag) {\n perf.measure(name, startTag, endTag);\n perf.clearMarks(startTag);\n perf.clearMarks(endTag);\n perf.clearMeasures(name);\n };\n }\n}\n\n/* not type checking this file because flow doesn't play well with Proxy */\n\nvar initProxy;\n\nif (false) {\n var allowedGlobals = makeMap(\n 'Infinity,undefined,NaN,isFinite,isNaN,' +\n 'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +\n 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +\n 'require' // for Webpack/Browserify\n );\n\n var warnNonPresent = function (target, key) {\n warn(\n \"Property or method \\\"\" + key + \"\\\" is not defined on the instance but \" +\n \"referenced during render. Make sure to declare reactive data \" +\n \"properties in the data option.\",\n target\n );\n };\n\n var hasProxy =\n typeof Proxy !== 'undefined' &&\n Proxy.toString().match(/native code/);\n\n if (hasProxy) {\n var isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta');\n config.keyCodes = new Proxy(config.keyCodes, {\n set: function set (target, key, value) {\n if (isBuiltInModifier(key)) {\n warn((\"Avoid overwriting built-in modifier in config.keyCodes: .\" + key));\n return false\n } else {\n target[key] = value;\n return true\n }\n }\n });\n }\n\n var hasHandler = {\n has: function has (target, key) {\n var has = key in target;\n var isAllowed = allowedGlobals(key) || key.charAt(0) === '_';\n if (!has && !isAllowed) {\n warnNonPresent(target, key);\n }\n return has || !isAllowed\n }\n };\n\n var getHandler = {\n get: function get (target, key) {\n if (typeof key === 'string' && !(key in target)) {\n warnNonPresent(target, key);\n }\n return target[key]\n }\n };\n\n initProxy = function initProxy (vm) {\n if (hasProxy) {\n // determine which proxy handler to use\n var options = vm.$options;\n var handlers = options.render && options.render._withStripped\n ? getHandler\n : hasHandler;\n vm._renderProxy = new Proxy(vm, handlers);\n } else {\n vm._renderProxy = vm;\n }\n };\n}\n\n/* */\n\nvar VNode = function VNode (\n tag,\n data,\n children,\n text,\n elm,\n context,\n componentOptions,\n asyncFactory\n) {\n this.tag = tag;\n this.data = data;\n this.children = children;\n this.text = text;\n this.elm = elm;\n this.ns = undefined;\n this.context = context;\n this.functionalContext = undefined;\n this.key = data && data.key;\n this.componentOptions = componentOptions;\n this.componentInstance = undefined;\n this.parent = undefined;\n this.raw = false;\n this.isStatic = false;\n this.isRootInsert = true;\n this.isComment = false;\n this.isCloned = false;\n this.isOnce = false;\n this.asyncFactory = asyncFactory;\n this.asyncMeta = undefined;\n this.isAsyncPlaceholder = false;\n};\n\nvar prototypeAccessors = { child: {} };\n\n// DEPRECATED: alias for componentInstance for backwards compat.\n/* istanbul ignore next */\nprototypeAccessors.child.get = function () {\n return this.componentInstance\n};\n\nObject.defineProperties( VNode.prototype, prototypeAccessors );\n\nvar createEmptyVNode = function (text) {\n if ( text === void 0 ) text = '';\n\n var node = new VNode();\n node.text = text;\n node.isComment = true;\n return node\n};\n\nfunction createTextVNode (val) {\n return new VNode(undefined, undefined, undefined, String(val))\n}\n\n// optimized shallow clone\n// used for static nodes and slot nodes because they may be reused across\n// multiple renders, cloning them avoids errors when DOM manipulations rely\n// on their elm reference.\nfunction cloneVNode (vnode) {\n var cloned = new VNode(\n vnode.tag,\n vnode.data,\n vnode.children,\n vnode.text,\n vnode.elm,\n vnode.context,\n vnode.componentOptions,\n vnode.asyncFactory\n );\n cloned.ns = vnode.ns;\n cloned.isStatic = vnode.isStatic;\n cloned.key = vnode.key;\n cloned.isComment = vnode.isComment;\n cloned.isCloned = true;\n return cloned\n}\n\nfunction cloneVNodes (vnodes) {\n var len = vnodes.length;\n var res = new Array(len);\n for (var i = 0; i < len; i++) {\n res[i] = cloneVNode(vnodes[i]);\n }\n return res\n}\n\n/* */\n\nvar normalizeEvent = cached(function (name) {\n var passive = name.charAt(0) === '&';\n name = passive ? name.slice(1) : name;\n var once$$1 = name.charAt(0) === '~'; // Prefixed last, checked first\n name = once$$1 ? name.slice(1) : name;\n var capture = name.charAt(0) === '!';\n name = capture ? name.slice(1) : name;\n return {\n name: name,\n once: once$$1,\n capture: capture,\n passive: passive\n }\n});\n\nfunction createFnInvoker (fns) {\n function invoker () {\n var arguments$1 = arguments;\n\n var fns = invoker.fns;\n if (Array.isArray(fns)) {\n var cloned = fns.slice();\n for (var i = 0; i < cloned.length; i++) {\n cloned[i].apply(null, arguments$1);\n }\n } else {\n // return handler return value for single handlers\n return fns.apply(null, arguments)\n }\n }\n invoker.fns = fns;\n return invoker\n}\n\nfunction updateListeners (\n on,\n oldOn,\n add,\n remove$$1,\n vm\n) {\n var name, cur, old, event;\n for (name in on) {\n cur = on[name];\n old = oldOn[name];\n event = normalizeEvent(name);\n if (isUndef(cur)) {\n \"production\" !== 'production' && warn(\n \"Invalid handler for event \\\"\" + (event.name) + \"\\\": got \" + String(cur),\n vm\n );\n } else if (isUndef(old)) {\n if (isUndef(cur.fns)) {\n cur = on[name] = createFnInvoker(cur);\n }\n add(event.name, cur, event.once, event.capture, event.passive);\n } else if (cur !== old) {\n old.fns = cur;\n on[name] = old;\n }\n }\n for (name in oldOn) {\n if (isUndef(on[name])) {\n event = normalizeEvent(name);\n remove$$1(event.name, oldOn[name], event.capture);\n }\n }\n}\n\n/* */\n\nfunction mergeVNodeHook (def, hookKey, hook) {\n var invoker;\n var oldHook = def[hookKey];\n\n function wrappedHook () {\n hook.apply(this, arguments);\n // important: remove merged hook to ensure it's called only once\n // and prevent memory leak\n remove(invoker.fns, wrappedHook);\n }\n\n if (isUndef(oldHook)) {\n // no existing hook\n invoker = createFnInvoker([wrappedHook]);\n } else {\n /* istanbul ignore if */\n if (isDef(oldHook.fns) && isTrue(oldHook.merged)) {\n // already a merged invoker\n invoker = oldHook;\n invoker.fns.push(wrappedHook);\n } else {\n // existing plain hook\n invoker = createFnInvoker([oldHook, wrappedHook]);\n }\n }\n\n invoker.merged = true;\n def[hookKey] = invoker;\n}\n\n/* */\n\nfunction extractPropsFromVNodeData (\n data,\n Ctor,\n tag\n) {\n // we are only extracting raw values here.\n // validation and default values are handled in the child\n // component itself.\n var propOptions = Ctor.options.props;\n if (isUndef(propOptions)) {\n return\n }\n var res = {};\n var attrs = data.attrs;\n var props = data.props;\n if (isDef(attrs) || isDef(props)) {\n for (var key in propOptions) {\n var altKey = hyphenate(key);\n if (false) {\n var keyInLowerCase = key.toLowerCase();\n if (\n key !== keyInLowerCase &&\n attrs && hasOwn(attrs, keyInLowerCase)\n ) {\n tip(\n \"Prop \\\"\" + keyInLowerCase + \"\\\" is passed to component \" +\n (formatComponentName(tag || Ctor)) + \", but the declared prop name is\" +\n \" \\\"\" + key + \"\\\". \" +\n \"Note that HTML attributes are case-insensitive and camelCased \" +\n \"props need to use their kebab-case equivalents when using in-DOM \" +\n \"templates. You should probably use \\\"\" + altKey + \"\\\" instead of \\\"\" + key + \"\\\".\"\n );\n }\n }\n checkProp(res, props, key, altKey, true) ||\n checkProp(res, attrs, key, altKey, false);\n }\n }\n return res\n}\n\nfunction checkProp (\n res,\n hash,\n key,\n altKey,\n preserve\n) {\n if (isDef(hash)) {\n if (hasOwn(hash, key)) {\n res[key] = hash[key];\n if (!preserve) {\n delete hash[key];\n }\n return true\n } else if (hasOwn(hash, altKey)) {\n res[key] = hash[altKey];\n if (!preserve) {\n delete hash[altKey];\n }\n return true\n }\n }\n return false\n}\n\n/* */\n\n// The template compiler attempts to minimize the need for normalization by\n// statically analyzing the template at compile time.\n//\n// For plain HTML markup, normalization can be completely skipped because the\n// generated render function is guaranteed to return Array. There are\n// two cases where extra normalization is needed:\n\n// 1. When the children contains components - because a functional component\n// may return an Array instead of a single root. In this case, just a simple\n// normalization is needed - if any child is an Array, we flatten the whole\n// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep\n// because functional components already normalize their own children.\nfunction simpleNormalizeChildren (children) {\n for (var i = 0; i < children.length; i++) {\n if (Array.isArray(children[i])) {\n return Array.prototype.concat.apply([], children)\n }\n }\n return children\n}\n\n// 2. When the children contains constructs that always generated nested Arrays,\n// e.g.