From 732ff6624bbb245f674eb5b5c3399a6dc9a4324e Mon Sep 17 00:00:00 2001 From: alinhu1 Date: Tue, 18 Mar 2025 23:53:01 +0800 Subject: [PATCH] docs: add vite vanilla ts (#24) --- docs/vite_vanilla_ts/_category_.json | 7 + docs/vite_vanilla_ts/result.png | Bin 0 -> 49036 bytes docs/vite_vanilla_ts/vite_vanilla_ts.md | 200 ++++++++++++++++++++++++ 3 files changed, 207 insertions(+) create mode 100644 docs/vite_vanilla_ts/_category_.json create mode 100644 docs/vite_vanilla_ts/result.png create mode 100644 docs/vite_vanilla_ts/vite_vanilla_ts.md diff --git a/docs/vite_vanilla_ts/_category_.json b/docs/vite_vanilla_ts/_category_.json new file mode 100644 index 0000000..2a6ab1e --- /dev/null +++ b/docs/vite_vanilla_ts/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "vanilla ts工程", + "position": 12, + "link": { + "type": "generated-index" + } +} \ No newline at end of file diff --git a/docs/vite_vanilla_ts/result.png b/docs/vite_vanilla_ts/result.png new file mode 100644 index 0000000000000000000000000000000000000000..050ad7b6d5cdf3276c079704e3d41d51470be808 GIT binary patch literal 49036 zcmd?RXIN9~);6kGP!T~CP^yZ6Ql*9tHjpMDy+%MlN&+$TjtYnhhzJOwDN;jdp?8%I zp-2gV07?nHh89BkCTs1z_F9Vj{jPIQ?ZRV?By#&0~-ub{+TA9Y%94 zlE>(jPOE<|R6h4zwJ4O&(wfV_h+1?Vn{blQWtD}91;>z}|Lx+#jDjW)EIu^vW+GQ)7_^ta@`S*ZB z6!vBhuk)sLuY}J}6|#}QC)8dXqBwEM|Bsj2<7YeZSkm;nZO5_LW3mWi;+|nG#aV?v z@AbzG|Nf$_mhB0{Pi{&dh8{P_{>(eLw+4K z2zndH@#nbznZdt~ki42N5bRf#fF2a9=}kyeTFG`^!c=EIS5VJsoHgjmJe`mW~F5UP*?$qZ-P< z#$u+?#IlK9#V^~xE=VDyc24F4QIYyn=>j#M0=_bFWV`IxQ$pOXm}YZ{a^jVr#iEc( z0jJt--CB#6gF#NbJ3$MI@z0J-FRM&cvEki0UhBTEYk!IPkE2UZ0(7Jht=-)o3D57F z9H;n9QHS{~=i(t6*=^g+LMl<@y7SW&hXS(pSA)NsCt%6N5ULOeTtWX7MfwpN&$gw% z*XHf&D^&8X*`~mgE8V7m6sRUw^~USY&DGNw&@ZDuEIWEH9_yV~M{zbo*T1w(@3WYT zuK>FacKcd_Y1{Z(tzYF^%(ShP+&QUVbg)+Vgj$F7R91f4$Eys_6vlyRL`3Egp8M{^ zrP~No#d?!?TPN0V9#D}|6ZuwZetDaJ>Hx5Lv$~g}+N0SuZ_ov}@V)7-Pm%PI;SAzh zVV7+iVT-DvQ6F!#xnpP6q5EbW#ea2_P_*XTQxGSalr`RC61B6*7`-yP=EaN+{N=_- z&Ko6fker9E@0plliKNOkFA}#fU4RvR(?q?FQ4J#_dsxVaPn(ZTPRpDJ+`tiiezEGcgHIJo7Fg!b6$Uq(7h^#~qNC1+2iv-(}} zW0ATU)`nfm`7wEYo>9=uq!0PtIIH!Iv!VK2WC#C@+t^lTVX4SvXgI+!eB3c~T>gT< zZq7PBmiBh{=)&{&#sx{Hl!J8`mnE(!^qr1j#>}!4yFM*fLWshmNFx;cC1Ux{TB>t- zsq6b=dYfbM!p6oPCX!mpJW=KF$#x6^lnbsI#$w$j+Y@wnblXF8!@FD}FjV=XC_(j$ zHFTuZN50oH1=S}R(^pirN%hU%uGT`lI+!A;OqOq%iiV8ylqQ-a0lcQB$4JUW^zBcV z&3O1e?bz6uo$OdcN?VaGXs#<>PV|F(9CD5F>P+w@5#m+?Z0Ej7pD^MkJjc(#_1gva zOB<^+lkykZ4V4z_>Jyf?+bX@+qDVq2etv!~ntg_K7>2v7j_%Ro8XeEwM%XW2ygpel z$uK>}vaA6+Qa$$M#6RujP(TsaQjfNVQlf+)H~=ogR`X<{CFC6U{X`j$1$>!4*k^4H zhvwEul!1-bO|-_0ExSva-=nvD#PohwW7N^la8*vgvxd(TQ8&0}P`RTzI>R+K9aHZG zrd!f+mXjNH^m4!z)T<#7B@Q?X=_?@Q`w`+hca;WAiDI-6l#QL;(a}*q z*SE>tJ?Cmx!tHY_FN3)3LJ@(qR2P?jeBDks87sz2k5SB);i<5z+_PO6s)$7-5fLr+0HT6 ze5Cp?DO}zeV|7un8tp@N_WPxJ;82tak~jXEne>quXpuYDHQ+(t)7`>V{xD zW6ihv9IRT7q>ya(eWmBuyr5cm-$KX2J-}2=SdQH)u@uypo?o z1Ab-Jv2ry4mo@sVX3K?qmb@;%hrGP#XuHDM77XFZ{d{|bL=7KLQ}^>ud!%coQH6D6 zC-s31{7zv)3%0mtKY5kfQzvBB zdb%+fOounoxU0Hv)#2Sl+>EckW6jQb8GKTw6VF*A;dk+{v%WqSct7kh$=ciXMet;% zMNPE?rzd-iAu+abRY2WualoHMN-?At z-0+F3V#K`+s+Z$wVUkh>^1JoAJ?FF*+4dx zP`c9h%ex?|edSJ5M;I9!tHz@)Y=v+qUXy$zs~!#hZlV^TI%*wD8Yr-&myLOyKUo&r zEv&KIU@H<(mEGo(~eLF4AOSG&3MxI`@}v@zeZ5%?O4FFgxsM+&Nk3=7V3vvq6iy&K-q z-g;(PF0g_Ntjw9kCbleMSDz*Ig1@bTj9pBpNUsHGnv@D#X>Vl+>mtXVN6l|S3QI~r zAQ1L0-eFMzRcY2@(6EooC(>qtiKqzgk)63@^3j zA_nHxkV&~!MAoSY66YXC+q`wrhpZ;|D z`3o+nnYJOC!Yr!Juvg4$*SvW5P)1D(2l@O7p_+GYeuGPMtT|clkEp!Y{XqoWk4y{* ztVd~+@?w)&UZpMLQ|VO|wyoq({iJo(JrhFnlgdWHv5bq?Vou+ndqfUVRGgFSZ;F}c z6=Il9P^ZitDLZbXU{dZomT~qXbEdNaelE-3wKDpw@!pRB8dhmla98)6gr8$z&!uE3 z+YE|HS+As5>+*LeV=9poGVqf%2|PKWjbrH=Npi5!JAkQZjro}>m7htH-L3-FY_vq_ zS8otDfVX&;J3*M0$NJd)IFclX+LBNL%qau9`_^|Qe;cOmHy^Xs_PY9Ale(GVxB9lB zM29&M+@gO5b$Yxc%Kmjh*K|s)NVlDon6xq}=m5hbqv!9C5e>Saj&#$Qg>$>*6 ze{=kV5*k=Z`kWe@y1JlE8V+@jn{b|LmeGUK)4q(JLhh- zwZ{xMI$F!kChpDjA{WXDdSmA7*;l5K`ndycS&$B9y5rsmp;M9bmve1&W>i97jZhr9 z^+W9ohsipk#ga|`(0qRJ(i&wWrk?6L2h?{*5P^V9wAI6@sL0E}c)MoB0cf0vPFS4XAg0FHCH0SF<0ap=Zve_dd&elii|!@f8O zDqKv}FdG0BI*ttaPzthdn{UwQj^c-gd}ewwLBsAGS=ojsB8=nDFZx{f`!@Ay`E$u5 z=FsLEdOvc1htUBc zm(+(QJ4FJ~N3Y;tT!peF^iie*LD(Z$VGX(Hy8ty=^psvJ%Qb^+8eO*E-Np{@Y-4kL z7m)fD!?9)30$UEfm=Y!8vu+D#sg^X}vpl%;EHS7V+7Mmd6r~p5o1}&e4oY=!L_>Cn z=Vl+zGcO=EF@m1kR;UGP31MLizj|Qjqw$xW9zCi{P%%!|SvBR6$%*=q1y-E9c#W}J zF_(*3F?(*I()``MK`HkOkr!-TrtjM{&F1@ZoQD>d+uUIQ(XefnaAFc(>1VZt&JZk& zCtnVqIQ}ypr{w{F;8e57Bv`Jq%w`epwJx{O2C7M2nII4dF*MFx*1~$RM3Is0=&d5) zYeDuY84rSY@5RCqRC@NMk8Pokgl*S4B|KLjVCA0TF)EXAK`>sxD#pcpU@d1RF|N`fp3ZsS7hUv=Lam$9R~4eoOEr&sjYJ?Fh) zXnzB`u($|Bfzc1Qg9k!`%Q=%z_33O{uc3yZ`w)ocB8{8qWcBdN^*eN+5!Mbr3B6L~ zR{hRA)-c5wS7VL>7<_Lho?c^wDMAF# z3SKWQtEs7Jc(5EdYRzlEu&}^(!b@jWQBPE2Gb-1#Vtodgn^T)`WJhJAv9XbC8vat? zhI<}aEcSb}pEaHq_xBCQs+Wx!uV zp1BHiSnhDb;0DSCA?NglSQw0%Q!zJ-ItWyTat{AWEc|6sn)&{x-k}~y7JX0wQU|f& z$CZ*iXKZ<&6$fSBC@YYPj}F@Hk%X2W)F)yg6KcS0bygnG~oDo5!xEgii?WQOVZ4Z?;*%?(K-A zd&&7J?gclp@62Ux+i1L;TnJ%Te+ia}-Mxiv^Xp33DjP$GyW9sQ7^`{oo{2s;<{p+m za!+mOK?nSOk#;@CxY*&kO`c2iq~i0EQ-vER^W+@$nv2V|<6e$sr)aq(7lVzi!id2% zDvsb0o=E0su2Jg2WxM zi%udDN_zbA%*s4dK9Yu>$r6KC+z6p;=RuCceE6$*706j9{Ym2lLF%fjXlvbpY`RG= zVVJM&RBAg&y22Mo>Uep2Zf$Knr?pF50b}8xw1&3bcZ0(xoVmq&F zY>Y?DHg|ZZM||OgC2shwM|)$zsx><$aL8ht-wvin(9dsNzr9Vv!$on;J8H!(EIb@Q z501D3&eikuAmm121M_jk3m~e?*@4FjqpqnN~nki!zV!jT~@CVy18^~ zLK&&|D%19{xpCmvr023N9(!5L=hj=23|?hJcZEA1$UiyBn*DO`c5sw@?GC7jT%F^~ zFDx@=-BHYJC#%(fQ9M;?+s)O1AP3&9vgd%hewqw)?k@#BY^Hg0WXw9Hu&h7%t5CXR zcuUdA1X);r$Y1vJM`DIHvo;C|dU|g11e#E%mbQK9>cdBlj*BGXWH_rd7unLghWtJ1 znV`?sx9SQ-?$DblwYYon8$&}I-_iwHE4}l`fbP|{(X+M)a@O?< z&e-e{O*|zcTGYIq<@VN-c0MB)cO3OsZjGNxh+FeEzdc1#Q{>|Wlie-4GXtmZArUAm z@{X~$z5hVogCW2l3zHq+wLO##6^An1Vv%ybXBucTDkCSCLsvFGSb{u$gonTAWil#I zx9Y4i-a!}ScZ1Ih1egi+Yl3_NoxZ%8)RyZ^E;wOew`B@M^V&gPVhfvlpVfzZZDA-? zBfYLRgT=ls5m>qrAd_C?v2q;{WKREZ9E=!DlvG4xjC#chsD zYuZnl_VCdrFDhacxn`H2o#|k>mmFMoDSWP!+tBpED~ zo{h1Q(B8d|d(3#$jmMTYt<*KsjEQRP55BFzdnH2Ud!Sg*G#&+9qZzZRp5MS9x4CMN@e>O}%FM8>MfgdvT4^8F7l)x78PiIXi}ZBwKt= z)+pcyKRJYe-y-4=2vh^6&(A&U z%cQ>?b6?XFal0Dbw0 z+*Pk~XM~@1@4?pgVtbO8FnTY2^~`+i!jT%M``ceFn=y>vR6TacNqjzprn%fiA5nyg zoSTaYnI=hYeQ(Hbd+tk*cO48(-xaOBmI37S`YLdV{;X2YO|1Jm%GYjpREth|kUJA9 z{kGJ@*@!)!fyaJ#>VxlS6%M@nmDz|m(Xrh(n6x)g0p2Vh!%o($FWC6bLQtfY+-(@R zgFGGHR_Ebl^qNanYD&+|wAD@TD2y1V9c(=r}p&oipyZREVXi z%Q34e2eceW0+5jvW7bhB;405vIW@>6(X*NAnEaZ<3#|?m6-gaeyAz!{Ghu6c9lryvf#aoRh>)AelDb|0M!7c&OStS^I7q zfY7jby!T2Q>E3RNgZRhSYh5WyD{=u1V~?>~xN1^kf}ro#$4cX5yAf}VVeX}R4e;DH z%qB(+5uWuKa7&2TSeVVF-uZ|Lzh(3m$$EL9rc+QZ)@RI*(QzB;w=t6nmWdqNwwqzp zXxn}GSoy?qO=a}fEHg}2c87O_os`MA=;u1J6w@wn$9TxZHo;MH?@^6fwx10E~)M+;dvM?q-9@7+(4AE82t(Kg<|* zpU89+RwBi~B=+K=t%rBkyG!?TU5uF|;gR5876x^EK^1 zFUD>C+F2rb-H?8rNn3J(a|)a{*OKcqlbpc$m2KAT%(b%Ny4PTO^vLe(F69&)atJ-U z$JwdIadd>U;ipu50Mk)3xlSA&zr7OB9%<8#v@Yeb(j#xo`LwUG*Y|F_;kMr@No(>J zUGuw*T?6RJ*y?mQ5FM1lTdt9&x>5iFgLiWqss7+2=(F+-_(xt?@S14h?dt*%Wp}zp z4T*r5s8N|}GBMM;CU`0WONm6+c=|59vgzI%t0#p=s=BdprJW0@sbt#A zWR%;PYyBGTa@voC_rCIR+?4-8J!WF#odFq!<{2#qzqfn|k@7P7JEg3w5p=Dug7cQLe?y{11pC2fSn#Rsmzg=F2=?**Ym^wf*5+@e4 z?eLM!9_LwY;B2XDKsqf;5N>a8uiPmkEc|gMF3ElLWX)P>YsRyhBKNwY-4G`jk6W0@ z=0Zlf)A#PzrY-{SWH{5 z&EhUu#B4bbEbyZQyw>f$x%2~Iq+#sx0iNY>T{gQ?;Yh-mdTR|pdR^VwA*W5%63J}<> z7tMw~QxTP9@Z!VuNh2@6E#5`%b)^0?znxY6VNzM&@bKrk+Q++*N)~o~91FaAw{9s7 zBmnR?1pr#3+kM84>S}7w&1wtI+)M8U(rSGL)pwT0fdYgBkffG(#}!zqdU=tbY&+K* zJtIQ{5_d$O)9y>``F=Rx&#Z}$eRxXnFSovYC+Ew3rjXdz(mA?^m$|}~gzntmRQ$$P zmgjTJEfviVZ9o4qjY<&WxHTt)+UlD!t5FL8Qppe)dJP+oUkZJ;lZ80K3_@as!O7XD z9t%JIx#0DYcJr}Q&-S90M~MO;B3^w*gK0SMH$RWCuhB@Rf1N>St*WX5Y8L2nJ7*U+ z7xwuDIsDMhk+F@Gp}-5}NMuC?8D9p+=7O=I!9Iyb#kvltSx+;$RUiT5ywi~@xcy~0 z*3Z>^p<@_PCMm=Dt=qJO8#uR=lB092$F=h!`NVC^1W>|H+!`g9MD7080 z3&_)0Vfs)Ms0Jq83XjAKy7=tbtwzhT54K%if@D?WoIMBo#g4t*qJ8u6t?}L6$lU=x z5rmWt1K%qHsp;q#`Sv9fi#yV&T`Z8i)f)`rA%salb1aUMgf7#=f`Ns}G(RXA2abgr@Wx?m&-XX4vb%WluP>K3dx+=;8T@)}{@Z@|->8 z#qGWAEt4nLIT+sFw$%1pO$i@?_=zPXk+0rPbOVFA2aGvy^>`?2z>Ej+J;%0 z+YO{|m7AdDp4EJe<$~2hor{f1?Z0~gfD=jg_nq-CavTYWejqJB^7od#Sg-<|CFzB#GZ^W)hRk-uWbPcxTM@W<8)8$`CRy)T?HJ z5!dGjk1QPS9~p7v?3$mSFM2m&q;Ed*;syZgKM~fX$3}(9H4Fcx~=!kLZQ)q8|trZP3=vu3Z1e%!lNBlebE`Ht&dqUz}Io!#ztn@%Qp zrsg50X1^QpHDV7otss690&>bBpOt;ghMb?oRz{l}jS{RBOhd2BQpE#ljZ`(1{LcGW zZu=aQH)wPxzfq=d`O%+6N$?rZ_o%|(1!q)Mtv1E2PD zOXug}zO9pY1w_#ARRyfs`6uY8aCNr?^4}ohVrsY<;mxVuPlNm4Lt}e7CfktSFb+XE-!xqN|n&?7ESVchTM_@KH>ZZ-Kd#~TI$45&&&eP8t&C_wia=w5~UUSix|Jv8}c%#8XePy=&F}uzE;utWF##J3oQ+@zDIJd zdXKC;tjU$$eVb#&G2`!TD1VF!Y|*{cluB+hr)w#*Gig47BhM(|=MNvfa`qB5>^Tgj z_O^Al8$F!B4k(mWwB+Q9=Rmrq=QBU0@s(fNB$62drg3Vr;*eYsc(a#Q_`=vY!RBNwkUy2kVpU`>ha)aUU(V2Td zUqRS#_LG>nW>TNT;NH65yY@7~shYQPVqNRY4!3?SF8;nWL8a!bFxxK|*fG9O*r@jD zk?OE0l{qS2d#$Z~w(r<+V`&JuRygH;F;_;!E!x#RF{;(8#q) z?#S-Rm=&P+L}{9D8a^+dZgu?USV{Xn5hJ5wV>1aSs(LI?mL|eEbEpG^0im=iSe*D7 z_56Eeh4+VG@b|QhzexArZ6qzUm!JYiLN5RNf}fQ45QRA~Me|!MKj*jpeLd~9+kiw* zUk&;>Y57+-%=41~8$AhQ`DOe5l@UljeRz~0{N}>bUxxnIoM^d{huF(H1b^9)zq)7a z&R>FZL4G^M7YhE?Oy+AN|GSG&z_W1G!G5=h|DQsuw41+n}2E9 zU!n$-CZLFumJYNC#B&HLrq|*0VL5l^F&_fYK|0XwxUr+>BfhFI3dS%=)d)5A2Udjz;<&8Q z;(+cCY)dd7WE=syv>9B`Xi{zzYpathIRIg<3N#EZwgPP~#WJ3AU(7^^{Go`6%Y*k8 z^#uf>(b{DUU?|?u1x`py95H z``j1s)uZ2?Ad(heii;>~Z621N%6h98QKGxcm(K5cY1!aRg##cY@zdf5t|)^hparPd z%*Z-*Yxz5vAWuh79jnaAG9SCct6m&h_--y;;;V^`3p^hNf7tOj=^D;c^0LnP1uYm0 z8;BWJR`q4z#amTR1?Gv4Ft*P7N68QR1?U0CNdH6fz%|;NB^Q+99>W0qE07&s8VEN{M_<2Kg=F$ZLO zq}1F>33;~iovi40vP0maqLjlsc?7Od*UbS54Fhkk2OJ43rsrI1)ti~$U?^>D#qzzg z^$O~)PpH3QHTD)I48f@kM9Go)YcnWI+``sbn+|(|h!_8EaeqxHdG}~mIKs5ILJ#k7 z&7il%l5yRad<*Z%LnEccBMSG|Li1IKd(~lp&)K}?eSLGaKJmfL>|YDn2%TT|WM=^~ z6%aibeEQ)Y(<2Uh*UFbw1Le+%ZzrD^g7vpv{ly-^EGVITEJwLnRAARrR4NTFW4W zLtC%a*#^@PHy=^5;~77w*k|$$kCS|AbLQ}2ux_#CXI$H_xE@u`S*~N65HU}V`%ijuL{)^W#PAm*74!a64|X);pKH(~JSf1{4lrhjLd7`-EbuJh$iaz=y%ju0RZhOSFiQm&65+bA zm3UT=?21Y3CGeXKX6M9FR*;fQhpfFhp*1U)trdRe#^@8bN!l8@_CWvYM`sd`pP~g( zt~k;Dr80kW;Q>Y0G!5}4d_6^@){}ReANMvTpkC`HKA7^f#B|^`i(S(6 z!JE{NhAv?f+gl*vwOFFr(_(L&=kzA2$}61Jt=AA?TSWUMLrI{z4hTi{w=4&5*f-oV zn%5q3U?)`YYfq2zZk-uZcmsgPH)k3Tv%S0g*i4PqqCCHpDh41CL$)3$p$l%PPEAaL2QVANf6mrlqaJc%L|M z?fV|&3V^V~4n4Rh17L+YVt&#y3la>ciS7lb96=ynivGWIQ1wOMSv)Oq@Wl2R~vVAj59VGT`rut8)oWVDt_CUwx9IYW3-mL+JM z@V<58I3*>KqJ@A|=RL7|tz<>LO1xXYNWi4AH1 zN?>344DNHR6j%$HI{< za1<-hfi=(_U`rfY=Tf)#Y>yVF;((r!Yqig($5OG|b`?hFw7>_eZJ3MFhJ2bI=_AvM zf;7Hg{H|ANwCJ)v5B)$#BL8L*D*Kbr|5R?+fYCF< z6ARPmN3HcwL&85{tTEPpuSfHXMR@5!+*W$V_svY`I*efO2b}HZ$~iXv%nTs6B7>{K z1LDy}{g&ZPuVCo5>Q^*gr6%urM5FX#rppF+_Bx%I4)&bxCwr{$l~<||Rb$q%(qvJ? z;$^0YLfs}l()R@@eB86g!F^mRI8Yq&|z(Qk$UWzIAgDi7B{sB)VDl6Z)Evx81@Ov z*(-dtx)*aApR!cE_Bs^z16lPAhmTR?va)>nrn666YWm{$AXJ}PC~qhNbDt?tuRSNu zUa1Q06GbSVv{TLSIFK(Kq9{6%eIGw}?-que-n3zS{Lz(&jH&Y*-|t)zl9ZetcASIV zsVz1>7JUX(F3IS~^O)7OzQtOE`l5m~dfMVxp^GbwgRfSM*mJ779AW!@=iMt9+#PYI z;}FQ9NVfqKc%P|Y*T~+Me;C@iJ@>d^*7+g3O-C<76z+g5FJM^#amN55=H!7#*@=7*ujgwT>b zZQi{^3l;l8!Dpr%&%`@meruF-u zuR>t(xazB;)?~`SgB`h^@k5tU>&tb!J7nEZxVEJNb*k^!WH9^g)+fW{?-a3MLb};yw zs%xU8n3$N9l##D~XnlP>5V!My_U@F4K#l=#lOdi?DV?`sjO!p-8@#6Gi{w(n^UrK^ z%WWI!gL#@PP{+AJfUArG? zK}a^Hg>0NWw0dxO)t#)VOpoSq^1aWX>{aYr+;^7YyOC{P@2T7KLeETzrDr)? zvI+Kf&gX+iBc|blMK5|;r+ZGUtA6lEoFO{m?uLZfhgIc!{>D?nT5T^d*+rlFaoHB@ z*A4U_qOY0EJwEa<1K)D z-wv^3e|WVgtI&|puGb7Vw@#T4vL3R`8((`$fwzb&KV_VF7&?x0slyO-8R+bcM`(yI z7WIMKY7&9k;6eDr4yYIA+|A8~Tg5pP_Gsom$sfo07I$qJqFn~_&M2~d-{LBuXInb$ z1Rz=lVdjIOpk@U?ALoNwrEmWMJO?IxCf~CjG~Uvvzv;hw0RpJGfXZ9n$kNuS{hQnG zRM{NNPkQz<`$m2hGrYB^+}@nEjl{JB3B0C0KqT#V=Cg7Sl~n6h^o@A+1s}vZ6-@W@ z6Kf^NKVdulaDyW*7+mh0nUeAqq7O#8@oh5o6^(5GC!~`FTLLuNWK-T-N^g|6jPlK3T2vzTzs| zH!w7?dCT%^;&Dh!Utao$<-mr%g}(kZ0}DAVv2(v)ES*c zR`Q0>oAytEw9{&y4=s|>x#)R!M6v4N0NUlM7#&|hUszaZsEe~Rz=y)a!ou?Ng-Ue) z2Ra0J%P`Y$u{qm*(pG!O>YYP%cRVd7XQi3fMeA}JDS}W%w^>a=r+Huta#VuSP3(l9S!w4#Z+?ag?NQZ}2=&p9;N;37nYg&;J^#{ofTx z!KV>3Xg0V${(*Z^7*21xXJWn3d|RVWb=2ff!u2tn`q{x)Zx;KEO_#smug zq{y@``fl*H<)2UO)#7;ZT<~LRosZiB`G4?86@blj_U^-h(gpp3Fao88xVk8 zk<}vH-KhL%n_Jp#EfkU1>1rE7dXAM5rjql{0X6zK6=W*_#X@7%5A^S}8M^yaA287N>h>psLr56f1!@Dfv3EnR^%VaI zL$scX2pwiBhC@V-J1{|{vVejG3?lSyZO~5g!P^_sNo=-Sy%;;kkpiAY<`FR{22cqQ6b>O zF+Ki$LguHf9hqhe;MG5v;aeu~W0v=MBQU|Kxesvl#85=9twfHgCC`3$fAC;uU(2M zm4wTQNSEr9GPnOm3jY(HfZrJTCp`?3rJhzRZ<}4W$7kQyu=z&q#Z;MAaJON77&FTW z6;H7-4uE@o}V1l&e9DGC~^ZBD6cmz6PAh*ZTpq$p*+G4 z3W&J8rU-)#qgjwasWd3~P-qYUWL zJBQ(0nrok;C)!Y^!?V|O@b*6KK8Z;F9nq!Vw4>P38YGmKH4I}=L#PBFw!qqBlsMg# zOrJY)R8TzM^QpO6hk584#XF3sL--wQh@0yCoFZ zytH57TTRZZZwX^#(u<@v9N@b>TpJ9eZ_a~Sacwav45)gb@63C! z@}(?G%{Xy*!@&}U>D!8D20V%i@$`SZ$ls6b=zyFvfONhA=xF0+?nrNI4kj>~Y52A$ z`>Oby?FHqFvWc=m{VOAHuUNsItYGlVhOWhqVSG?mH{3fKl_r(2Bo9>u4*TdL zjCF{!@{Rd6$Erc?=g-GDBl4roW?SeE`p$h@<3-?=c~`~M$MF_TJB$!AeP%<37eh8_x`Xdw0UU))g- z46wrf^?_n;8rf-t1i7@$ijXL?Iu4*N5{rI?Y!;$XkiGa=XCgvRpD>E&DUp-b>>s=M zfLX-r>cFiR$%jfb!yR&|ioZQfu?;e0%&snGiTHr75JX3aA<9tkwf9^mB!@+iSb*Am z)f@a~r9NEl+#y<{s z?DM1lc3T4);1M~CKasjapLZn+oeO_xaVbHW>hibP)!I4*06+}Fa4jD89eR6SNBUIC z)F!d|{>EUWXRqNP>A=3d~=Ow02Ao%?gaRRy_@}< zC!bJKM&m~5ABYkn>&s>!a$tVRUhko4J;q+IEIP3Fk8x2GK0izj)OXrz0K*kHYzWto zmXZ=ME!QyzPgt@0PJc@c3p)eS`ybdu9Y(hs)fr-GX$g=9>AwDyloU$`hcjAd^(K@%(%bNz3QBQ(miTG z=YN|oaBvFP3PY4s70&|ufV>XsDXd4#ToFqx+Y)gEfW6I*yfEq!VM2j=GrR)5rY84SvSD3m^9c!26Bqo zuv0Y^72g5T<_xt1aR^{fKMa<}mZD%VW5phN`S#)HT$9$a_9!Z?KWS}G+~k4u$iaQT zI(CkD5)vaGk$8X)gPao(= z);NG7=Dr32>WOQ*JwMVF*G}yb<|sW(z-){wr&_ zM}-i+qP(wc5sW~U&4-bF-Kp$`?qeR5KsUT7r{l2nf86!oj{2we8Ec7aiR-#cG`Y`1 z3|ibi{|DkMO7wJip4R-~hzytM2h)IF%zA0@g_bQy5zBSu_X!%|g&8x}MJ0=h`rwB@ z@&JfgY7}c(l5w8=e^IB)?c|P%IjAYtfbnm2y6(cXw6q=ahW>Nh=B=^XJ7u6nW-07A zuGFw<6tG^v6Wq*Yi{m0wzW|@KCpx&e>6s!R$czb-LD7K2P@!lSuEqtM0*3zA2nc6` zZ*yVMNDZ>#R3pX|Rlm*@CeAb=MgtU7eoI&1P$19kmkdW*uJ$V44S@p=$C=BNz&wR5 zHB3ls{{*BZj;c?@a2Zc-Qs1~ThBnVE?JD{z4b53Gu{Xb5aw=Qy4}x~X)C_8$0Mu-c z2aOf!fDl$)&7UH~7*i%6nTJ;~1{XDq22I*Q+77N;`um>;xB>91M}y}kfz4PMp@qa? z3v!EWD?~}N((}b~7+FX~VX^&9xL1dDf|gojV=hY=YqboN^}54(N{R67wNk_SOe-B; z=8Z$5U-i9G(Pe_MYAp@tFMmKmoWF_Gn&tq&?UUByiMgyYR{%Kc+d{o^`bgHl!;^Z~ zp~aM#K3CGB;sK;ATaIz9V4sw={Y=UvE1?5GDajaR_{qe4aldS6=!YsQWN-vM_E~y_ zovxK@2RPE+Sj)WwL#Ox)fBo2{6|iS$FD9T05j;?nVw<~~@#;+|g0;Rq6-&TX#FpaZ z{lrDUVjtgs8(43Bh;2&Vu~`PnYNOU1d;-Vo%#4Lq#DSk6*>p(yKkZ#-SW{WI1_s-p zB4VWl#$ixV5K*EK2m>RE1yGP80i=i&NoWG01yn!KmLWd(8Aj>N=bW2E{AgPm6uDF)%FsD5`nyJ3|}&uooQa< z^!rGQVwrjcMtgtWVru{LN+=?9Uahj0OV1&Gx?Z|XQN!QK{EV7|bM|`d53nz(6i=w# zuuhDTUjTTJ5&s(8UO8@q!>|-paHgKr7Il%fx}w}mwe_&*w(kpTA-#|9r2Sb~GgZ{! zv>L6dzjHp`5Mkz8#9yHx6tdYo2M{uV%c>*;+?M#@I;y^dXtb4^rfoDqp#h-4_NydM z5RQ*=PCZET(pg<8xjsocL$5>4K_+PKBt199J3H2^A7wjJ>X;ONx~ijp>#6%oK!^C= zL=%aOSxal7xAfY$c1f`+S2>4(Mn4hlc3pj=!I272Z7}E%4l05 zdnS=$hWTfPrf_zRPD5V?qVUtUGHJ!?-45uFCzW%y^ygiFDNY zeXmPmnAZb+RrFXuZf3q?$B(0gq|}+<>Q>Mu#NyT4{+^))D3H{)UvTjg9Sr)^k&$Bi z^QCFOSsA;LG!=BL*N*5XqBcA8imK)=?Nkde)9eUu@zo{DS-EY0FQb)uq-I<=R&KhmFF?Jc!}kc&G21Qtte0Cl_0!c0N|f=x)Y0zv-ckUK zk+QPC0R-xs>uiAdEvQN0Ebhkac%5U#);jWq0hVgWu}Iv@bo6!e^k~nz#=Nf|wRUmh zQUDK?kl~#g?xib)IzQ`L{lBc8Sv;b@Bc--3?K*%~V~#tVtG)QL$MkA8>i)f$HGeEq zIn!>v;H~nK)&M^Zr0D>5(!_q&?|R=h(3x0W1APAIMs#BzP4|(M|ENb2@uiA%sNlnQ z>&QtMrX>8^gza#xr_ipZm;t}Kx7N$WaZ9&Tafh+PW1VNFjzw#TyTsS; z)_ut+cM%!hqt=+gX*5#28;7yXZE|?-WJI4rrCAcdD>`2h+WB7c(cGg?QuRJc(!XFm zFY{)U=eZ)S4Pc3xrb{7BES;E?n$}V$Jgf&sDPC+_Zi+LtIt=jY+|D3AK%EF0i4WdN zB#vKcZ8S0kGP7Gl14ckTrg$sO6JUw}6q%N6D5wb9zj855xLFr)K|A!Lfep5oa2SRe z9vPN;wBy9(2A!MUzi1v%`PA0Z=7Y-hWVB}=<}yMQf2M9$HvR&EO>mNW-V&QW8 zVD>@78U=t*0=y}}vjXT4a4G=Q2bfrZ{))E3%d^C<&NTm)(fSp1ijg(Jn?#EjHk+Gy zuowJYf69;lpRWbZ>Di2@uwA~^^weKs!~dQkeXUOj2wls^YU0*@Merv5qukihcmECI zJO4e1Usi2K3j8x~8@2woa2;r4-M|y<{{DpIS0jfy0llWrJsh@yM$1jw7q0_n7BLf| z0^gks{qyC1+XeLaM(@f7Z{`yal0=2%W3S@`@&i|RgscQGMklGqtH3M@eAn6y)IcS< zKNRbzxpp;Q zz~=XeCJ1Q5JkuE8K5ja>SJN}d zkYnQUOUjB1+2RS%B!Uij(7f$DubutwG~szXjh!gzpRR9=cR9zD=yi-eXcYQqFTmp$ zW^urw5ILKo!2&tC8#mrKE;XC10DuI96!#iA(%(Ac^Qt$Q>~Ov!N87N_YfMF5ePmf< ztLx`*MCtm4UEb+Gant<6o(-HPyp2-Q4%^o_ka6{~uCA}^@Ab2flR8&eo5fk{9*P0w z4wLX<@fQo*_DKe*UOVWVZ2yLw=l(HQUuv=FSX4&7k*3@G94*&bEz7a}yU?Z*T9KSi zE7RYzw!#S_h(^8WZ08bi@^zDWqfq|`;4p%!TRYQDa|~UnH+w;E(-p_&OE1%JpT1O) zCF0f5nB{PE4$8CmZH$^yTS{ODo2ItSla&oTi9hPZOWlQIPVsGNr8zY~_t#Y&*OpO#)bS4<*|+UFA`q+} zZ$^nkm`tPM=VB)j`_g93qg~@t3)|jr(b=LY(s5x6@$&^CaBcu-b$q?*O(fxxQ>x4D z(aG1l&m^30rZ?{*4`Zzc(I1*yX^IzL=3-23Xf;oHvu$k}&0ljO1WbZoU!_={Z1CcR>bgoJJOruay>^~+7}0a8kx{pPlVzw!q> zOAPaJoQHh7MmkR1usVyK+vuuOfHVXnRe~HJG$HbbKWboFivsOMg2Q=cXBN z1(Y{DeBS^5rV#5^L32EU)@wQ_q{Nm9lAp{>^(&Z8jAcsiKRDu%T{Rp%(XR5!dvnrC zvCH+;lV|w_Kbysv^=^fei0)}-aDqj)MPl02^g;2<*)nb9k&OH{F{OYV5?5*QrZv<3 zH)`h?fqN(`HQoT!)-#~4(X_DIgHRmE8iT|vSHB4_C?vOx)U+q zLa!zl-BPQAv25M{;}VfpQoa{)j(1KrY1afl+jq_HZa=$h56>ZNs`M1v5X#VF#nr^0 zE(#BiQrfW7aovW;@aaRk%5uo_FYmv3q27>br%}6yzl@j7ST8jj)DYb}uN>S!;RyO)wU6$%n2Z0%y?~17yJ{ zfH;2o(n0*}YJ`H{5ABVb@~rU2SUQ~lLTB8zO`mkmfH5*t5y zNoI6|pTWfHcPRlU7mn28gfu}0*S%9XxQWgMx`R_v{g6{t0I!DRw_17^59fm~tgp3O}XDItF4egvpaCS~9N7 zjfds5cssM3-CY{_fq_ATr2|jxs61v@gv>N&yvycFac2!qdDaP2`Q%^oQKtMb1!Tv} zd4&E1hY@XLh9-t|Shmv(Ok@`o$LFF|6-5iMc>!#XvkxnDil{~lN4?l7dAfjL_29{Q z$!6=Nf#H}m1fvEA?_(KKM}4SP8m;}d-1*!iq<-;Pn>x(&Oxf_zd)Tlrd}DvFF5ANz z)hzLDhslY@RKbN-7s(Z*5Tz_=NHq1Ye)f-)Ime2C4UdLPNF>xO~iu0X(zSE}f8h6Bf zfuowx-9n{q96!iwP2j()xeVt^$4|8&yD0v1{HDx#55z>=M|BWeSBL>yFQUWgEvAh- z&(XEhDmq&}(ACnS1-mmr^d-T^wM4i7IzYfkT|oI_qSpx1<+{_T51*Tc>0KBWb&b?0*E8~jI?|gPFjQJyMxLJO|Ba+hT3jUJa0`Ve zMk_c8RR6c)2{ssBKuDsO7a=7jJ1O}vwc%q|ozFD|%pqyLIjI!aQRN_)$hMc_bncOj zR4nCR-r(Ctok$Qe19k_jYN&ywXa+ZgM;Z9~j0uea_4(Q6t076leJOdv)dt9=TtZTQ z&CRlw;hg!wMJk-#mGgX*$uud9U=NMWsgS35)3642W%Aq^1;1dOQYL`druHevqZ_Ep!ZR-T4GdeusTq9+|2Pr_ih3 zSCiBXkNXZXXvkOs=jptTnzXW)^|1~^>VAsVA9csj6zg@%W1^Gm#mdfSHnM01*ylag z8$K(n@$Fb=jf-0~w=^+R{xnJI)|_zJq5)Att71m9VQSx4#f6~! z_~64AV4vqYS@k~D#axi#A+n0k6wLSSFd$km@O)|XG?|~hux2&hkou5-x3sje`Y~Vk zsbuNor=7|??BamQ%Ym$d-AUEc2y*Qse);wU;>*qxxH4VB{CGosc+0xSo&}mdA0rj= z3pZ(;uSa&JH^+`=%*?nc_!Z47O>i(8!FS^7Ff%v>?pty0;&95K!f2kM{cdVt<)S5G zyw2kYYi8*^pSLg*%*Vw_VS2J=em#wM3zo8^s>tm6X6A1nCi;X79}zeeS{0u!1yQ8> za?_)mtEEc?Dj!SpizG3H>(HLfe;=2YZ!D zNYV0}ET_S(I#H+>Wc4gd!iYOJazN((Lhob>DR40si1~);O937~l^G{-ggdTFab6|o zHCo=rP~OiO``Q` zAeAsao@I=cIluv)0Yt?A9`%K-myr;hfW=(8>~TTIF6AtK$T{MeK(wt;#{zG7P$Hv){jjjn zp7?(6yTkRp(#cHW?eNA&4D@hd^KrjIk5L^~tedB?eG?5-a?*?}TAmq-by z`+@%F$~ePii_<>1-=_wL{M{ZC#s>m!-7qK$e%WE*?#Fp}D~^av;C-}R52I&}57;f* z8DvljvDjV?rxB^@hiH7@Jm9H2>vTNcfONn$6Sg$ zz2;yaOE<`x{9))o9R;gh-055R6Py_E`RQG>cg?XNt&bsud7@@}!C}$uXGP86I0QXubJ?{+-+!khY#mU_G2)Me`XwN<7{zoYh z243umOamh%M;M>n5;ojrD9ZDTEi+3;Yb_q;fS8{sZ`8+HS{DsRCGpQtwcv*Q*WK>8 zD5@4EIJ;v%e{0EL45vk-ZqEXKi7Ii#@iS8sZeZRK60qJMA44FLYuyg}bOACr9P_?v z5xJ=ymILBv3b6dSRxgF2d9@0ASH}LacJf#*Tci%x<#X*4TBg>2=Te=>h;ydqS}t82 zrH3)$nd3qxF;ScSc%l9G}D48}mp_m40mrK)Gd6T00^BC<7>*4~N0 zwO8RE^rSMy(qUA^XQ}t?DDXWjiKv(i(3=0*IxL3enh+5YVW7^nh!|&zmlI_IuPqMXV?FY+fgPb(( zkvSMm~l5b*w10kP9vx`HF7y(Z#WM8 zl-Krgb|WPah$YSn?xWGL;A{4RNZySE7OS5>?~(7b*najMoAx{rcZz%F`&^;hVpTky z`*w{9rEP;?-UdHpZr)c|?4JG&eV*lQwg3w}`9c8Bh%2UX72wFMDPszqII|8dGs@(_ zOH;+Zf7jhWzH(eCjxcYC4tD5I2`sP~7N;ZHr{cOKz+l+cy98JP3e7?m%-@Sip6U-y zGjwM=!8lYg>*((maftSw<(vk{LzHbOh)Y+={W;XYc~4(oUjsgn)r6~hUxPo<>@;rp zH>m|^QpC$Fs(D@{ShtQ5GV5)q5386rd~zHNLtHN=#uJi5%Pm1rFfbR|%Cc~dsTxSs z1g@9;v66PL{Cnek`Nm(cpdc?xAN;Rpwb6GDtp?2@Wj~2j(u!ivfH+U!`kO+YUN2O> zH`4Mqq1M{yv9v3jLI0|~2ysW#PvqegL0=&%j+7Rlk70$ZvuLM;mrP zri4rhzVC#gT?y?<$iYGm7K)W?p;!sQp8r4u>)2(E`m+}R1eZc+7J@(!1cD$C1c4w3 z1VJE(`GH70h{O{Vg7{d7kAqxu^p(h+#4Sv%(;5E9cR!~?tr;Rp{_yPQ;TtIgP)4zfu$R1g^LUbs&0!Of5!F=8n zh?LHNRoT4Gla1cA&5nGxEJ;5s4DZiJlbf4Wl*6|9gk-e~do Tc^VM#1@w;@{FbhB@!Ed@0ynes literal 0 HcmV?d00001 diff --git a/docs/vite_vanilla_ts/vite_vanilla_ts.md b/docs/vite_vanilla_ts/vite_vanilla_ts.md new file mode 100644 index 0000000..e98b35e --- /dev/null +++ b/docs/vite_vanilla_ts/vite_vanilla_ts.md @@ -0,0 +1,200 @@ +--- +sidebar_position: 1 +--- +# 如何使用html+ts编写前端todo list + +## 先决条件 +1. 已创建vanilla ts工程 + +>**提示** +若未安装vanilla ts工程,可以参考[vite的入门](http://localhost:3000/full-stack-tutorial/docs/vite)文档 + +## 项目初始化 +打开vanilla ts工程 + +## 编写HTML结构 +在`index.html`中,通过以下代码,编写todo list的样式和基本结构 +``` + + + + + + + Document + + + + +
+ + + +
    +
  • + + 吃饭 + + +
  • +
  • + + 睡觉 + + +
  • +
  • + + 打豆豆 + + +
  • +
+
+ 还有1个未完成 +
+ 筛选: + + + +
+ +
+ +
+ + + + +``` +## 编写TypeScript逻辑 +在`main.ts`中,编写以下代码,实现todo list的功能 +``` +//定义接口TodoItem +interface TodoItem { + name: string; + completed: boolean; +} + +//初始化数组 +let list: TodoItem[] = [ + { name: '吃饭', completed: false }, + { name: '睡觉', completed: true }, + { name: '打豆豆', completed: true }, +]; + +//监听在输入框中按下回车键的事件 +document.querySelector('.input-todo')!.addEventListener('keyup', function (e: Event) { + const event = e as KeyboardEvent; + const target = event.target as HTMLInputElement; + if (!target.value?.trim()) { + return; + } + if (event.key === 'Enter') { + const name = target.value; + const item: TodoItem = { name, completed: false }; + list.push(item); + render(list); + target.value = ''; + } +}); + +//实现筛选功能 +document.querySelectorAll('.filter-btn').forEach((el) => { + el.addEventListener('click', filterCompletedStatus); +}); + +function filterCompletedStatus(e: Event) { + const target = e.target as HTMLElement; + const completed = target.dataset.complete; + + if (completed === 'all') { + render(list); + return; + } + + const newList = list.filter((item) => item.completed === (completed === 'true')); + renderTodoList(newList); +} + +document.querySelector('.btn-clear')!.addEventListener('click', () => { + list = []; + render(list); +}); + +//切换completed的状态 +function onClickCompleteBtn(index: number) { + list[index].completed = !list[index].completed; + render(list); +} + +//渲染数组 +function render(list: TodoItem[]) { + UpdateActiveNum(); + renderTodoList(list); +} + +//统计筛选中未完成功能数量 +function UpdateActiveNum() { + const completedNum = list.filter((item) => !item.completed).length; + document.querySelector('.active-num')!.innerHTML = completedNum.toString(); +} + +//实现删除功能 +function deleteItem(index: number) { + list.splice(index, 1); + render(list); +} + +//渲染html +function renderTodoList(list: TodoItem[]) { + let html = ''; + list.forEach((item, index) => { + const itemClass = item.completed ? 'item-complete todo-item' : 'todo-item'; + const spanClass = item.completed ? 'icon-complete icon-complete-active' : 'icon-complete'; + html += `
  • + + ${item.name} + + +
  • `; + }); + document.querySelector('.todo-list')!.innerHTML = html; +} +``` +## 运行项目 +按下快捷键`Ctrl + ~`,打开终端,输入以下命令,运行项目 +``` +npm run dev +``` +![运行效果](./result.png) \ No newline at end of file