\u7f51\u9875\u5e03\u5c40\u57fa\u7840\u73ed\u9636\u6bb5\u4e00
\n\u8bfe\u65f6:10\u5929 \u6280\u672f\u70b9:68\u9879 \u6d4b\u9a8c:1\u6b21 \u5b66\u4e60\u65b9\u5f0f:\u65b0\u578b\u9762\u6388<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n\u501f\u52a9PxCook\u5de5\u5177\uff0c\u53c2\u7167\u8bbe\u8ba1\u7a3f\uff0c\u80fd\u7efc\u5408\u4f7f\u7528HTML+CSS\u6280\u672f\u5b8c\u6210\u4f01\u4e1a\u7ea7\u5c0f\u5154\u9c9c\u513f\u7535\u5546\u9879\u76eePC\u7aef\u9996\u9875\u5f00\u53d1\u3002<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. HTMLHTML \u8d1f\u8d23\u7f51\u9875\u7684\u7ed3\u6784\u5c42\uff0c\u662f\u7f51\u9875\u5f00\u53d1\u7684\u57fa\u7840\uff0c\u4ece\u6700\u7b80\u5355\u7684\u7f51\u9875\u9aa8\u67b6\u642d\u5efa\u5165\u624b\uff0c\u4f7f\u7528\u5e38\u89c1\u7684 HTML \u6807\u7b7e\u4e30\u5bcc\u7f51\u9875\u7ed3\u6784\u3002<\/p>\n
HTML\u57fa\u7840\u8bed\u6cd5|\u6392\u7248\u6807\u7b7e|\u8def\u5f84|\u591a\u5a92\u4f53\u6807\u7b7e|\u94fe\u63a5\u6807\u7b7e|\u5217\u8868\u6807\u7b7e|\u8868\u683c\u6807\u7b7e|\u8868\u5355\u6807\u7b7e|\u5e03\u5c40\u6807\u7b7e|\u8bed\u4e49\u5316\u6807\u7b7e|\u5b57\u7b26\u5b9e\u4f53<\/p>\n
2. CSS\u5728 HTML \u642d\u5efa\u7684\u7f51\u9875\u7ed3\u6784\u57fa\u7840\u4e0a\uff0c\u901a\u8fc7 CSS \u9009\u62e9\u5668 \u7cbe\u51c6\u9009\u62e9\u6807\u7b7e\uff0c\u4f7f\u7528\u5916\u89c2\u3001\u76d2\u6a21\u578b\u76f8\u5173\u5c5e\u6027\u5b8c\u6210\u7f51\u9875\u5168\u90e8\u5185\u5bb9\uff0c\u5b66\u4e60\u4f20\u7edf\u6d6e\u52a8\u3001\u5b9a\u4f4d\u7b49\u5b8c\u6210\u7f51\u9875\u5e03\u5c40\uff0c\u4fa7\u91cd\u4f7f\u7528 Flex \u5e03\u5c40\u6280\u5de7\u7cbe\u51c6\u63a7\u5236\u7f51\u9875\u5e03\u5c40\uff0c\u6700\u7ec8\u7ed3\u5408\u80cc\u666f\u3001\u5706\u89d2\u3001\u9634\u5f71\u7b49\u88c5\u9970\u5c5e\u6027\u8fdb\u4e00\u6b65\u7f8e\u5316\u7f51\u9875\u6548\u679c\uff0c\u8fbe\u5230\u80fd\u591f\u7f16\u5199\u4f01\u4e1a\u7ea7\u5927\u578b\u7efc\u5408\u7f51\u9875\u3002<\/p>\n
\u9009\u62e9\u5668|\u5916\u89c2|\u6587\u5b57|\u80cc\u666f|\u6807\u51c6\u6d41|\u4e09\u5927\u7279\u6027|\u76d2\u6a21\u578b|\u4f2a\u5143\u7d20|\u6d6e\u52a8|\u4f2a\u7c7b|\u5b9a\u4f4d|\u5706\u89d2|\u9634\u5f71|\u900f\u660e|\u8fc7\u6e21|flex \u5e03\u5c40<\/p>\n
3. \u4f01\u4e1a\u7ea7\u5c0f\u5154\u9c9c\u513f\u7535\u5546\u9879\u76ee\u9996\u9875\u5236\u4f5c\u501f\u52a9PxCook\u5de5\u5177\uff0c\u57fa\u4e8e\u8bbe\u8ba1\u7a3f\u7f16\u5199\u7f51\u9875\uff0c\u786e\u4fdd\u7f51\u9875\u7684\u9ad8\u5ea6\u8fd8\u539f\uff0c\u901a\u8fc7\u7efc\u5408\u8fd0\u7528 HTML + CSS \u6280\u672f\uff0c\u6309\u7167\u5b9e\u9645\u9879\u76ee\u5f00\u53d1\u6d41\u7a0b\uff0c\u5f52\u7eb3\u5f00\u53d1\u6280\u5de7\uff0c\u63d0\u5347\u7efc\u5408\u5b9e\u6218\u6c34\u5e73\uff0c\u6700\u7ec8\u5b8c\u6210\u4f01\u4e1a\u7ea7\u5c0f\u5154\u9c9c\u513f\u7535\u5546\u9879\u76eePC\u7aef\u9996\u9875\u5f00\u53d1\u3002<\/p>\n
\u7cbe\u7075\u56fe|\u6587\u6863\u7f16\u7801|\u6027\u80fd\u4f18\u5316|\u5e03\u5c40\u6280\u5de7|SEO|\u6027\u80fd\u4f18\u5316|\u7248\u5fc3|\u8bbe\u8ba1\u7a3f|PxCook<\/p>\n
\u79fb\u52a8Web\u9ad8\u624b\u73ed\u9636\u6bb5\u4e00
\n\u8bfe\u65f6:5\u5929 \u6280\u672f\u70b9:18\u9879 \u6d4b\u9a8c:1\u6b21 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n1. \u4f7f\u7528CSS\u9ad8\u7ea7\u7279\u6548\uff0c\u4e30\u5bcc\u7f51\u9875\u5143\u7d20\u7684\u5448\u73b0\u65b9\u5f0f\u548c\u6548\u679c| 2. \u4f7f\u7528rem\u6216vw|vh\u5b9e\u73b0\u7f51\u9875\u5143\u7d20\u5bbd\u9ad8\u968f\u7740\u89c6\u53e3\u53d8\u5316\u7b49\u6bd4\u7f29\u653e\u7684\u6548\u679c| 3. \u4f7f\u7528bootstrap\u6846\u67b6\u5e03\u5c40\u54cd\u5e94\u5f0f\u7f51\u9875<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. CSS\u9ad8\u7ea7\u7279\u6548\u4f7f\u7528css\u9ad8\u7ea7\u7279\u6548\u4e30\u5bcc\u7f51\u9875\u5143\u7d20\u7684\u5448\u73b0\u65b9\u5f0f\u548c\u6548\u679c\u3002<\/p>\n
\u5b57\u4f53\u56fe\u6807|2D\u8f6c\u6362|3D\u8f6c\u6362|\u52a8\u753b<\/p>\n
2. \u79fb\u52a8\u9002\u914d\u9996\u5148\u4ecb\u7ecdFlex\u5e03\u5c40\u6a21\u578b,\u5b9e\u73b0\u79fb\u52a8\u7aef\u7f51\u9875\u7684\u57fa\u672c\u5e03\u5c40;\u518d\u8bb2\u89e3\u4e24\u79cd\u79fb\u52a8\u7aef\u7f51\u9875\u9002\u914d\u4e0d\u540c\u5206\u8fa8\u7387\u7684\u89e3\u51b3\u65b9\u6848,\u5e76\u4f7f\u7528\u4e0d\u540c\u7684\u89e3\u51b3\u65b9\u6848\u5236\u4f5c\u7f51\u9875\u5143\u7d20\u5bbd\u9ad8\u968f\u7740\u89c6\u53e3\u7684\u53d8\u5316\u800c\u7b49\u6bd4\u7f29\u653e\u7684\u6548\u679c\u3002<\/p>\n
rem|vw\/vh|Less\u57fa\u7840\u8bed\u6cd5|\u89c6\u53e3|\u5206\u8fa8\u7387|\u4e8c\u500d\u56fe|\u79fb\u52a8\u9002\u914d|\u5a92\u4f53\u67e5\u8be2<\/p>\n
3. \u54cd\u5e94\u5f0f\u5b66\u4e60\u54cd\u5e94\u5f0f\u7684\u539f\u7406,\u5e76\u4f7f\u7528bootstrap\u6846\u67b6\u5b8c\u6210\u54cd\u5e94\u5f0f\u7f51\u9875\u7684\u5e03\u5c40\u3002<\/p>\n
\u5a92\u4f53\u67e5\u8be2|bootstrap\u6846\u67b6|\u6805\u683c\u7cfb\u7edf|\u7ec4\u4ef6|\u54cd\u5e94\u5f0f\u7f51\u9875\u5e03\u5c40<\/p>\n
JavaScript\u9ad8\u624b\u73ed\u9636\u6bb5\u4e8c
\n\u8bfe\u65f6:23\u5929 \u6280\u672f\u70b9:98\u9879 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n1. \u638c\u63e1 JavaScript \u6838\u5fc3\u8bed\u6cd5\uff0c\u57f9\u517b\u7f16\u7a0b\u903b\u8f91\u601d\u7ef4| 2. \u638c\u63e1 DOM \u548c BOM \u5bf9\u8c61\u7684\u5e38\u7528\u5c5e\u6027\u548c\u65b9\u6cd5\uff0c\u80fd\u591f\u5b8c\u6210\u7f51\u9875\u5e38\u89c1\u7684\u4ea4\u4e92\u6548\u679c| 3. \u638c\u63e1 JavaScript \u5e95\u5c42\u5de5\u4f5c\u673a\u5236\u548c ES6+ \u9ad8\u7ea7\u7279\u6027\uff0c\u80fd\u591f\u9ad8\u6548\u5b9e\u73b0\u4e1a\u52a1\u903b\u8f91| 4. \u80fd\u591f\u4f7f\u7528 axios \u5b9e\u73b0 Ajax \u64cd\u4f5c\uff0c\u4e3a\u540e\u7eed\u9879\u76ee\u8bfe\u505a\u597d\u6280\u672f\u94fa\u57ab| 5. \u80fd\u591f\u8fd0\u7528 Git \u7ba1\u7406\u524d\u7aef\u9879\u76ee\uff0c\u5e76\u4e14\u4f7f\u7528 Git \u5206\u652f\u8fdb\u884c\u591a\u4eba\u534f\u540c\u5f00\u53d1| 6. \u80fd\u591f\u4f7f\u7528 Promise \u4e0e async\/await \u9ad8\u6548\u7684\u5b9e\u73b0\u5f02\u6b65\u64cd\u4f5c<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. JavaScript\u6838\u5fc3\u5b66\u4e60JavaScript\u57fa\u7840\u8bed\u6cd5\u89c4\u5219\u3002<\/p>\n
\u53d8\u91cf|\u57fa\u672c\u6570\u636e\u7c7b\u578b|\u6570\u636e\u7c7b\u578b\u7684\u8f6c\u6362|\u8fd0\u7b97\u7b26|if\u5206\u652f|switch\u5206\u652f|\u4e09\u5143\u8868\u8fbe\u5f0f|while\u5faa\u73af|for\u5faa\u73af|\u6570\u7ec4|\u51fd\u6570|\u5bf9\u8c61|\u5185\u7f6e\u5bf9\u8c61|let|const|\u5b57\u9762\u91cf<\/p>\n
2. WebAPI\u5b66\u4e60DOM\u548cBOM\u5bf9\u8c61\u7684\u5c5e\u6027\u548c\u65b9\u6cd5,\u4ee5\u5b8c\u6210\u7f51\u9875\u5e38\u89c1\u7684\u4ea4\u4e92\u6548\u679c\u3002<\/p>\n
DOM\u6811|DOM\u5bf9\u8c61|\u83b7\u53d6\u5143\u7d20|innerHTML|style|className|classList|\u95f4\u6b47\u51fd\u6570|\u5ef6\u8fdf\u51fd\u6570|\u4e8b\u4ef6\u76d1\u542c|\u9f20\u6807\u4e8b\u4ef6|\u952e\u76d8\u4e8b\u4ef6|\u9ad8\u9636\u51fd\u6570|\u73af\u5883\u5bf9\u8c61|\u8282\u70b9\u64cd\u4f5c|\u4e8b\u4ef6\u6d41|\u4e8b\u4ef6\u59d4\u6258|\u5143\u7d20\u4f4d\u7f6e|BOM|window\u5bf9\u8c61|swiper\u63d2\u4ef6|\u672c\u5730\u5b58\u50a8|\u81ea\u5b9a\u4e49\u5c5e\u6027|\u6b63\u5219\u8868\u8fbe\u5f0f<\/p>\n
3. JavaScript\u9ad8\u7ea7\u6df1\u5165\u7406\u89e3 ECMAScript \u7684\u77e5\u8bc6\u4f53\u7cfb\u53ca\u5de5\u4f5c\u673a\u5236\uff0c\u719f\u6089 ES6+ \u65b0\u7684\u8bed\u6cd5\u7279\u6027\uff0c\u6ce8\u91cd\u62bd\u8c61\u601d\u7ef4\u7684\u57f9\u517b\uff0c\u5177\u5907\u9762\u5411\u5bf9\u8c61\u7f16\u7a0b\u7684\u7684\u80fd\u529b\u3002<\/p>\n
\u6784\u9020\u51fd\u6570|\u5355\u4f53\u5bf9\u8c61|\u9762\u5411\u5bf9\u8c61|\u539f\u578b |\u89e3\u6784|\u5269\u4f59|\u5c55\u5f00|\u7bad\u5934\u51fd\u6570|Object|Array |\u4e25\u683c\u6a21\u5f0f|\u95ed\u5305|\u7ee7\u627f|\u9632\u6296|\u8282\u6d41|\u5f02\u5e38\u5904\u7406|\u6df1\u6d45\u62f7\u8d1d<\/p>\n
4. Ajax\u5229\u7528 axios \u53d1\u8d77 Ajax \u8bf7\u6c42\uff0c\u5b9e\u73b0\u524d\u540e\u7aef\u7684\u6570\u636e\u4ea4\u4e92\u3002\u5e76\u8bb2\u89e3 HTTP \u8bf7\u6c42\u7684\u8fc7\u7a0b\u4ee5\u53ca Ajax \u7684\u5e95\u5c42\u539f\u7406\u3002\u6df1\u5165\u5b66\u4e60 JS \u5f02\u6b65\u7684\u5e95\u5c42\u539f\u7406\uff0c\u80fd\u591f\u4f7f\u7528 Promise \u5904\u7406\u5f02\u6b65\u64cd\u4f5c\uff0c\u5e76\u4f7f\u7528 async\/await \u7b80\u5316\u5f02\u6b65\u64cd\u4f5c\u3002<\/p>\n
\u5ba2\u6237\u7aef\u4e0e\u670d\u52a1\u5668|axios|\u8bf7\u6c42\u4e0e\u54cd\u5e94\u62a5\u6587|\u63a5\u53e3|form \u8868\u5355|\u62e6\u622a\u5668|FormData|\u6587\u4ef6\u4e0a\u4f20|XMLHttpRequest|Promise|async\/await|EventLoop|\u5b8f\u4efb\u52a1|\u5fae\u4efb\u52a1<\/p>\n
5. Git\u80fd\u591f\u521b\u5efa Git \u4ed3\u5e93\u7ba1\u7406\u524d\u7aef\u9879\u76ee\uff0c\u57fa\u4e8e Git \u5206\u652f\u8fdb\u884c\u591a\u4eba\u534f\u540c\u5f00\u53d1\uff0c\u5e76\u4e14\u80fd\u591f\u628a\u672c\u5730\u7684 Git \u4ed3\u5e93\u540c\u6b65\u5230\u8fdc\u7a0b\u7801\u4e91\u6216 Github \u4ed3\u5e93\u4e2d\u3002<\/p>\n
\u5b89\u88c5\u548c\u914d\u7f6e Git|Git \u672c\u5730\u64cd\u4f5c\u7684\u5e38\u7528\u547d\u4ee4|.gitignore \u5ffd\u7565\u6587\u4ef6|Git \u5206\u652f\u4e0e\u5e38\u7528\u547d\u4ee4|\u8fdc\u7a0b\u4ed3\u5e93\u7684\u4f7f\u7528<\/p>\n
\u6570\u636e\u53ef\u89c6\u5316\u770b\u677f\u9879\u76ee\u9ad8\u624b\u73ed\u9636\u6bb5\u4e09
\n\u8bfe\u65f6:3\u5929\u6280\u672f\u70b9:8\u9879\u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n1. \u638c\u63e1Echarts \u5404\u7c7b\u578b\u6570\u636e\u53ef\u89c6\u5316\u56fe\u8868\u7684\u5e94\u7528| 2. \u80fd\u591f\u6839\u636e\u9700\u8981\u6c42\u521b\u5efa\u6298\u7ebf\u56fe|K\u7ebf\u56fe|\u5730\u56fe\u7b49\u56fe\u8868| 3. \u638c\u63e1\u524d\u540e\u7aef\u5206\u79bb\u6280\u672f\u7684\u5b9e\u73b0\u65b9\u5f0f\u5e76\u4e86\u89e3\u5176\u610f\u4e49| 4. \u638c\u63e1\u4f7f\u7528token\u8fdb\u884c\u8bbf\u95ee\u9274\u6743\u529f\u80fd\u5b9e\u73b0<\/p>\n
\u6570\u636e\u770b\u677f\u662f\u4e00\u4e2a\u6570\u636e\u53ef\u89c6\u5316\u9879\u76ee\uff0c\u901a\u8fc7\u6298\u7ebf\u56fe|K\u7ebf\u56fe|\u67f1\u72b6\u56fe\u7b49\u56fe\u8868\u5f62\u5f0f\u5f52\u7eb3\u6c47\u603b\u5927\u91cf\u6570\u636e\uff0c\u4ee5\u5b9e\u73b0\u66f4\u52a0\u76f4\u89c2\u7684\u6570\u636e\u8868\u8fbe\u6548\u679c\u3002\u5b66\u5458\u901a\u8fc7\u5b66\u4e60\u8be5\u9879\u76ee\uff0c\u80fd\u591f\u638c\u63e1\u6570\u636e\u53ef\u89c6\u5316|\u5f02\u6b65\u7f16\u7a0b|\u5b9e\u65f6\u6570\u636e\u83b7\u53d6\u7b49\u6280\u672f\u89e3\u51b3\u65b9\u6848\uff0c\u9002\u5408\u6709\u57fa\u7840\u5e0c\u671b\u6280\u80fd\u5f3a\u5316\u7684IT\u4eba\u5458\u7ee7\u7eed\u5b66\u4e60\u3002<\/p>\n
\u4e3b\u8bb2\u89e3\u51b3\u65b9\u6848
\n1. \u57fa\u4e8e bootstrap \u7684\u54cd\u5e94\u5f0f\u9875\u9762\u5e03\u5c40\u65b9\u6848| 2. \u57fa\u4e8e echarts \u7684\u6570\u636e\u53ef\u89c6\u5316\u89e3\u51b3\u65b9\u6848| 3. \u57fa\u4e8e token \u7684\u8bbf\u95ee\u6743\u9650\u63a7\u5236\u89e3\u51b3\u65b9\u6848<\/p>\n
\u4e3b\u8bb2\u77e5\u8bc6\u70b9
\n1.\u57fa\u4e8eaxios \u5b9e\u73b0\u7f51\u7ad9\u6ce8\u518c\u548c\u767b\u5f55\u529f\u80fd| 2.\u57fa\u4e8e Echarts \u7ed3\u5408\u9700\u6c42\u9ad8\u5ea6\u81ea\u5b9a\u4e49\u4e0d\u540c\u7c7b\u578b\u7684\u53ef\u89c6\u5316\u56fe\u8868| 3.Ajax|\u6570\u636e\u6e32\u67d3\u548c\u670d\u52a1\u7aef\u63a8\u9001\u524d\u540e\u7aef\u5206\u79bb\u6280\u672f\u7684\u5e94\u7528| 4.\u57fa\u4e8e token \u7684\u8bbf\u95ee\u6743\u9650\u63a7\u5236\u529f\u80fd<\/p>\n
Vue.js\u9ad8\u624b\u73ed\u9636\u6bb5\u56db
\n\u8bfe\u65f6:41\u5929 \u6280\u672f\u70b9:270\u9879 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n1. \u901a\u8fc7 Vue2 \u548c Vue3 \u7684\u6838\u5fc3\u77e5\u8bc6\u5b66\u4e60\uff0c\u638c\u63e1\u4f01\u4e1a\u5f00\u53d1\u4e2d\u5e38\u89c1\u4e1a\u52a1\u529f\u80fd\u5b9e\u73b0| 2. \u901a\u8fc7\u6df1\u5165 Vue \u6280\u672f\u6808\u5b66\u4e60 vue-router vuex vant element-ui \u7b49\u4e3b\u6d41\u6280\u672f\uff0c\u638c\u63e1\u4f01\u4e1a\u7ea7\u9879\u76ee\u5f00\u53d1\u65b9\u5f0f\uff0c\u5982\u79fb\u52a8\u7aefH5\u9879\u76ee\u4e0ePC\u7aef\u7ba1\u7406\u9879\u76ee| 3. \u901a\u8fc7 Vue3 \u7ed3\u5408 TypeScript \u7684\u6280\u672f\u5b66\u4e60\uff0c\u4ee5\u53ca Vue3 \u6280\u672f\u6808 pinia \u7684\u5b66\u4e60\uff0c\u638c\u63e1\u5927\u578b\u4f01\u4e1a\u7ea7\u9879\u76ee\u5f00\u53d1\u6280\u5de7| 4. \u638c\u63e1 qiankun \u5fae\u524d\u7aef\u6280\u672f\uff0c\u5177\u5907\u91cd\u6784\u5de8\u77f3\u5e94\u7528\u7684\u80fd\u529b\uff0c\u5b9e\u73b0\u6280\u672f\u6808\u65e0\u5173\u5f00\u53d1\u65b9\u5f0f<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. \u6846\u67b6\u524d\u7f6e\u8bfe\u638c\u63e1\u6a21\u5757\u5316\u601d\u60f3\uff0cnpm\u5305\u7ba1\u7406\uff0cwebpack\u57fa\u7840\uff0c\u521d\u63a2\u5de5\u7a0b\u5316\u5f00\u53d1\u3002<\/p>\n
Node.js\u5b89\u88c5|fs\u6a21\u5757|path\u6a21\u5757|http\u6a21\u5757|npm|\u5305\u914d\u7f6e\u6587\u4ef6|npm\u5e38\u7528\u547d\u4ee4|\u6a21\u5757\u5316\u6982\u5ff5|CommonJS|ES6Module|\u5de5\u7a0b\u5316\u5f00\u53d1\u6982\u5ff5|webpack\u57fa\u7840\u914d\u7f6e|dev-server|webpack\u63d2\u4ef6|\u5e38\u7528loader|babel<\/p>\n
2. Vue2.x \u6838\u5fc3\u8fd0\u7528Vue2.0\u5168\u5bb6\u6876\u6838\u5fc3\u5185\u5bb9\u5b9e\u73b0\u5f00\u53d1\u4e2d\u5e38\u89c1\u7684\u529f\u80fd\uff0c\u5982\u8d2d\u7269\u8f66\uff0c\u7ecf\u5178\u5217\u8868\u3001TodoMVC\u7b49\u3002\u8fd0\u7528 Vant \u5f00\u53d1\u79fb\u52a8\u7aef\uff0c\u8fd0\u7528element-ui\u5f00\u53d1PC\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf\u3002<\/p>\n
MVVM|SPA|Vue \u8c03\u8bd5\u5de5\u5177|\u865a\u62dfDOM|diff\u7b97\u6cd5|\u6307\u4ee4\u7cfb\u7edf|v-model\u539f\u7406|\u6570\u636e\u9009\u9879|\u751f\u547d\u5468\u671f |\u6837\u5f0f\u7a7f\u900f|\u52a8\u6001\u6837\u5f0f|\u63d2\u69fd|\u7ec4\u4ef6\u7cfb\u7edf|\u7ec4\u4ef6\u901a\u4fe1|\u81ea\u5b9a\u4e49\u6307\u4ee4|ref|\u52a8\u6001\u7ec4\u4ef6|$nextTick|\u81ea\u5b9a\u4e49\u4e8b\u4ef6|\u8ba1\u7b97\u5c5e\u6027|\u4fa6\u542c\u5668|\u7ec4\u4ef6\u5e93|\u7ec4\u4ef6\u5c01\u88c5 |keep-alive|\u8def\u7531\u7cfb\u7edf|\u5bfc\u822a\u5b88\u536b|vue-cli |vuex|vant|element-ui|\u8def\u7531\u61d2\u52a0\u8f7d<\/p>\n
3. Vue3.x \u6838\u5fc3\u638c\u63e1 Vue3 \u65b0\u7279\u6027\u3001Vite \u65b0\u4e00\u4ee3\u6784\u5efa\u5de5\u5177\u3001\u7ec4\u5408\u5f0f API\u3001Pinia \u7b49\u3002<\/p>\n
Vite|\u539f\u751fESM|\u9009\u9879API|\u7ec4\u5408API|setup|\u751f\u547d\u5468\u671f|ref |reactive |toRef | toRefs| computed| watch| watchEffect|\u7ec4\u4ef6\u901a\u4fe1|\u4f9d\u8d56\u6ce8\u5165|ref \u8fb9\u754c|Pinia<\/p>\n
4. \u5fae\u524d\u7aef\u638c\u63e1 qiankun \u5fae\u524d\u7aef\u5e93\uff0c\u91cd\u6784\u5de8\u77f3\u5e94\u7528\u3001\u505a\u5230\u4e0e\u6280\u672f\u65e0\u5173\u3002<\/p>\n
qiankunJS|\u5b9e\u73b0 JS \u6c99\u7bb1|\u6837\u5f0f\u9694\u79bb|\u8d44\u6e90\u9884\u52a0\u8f7d|\u5e94\u7528\u95f4\u901a\u4fe1|\u5171\u7528\u7ec4\u4ef6\u62bd\u79bb<\/p>\n
5. TypeScript\u638c\u63e1TypeScript\u57fa\u7840\u8bed\u6cd5\uff0c\u4e14\u5728Vue3\u9879\u76ee\u4e2d\u719f\u7ec3\u8fd0\u7528TypeScript\u3002<\/p>\n
\u57fa\u7840\u7c7b\u578b|\u8054\u5408\u7c7b\u578b|\u5b57\u9762\u91cf\u7c7b\u578b|\u7c7b\u578b\u63a8\u65ad|\u7c7b\u578b\u65ad\u8a00|\u6cdb\u578b|\u679a\u4e3e|\u5185\u7f6e\u7c7b\u578b|\u7c7b\u578b\u7ea6\u675f|\u7c7b\u578b\u7f16\u7a0b|\u7c7b\u578b\u58f0\u660e|composition-api+TS|axios+TS|\u5934\u6761\u6848\u4f8b<\/p>\n
6. Vue \u539f\u7406\u638c\u63e1 Vue \u5e95\u5c42\u539f\u7406<\/p>\n
\u54cd\u5e94\u5f0f\u6570\u636e\u539f\u7406Vue2&Vue3|\u865a\u62dfDOM|diff\u7b97\u6cd5|AST\u62bd\u8c61\u8bed\u6cd5\u6811|Vue\u54cd\u5e94\u5f0f\u7cfb\u7edf|reactive \u539f\u7406|effect \u539f\u7406|ref \u539f\u7406|computed \u539f\u7406\u7b49|JSX \u4e0e template<\/p>\n
Vue2\u9879\u76ee\u9ad8\u624b\u73ed\u9636\u6bb5\u4e94
\n\u8bfe\u65f6:5\u5929\u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u9762\u7ecf\u5168\u7aef\u9879\u76ee \u6781\u5ba2\u56edH5\u9879\u76ee<\/p>\n
\u9879\u76ee\u7b80\u4ecb\u6280\u672f\u70b9:35\u9879
\n\u9762\u7ecf\u7cfb\u7edf\uff0c\u7531\u9762\u8bd5\u7ecf\u9a8c\u6587\u7ae0PC\u7ba1\u7406\u540e\u53f0\uff0c\u4e2a\u4ebaH5\u7aef\u9762\u8bd5\u6587\u7ae0\u6d4f\u89c8\u7ec4\u6210\u3002\u5b66\u5458\u5b66\u4e60\u8be5\u9879\u76ee\uff0c\u80fd\u591f\u953b\u70bc\u5bf9 Vue \u5b8c\u6574\u6280\u672f\u6808\u7684\u8fd0\u7528\u3002\u540c\u65f6\u8be5\u9879\u76ee\u8fd8\u6db5\u76d6\u4e86 token \u8eab\u4efd\u8ba4\u8bc1\u3001Vue \u7ec4\u4ef6\u5e93\u3001\u6587\u4ef6\u4e0a\u4f20\u3001\u5bcc\u6587\u672c\u7f16\u8f91\u5668\u7b49\u524d\u7aef\u6280\u672f\u89e3\u51b3\u65b9\u6848\uff0c\u79fb\u52a8\u7aef\u5f00\u53d1\uff0c\u9002\u5408\u521a\u5165\u624b Vue \u6846\u67b6\u3001\u5e0c\u671b\u901a\u8fc7\u9879\u76ee\u5f00\u53d1\u6765\u5de9\u56fa Vue \u57fa\u7840\u7684\u524d\u7aef\u5f00\u53d1\u8005\u5b66\u4e60\u3002<\/p>\n
\u8fdb\u5165\u9879\u76ee\u4f53\u9a8c\u5b66\u4e60\u76ee\u6807
\n1.\u638c\u63e1 element-ui \u7ec4\u4ef6\u5e93\u7684\u8fd0\u7528| 2.\u638c\u63e1 axios \u4ee5\u53ca\u62e6\u622a\u5668\u7684\u5e94\u7528| 3.\u638c\u63e1 Vuex \u7ba1\u7406\u5168\u5c40\u72b6\u6001\u7684\u6280\u672f\u89e3\u51b3\u65b9\u6848| 4.\u719f\u7ec3\u4f7f\u7528 vue-router \u7ba1\u7406\u7ec4\u4ef6\u7684\u5207\u6362\u5c55\u793a| 5.\u638c\u63e1 element-ui \u4e2d\u5982\u4f55\u81ea\u5b9a\u4e49\u8868\u5355\u7684\u6821\u9a8c\u89c4\u5219| 6.\u638c\u63e1\u6587\u4ef6\u4e0a\u4f20\u548c\u5bcc\u6587\u672c\u7f16\u8f91\u5668\u5728 Vue \u9879\u76ee\u4e2d\u7684\u5e94\u7528| 7.\u638c\u63e1 Vant \u7ec4\u4ef6\u5e93\u7684\u8fd0\u7528| 8.\u638c\u63e1\u4f7f\u7528 postcss-px-to-viewport \u5b9e\u73b0\u79fb\u52a8\u7aef\u9002\u914d<\/p>\n
\u4e3b\u8bb2\u89e3\u51b3\u65b9\u6848
\n1.token\u8eab\u4efd\u8ba4\u8bc1\u89e3\u51b3\u65b9\u6848| 2.\u6587\u4ef6\u4e0a\u4f20\u89e3\u51b3\u65b9\u6848| 3.\u5bcc\u6587\u672c\u7f16\u8f91\u89e3\u51b3\u65b9\u6848| 4.\u8868\u5355\u9a8c\u8bc1\u89e3\u51b3\u65b9\u6848| 5.\u57fa\u4e8evant\u7684\u79fb\u52a8\u7aef\u754c\u9762\u6784\u5efa\u65b9\u6848| 6.\u57fa\u4e8epostcss-px-to-viewport\u79fb\u52a8\u7aef\u9002\u914d\u65b9\u6848<\/p>\n
\u4e3b\u8bb2\u77e5\u8bc6\u70b9
\n1. \u57fa\u4e8e vue-cli \u521b\u5efa\u5de5\u7a0b\u5316\u7684 Vue \u9879\u76ee| 2. \u57fa\u4e8e element-ui \u7ec4\u4ef6\u5e93\u5feb\u901f\u5b9e\u73b0\u9879\u76ee\u5e03\u5c40| 3. \u7528\u6237\u6ce8\u518c\u4e0e\u767b\u5f55\u7684\u4e1a\u52a1\u89e3\u51b3\u65b9\u6848| 4. \u4f7f\u7528 Vuex \u7ba1\u7406\u5168\u5c40\u5171\u4eab\u7684\u6570\u636e| 5. \u4f7f\u7528 axios \u5b9e\u73b0\u524d\u540e\u7aef\u7684\u6570\u636e\u4ea4\u4e92| 6. \u57fa\u4e8e vant \u7ec4\u4ef6\u5e93\u5feb\u901f\u6784\u5efa\u79fb\u52a8\u7aef\u754c\u9762<\/p>\n
Vue2\u8fdb\u9636\u9879\u76ee\u9ad8\u624b\u73ed\u9636\u6bb5\u516d
\n\u8bfe\u65f6:11\u5929\u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u667a\u6167\u56ed\u533a\u5fae\u524d\u7aef\u9879\u76ee \u4eba\u529b\u8d44\u6e90\u9879\u76ee<\/p>\n
\u9879\u76ee\u7b80\u4ecb\u6280\u672f\u70b9:194\u9879
\n\u9ed1\u9a6c\u667a\u6570\u662f\u4e00\u4e2a\u6570\u5b57\u5316\u56ed\u533a\u7ba1\u7406\u9879\u76ee\uff0c\u8be5\u9879\u76ee\u540e\u53f0\u53ef\u4ee5\u5728\u7ebf\u7ba1\u7406\u56ed\u533a\u5185\u7684\u697c\u5b87\u3001\u4f01\u4e1a\u3001\u8f66\u8f86\u548c\u4e00\u4f53\u6746\u7b49\u8d44\u6e90\uff0c\u53ef\u89c6\u5316\u5927\u5c4f\u901a\u8fc7\u56ed\u533a3D\u6a21\u578b\u5b9e\u65f6\u5c55\u793a\u56ed\u533a\u6982\u51b5\u3002\u5b66\u5458\u901a\u8fc7\u8be5\u9879\u76ee\u80fd\u5b66\u5230\u5982\u4f55\u7528qiankun\u642d\u5efa\u5fae\u524d\u7aef\u67b6\u6784\u3001\u7528Echarts\u8fdb\u884c\u6570\u636e\u53ef\u89c6\u5316\u3001\u4ee5\u53ca\u524d\u6cbf\u76843D\u6a21\u578b\u5c55\u793a\u7b49\u6280\u672f\u65b9\u6848\u3002<\/p>\n
\u8fdb\u5165\u9879\u76ee\u4f53\u9a8c\u5b66\u4e60\u76ee\u6807
\n1.\u638c\u63e1Vue + Element\u6280\u672f\u6808\u5728\u5f00\u53d1\u7ba1\u7406\u578b\u540e\u53f0\u9879\u76ee\u7684\u6280\u672f\u5f00\u53d1\u80fd\u529b| 2.\u5177\u5907\u89d2\u8272\u3001\u4eba\u5458\u3001\u6743\u9650\u7c7b\u7cfb\u7edf\u7684\u8bbe\u8ba1\u6574\u4f53\u8bbe\u8ba1\u53ca\u5e94\u7528\u80fd\u529b| 3.\u62e5\u6709Vue.js\u76f8\u5173\u7684\u6280\u672f\u8981\u70b9\u53ca\u914d\u5957\u7684\u63d2\u4ef6\uff0c\u89e3\u51b3\u65b9\u6848\u6df1\u5ea6\u4f7f\u7528\u80fd\u529b| 4.\u5177\u5907\u4f7f\u7528 qiankun \u642d\u5efa\u5fae\u524d\u7aef\u9879\u76ee\u7684\u80fd\u529b| 5.\u5177\u5907\u4f7f\u7528 echarts spline \u7b49\u56fe\u5f62\u5de5\u5177\uff0c\u5f00\u53d1 2D\u30013D\u6570\u636e\u53ef\u89c6\u5316\u5e73\u53f0\u80fd\u529b<\/p>\n
\u4e3b\u8bb2\u89e3\u51b3\u65b9\u6848
\n1. \u57fa\u4e8e element-ui \u548c vue2 \u5927\u578b\u4e2d\u53f0\u9879\u76ee\u5f00\u53d1\u89e3\u51b3\u65b9\u6848| 2. \u57fa\u4e8eaxios\u5c01\u88c5\u8bf7\u6c42\u5de5\u5177\u6a21\u5757\u89e3\u51b3\u65b9\u6848| 3. \u57fa\u4e8etoken\u7684\u524d\u7aef\u767b\u5f55\u89e3\u51b3\u65b9\u6848| 4. vuex\u5206\u6a21\u5757\u6301\u4e45\u5316\u89e3\u51b3\u65b9\u6848| 5. RBAC \u9879\u76ee\u6743\u9650\u63a7\u5236\u89e3\u51b3\u65b9\u6848| 6. \u57fa\u4e8e qiankun \u4f01\u4e1a\u5185\u4e2d\u540e\u53f0\u9879\u76ee\u7684\u62c6\u5206\u7ef4\u62a4| 7. \u57fa\u4e8e spline \u5de5\u5177\u5e95\u5c42\u4e3a three.js \u76843D\u6a21\u578b\u4ea4\u4e92| 8. \u591a\u8bed\u8a00\u52a8\u6001\u4e3b\u9898\u89e3\u51b3\u65b9\u6848| 9. \u65e0\u9650\u5217\u8868\u6eda\u52a8\u89e3\u51b3\u65b9<\/p>\n
\u4e3b\u8bb2\u77e5\u8bc6\u70b9
\nvue-element-admin\uff08\u8bf7\u6c42\u6a21\u5757\u5316\uff0c\u8bf7\u6c42\u5de5\u5177\u62e6\u622a\uff0cscss \u6837\u5f0f\uff0c\u5e03\u5c40\u7ec4\u4ef6\uff09|Vuex \u6301\u4e45\u5316\uff08state\uff0cmutations\uff0cactions\uff0cgetters \u548c modules\uff09|Vue CLI \u914d\u7f6e(webpack)|\u53cd\u5411\u4ee3\u7406|ElementUI \u8868\u5355\u6821\u9a8c\uff08async-validator\uff09|vue-router \u5bfc\u822a\u5b88\u536b|token \u8ba4\u8bc1|token \u5931\u6548\u63a7\u5236|\u89d2\u8272\u7ba1\u7406\u4e1a\u52a1|RBAC \u6743\u9650|Vuex + \u8def\u7531 + RBAC|\u52a8\u6001\u8def\u7531|\u89d2\u8272\u6743\u9650|\u6df7\u5165 mixns|\u5168\u5c4f\uff08screenfull\uff09|tabs \u9875\u591a\u9875\u7b7e\u7ec4\u4ef6|vue-i18n \u56fd\u9645\u5316\u65b9\u6848|history \u8def\u7531\u6a21\u5f0f\u7684\u5e94\u7528|\u6811\u5f62\u83dc\u5355 |element \u5217\u8868\u7684\u6570\u636e\u8fc7\u6ee4|\u5bfc\u5165\u5bfc\u51fa Excel|el-upload \u4e0a\u4f20\u7b2c\u4e09\u65b9\u4e91\u670d\u52a1\u5668|\u6253\u5305\u6027\u80fd\u5206\u6790|CDN \u52a0\u901f\u7684\u5b9e\u8df5\u5e94\u7528|\u7ec4\u4ef6\u5c01\u88c5|\u4e1a\u52a1\u7ec4\u4ef6\u5c01\u88c5|Spline3D\u6a21\u578b\u52a0\u8f7d\u548c\u4ea4\u4e92\u65b9\u6848|qiankun \u642d\u5efa\u5fae\u524d\u7aef\u67b6\u6784|Echarts \u81ea\u5b9a\u4e49\u53ef\u89c6\u5316\u56fe\u8868|lodash|seamless-scroll \u6570\u636e\u65e0\u7f1d\u6eda\u52a8|\u884c\u8f66\u7ba1\u7406|\u4e00\u4f53\u6746\u7ba1\u7406|\u4f01\u4e1a\u7ba1\u7406|\u7269\u4e1a\u8d39\u7ba1\u7406<\/p>\n
\u795e\u9886\u7269\u6d41\u5e73\u53f0\u9ad8\u624b\u73ed\u9636\u6bb5\u4e03
\n\u8bfe\u65f6:4\u5929\u6280\u672f\u70b9:24\u9879\u5b66\u4e60\u65b9\u5f0f:\u56e2\u961f\u5b9e\u6218<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n\u5206\u5c0f\u7ec4\u5b9e\u6218\uff0c\u591a\u4eba\u5f00\u53d1\u534f\u4f5c\uff0c\u5171\u540c\u5b8c\u6210\u57fa\u4e8e vue-admin-template \u642d\u5efa\u4f01\u4e1a\u7ea7\u4e2d\u540e\u53f0\u9879\u76ee\uff0c\u80fd\u72ec\u7acb\u5206\u6790\u9700\u6c42\u5e76\u6309\u9700\u6c42\u5b9e\u73b0\u529f\u80fd\uff0c\u80fd\u591f\u89e3\u51b3\u6d4b\u8bd5\u8fc7\u7a0b\u4e2d\u53d1\u73b0\u7684BUG|\u638c\u63e1\u5b8c\u6574\u7684\u4e1a\u52a1\u5f00\u53d1\u6d41\u7a0b\uff0c\u5b8c\u6210\u57fa\u7840\u6570\u636e\u7ba1\u7406|\u8f66\u8f86\u7ba1\u7406|\u8ba2\u5355\u548c\u8fd0\u5355\u7ba1\u7406|\u8c03\u5ea6\u7ba1\u7406\u7b49\u7279\u8272\u4e1a\u52a1\u3002<\/p>\n
\u57fa\u4e8eVue2\u548cElementUI\u5f00\u53d1\u7684\u795e\u9886\u7269\u6d41\u5e73\u53f0\u5bf9\u6807\u4e3b\u6d41\u5feb\u9012\u7269\u6d41\u516c\u53f8\u7684TMS\u7cfb\u7edf\uff0c\u5305\u542b\u8fd0\u8f93\u4efb\u52a1\u7ba1\u7406|\u8ba2\u5355\u7ba1\u7406|\u7ebf\u8def\u7ba1\u7406\u4ee5\u53ca\u8fd0\u8d39\u7ba1\u7406\u7b49\u6838\u5fc3\u4e1a\u52a1\u3002TMS\u7cfb\u7edf\u80fd\u591f\u5bf9\u8f66\u8f86|\u9a7e\u9a76\u5458|\u7ebf\u8def\u7b49\u8fdb\u884c\u5168\u9762\u8be6\u7ec6\u7684\u7edf\u8ba1\u8003\u6838\uff0c\u80fd\u5927\u5927\u63d0\u9ad8\u8fd0\u4f5c\u6548\u7387\uff0c\u964d\u4f4e\u8fd0\u8f93\u6210\u672c\u3002<\/p>\n
\u8fdb\u5165\u9879\u76ee\u4f53\u9a8c
\n\u4e3b\u8bb2\u89e3\u51b3\u65b9\u6848
\n1.\u57fa\u4e8e vue-admin-template \u4f01\u4e1a\u7ea7\u4e2d\u540e\u53f0\u6a21\u677f\u65b9\u6848| 2.\u57fa\u4e8e echarts-liquidfill \u6db2\u4f53\u56fe\u8868\u89e3\u51b3\u65b9\u6848| 3.\u57fa\u4e8e vue-baidu-map \u5730\u56fe\u4e1a\u52a1\u89e3\u51b3\u7684\u65b9\u6848| 4.\u57fa\u4e8e mockjs \u7684\u524d\u7aef\u6570\u636e\u6a21\u62df\u65b9\u6848| 5.\u57fa\u4e8e vue-treeselect \u6811\u5f62\u4e0b\u62c9\u6846\u89e3\u51b3\u65b9\u6848| 6.\u57fa\u4e8e vuex \u7684\u72b6\u6001\u7ba1\u7406\u89e3\u51b3\u65b9\u6848<\/p>\n
\u4e3b\u8bb2\u77e5\u8bc6\u70b9
\nvue2 + element + vue-router + vuex \u5168\u5bb6\u6876| vue-admin-template\u4e2d\u540e\u53f0\u6a21\u677f|echarts \u56fe\u8868|echarts-liquidfill \u6db2\u4f53\u56fe\u8868|mockjs \u6570\u636e|vue-treeselect \u6811\u5f62\u4e0b\u62c9\u6846|\u673a\u6784\u7ba1\u7406|\u673a\u6784\u4f5c\u4e1a\u8303\u56f4|\u8fd0\u8d39\u7ba1\u7406|\u8f66\u578b\u7ba1\u7406|\u8f66\u8f86\u5217\u8868|\u56de\u8f66\u767b\u8bb0|\u5feb\u9012\u5458\u7ba1\u7406|\u53f8\u673a\u7ba1\u7406|\u6392\u73ed\u7ba1\u7406|\u8ba2\u5355\u7ba1\u7406|\u8fd0\u5355\u7ba1\u7406|\u8fd0\u8f93\u4efb\u52a1\u7ba1\u7406|\u7ebf\u8def\u7ba1\u7406|\u53d6\u4ef6\u4f5c\u4e1a\u7ba1\u7406|\u6d3e\u4ef6\u4f5c\u4e1a\u7ba1\u7406\u3002<\/p>\n
Vue3 + TS\u9879\u76ee\u9ad8\u624b\u73ed\u9636\u6bb5\u516b
\n\u8bfe\u65f6:11\u5929\u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u4f18\u533b\u95ee\u8bca H5 \u9879\u76ee \u5c0f\u5154\u9c9c\u513fPC\u524d\u53f0\u7535\u5546\u9879\u76ee<\/p>\n
\u9879\u76ee\u7b80\u4ecb\u6280\u672f\u70b9:233\u9879
\n\u4f18\u533b\u95ee\u8bca\u662f\u4e00\u4e2a\u8fde\u63a5\u533b\u751f\u548c\u60a3\u8005\u7684\u79fb\u52a8\u533b\u7597\u884c\u4e1aH5\u5e94\u7528\uff0c\u901a\u8fc7\u9ad8\u6548\u3001\u5feb\u901f\u7684\u5728\u7ebf\u95ee\u8bca\u670d\u52a1\uff0c\u4e3a\u60a3\u8005\u63d0\u4f9b\u5065\u5eb7\u5e2e\u52a9\uff0c\u6db5\u76d6\u4e86\u627e\u533b\u751f\u3001\u5feb\u901f\u95ee\u8bca\u3001\u5f00\u836f\u95e8\u8bca\u3001\u75be\u75c5\u67e5\u8be2\uff0c\u5065\u5eb7\u767e\u79d1\u7b49\u529f\u80fd\u3002\u8be5\u9879\u76ee\u57fa\u4e8eVue3+TypeScript\u8fdb\u884c\u5f00\u53d1\uff0c\u4e14\u5f15\u5165\u4e0b\u4e00\u4ee3\u72b6\u6001\u7ba1\u7406\u5de5\u5177 Pinia \u548c\u6700\u70ed\u95e8\u7684\u524d\u7aef\u79fb\u52a8UI\u7ec4\u4ef6\u5e93 Vant \uff0c\u91c7\u7528\u5168\u65b0\u6280\u672f\u6808\uff0c\u7ed9\u5b66\u5458\u5e26\u6765\u6700\u4f73\u7684\u4f01\u4e1a\u5b9e\u6218\u9879\u76ee\uff0c\u52a9\u529b\u5b66\u5458\u9ad8\u85aa\u5c31\u4e1a\u3002<\/p>\n
\u8fdb\u5165\u9879\u76ee\u4f53\u9a8c\u5b66\u4e60\u76ee\u6807
\n1. \u638c\u63e1\u4f7f\u7528Vue3 + TypeScript \u5f00\u53d1\u5927\u578b\u524d\u7aef\u9879\u76ee\u7684\u80fd\u529b| 2. \u638c\u63e1\u4f7f\u7528Vant\u7ec4\u4ef6\u5e93\u5f00\u53d1\u79fb\u52a8\u7aef\u9879\u76ee\u80fd\u529b| 3. \u638c\u63e1 Pinia \u72b6\u6001\u7ba1\u7406\u5de5\u5177\u5b9e\u73b0\u9879\u76ee\u72b6\u6001\u7ba1\u7406| 4. \u638c\u63e1 \u7b2c\u4e09\u65b9\u767b\u5f55\u548c\u7b2c\u4e09\u65b9\u652f\u4ed8 \u4e1a\u52a1\u89e3\u51b3\u80fd\u529b| 5. \u638c\u63e1 \u5feb\u901f\u95ee\u8bca \u7b49\u5728\u7ebf\u95ee\u8bca\u4e3b\u6d41\u4e1a\u52a1\u5f00\u53d1\u80fd\u529b<\/p>\n
\u4e3b\u8bb2\u89e3\u51b3\u65b9\u6848
\n1.\u57fa\u4e8evue3.0+typescript\u4e2d\u5927\u578b\u9879\u76ee\u5f00\u53d1\u89e3\u51b3\u65b9\u6848| 2.\u57fa\u4e8evant\u7ec4\u4ef6\u5e93\u5feb\u901f\u6784\u5efaH5\u754c\u9762\u89e3\u51b3\u65b9\u6848| 3.\u57fa\u4e8evue-router\u7684\u524d\u7aef\u8def\u7531\u89e3\u51b3\u65b9\u6848| 4.\u57fa\u4e8evite\u6784\u5efavue3\u9879\u76ee\u89e3\u51b3\u65b9\u6848| 5.\u57fa\u4e8epinia\u7684\u72b6\u6001\u7ba1\u7406\u89e3\u51b3\u65b9\u6848| 6.\u57fa\u4e8epinia-plugin-persistedstate\u72b6\u6001\u6301\u4e45\u5316\u89e3\u51b3\u65b9\u6848| 7.\u57fa\u4e8e@vuecore\/use\u7684\u7ec4\u5408API\u5de5\u5177\u5e93\u89e3\u51b3\u65b9\u6848| 8.\u57fa\u4e8eid-validator\u7684\u8eab\u4efd\u8bc1\u4fe1\u606f\u6821\u9a8c\u89e3\u51b3\u65b9\u6848| 9.\u57fa\u4e8epostcss-px-to-viewport\u79fb\u52a8\u7aef\u9002\u914d\u89e3\u51b3\u65b9\u6848| 10.\u57fa\u4e8evite-plugin-svg-icons\u7684svg\u56fe\u6807\u7ec4\u4ef6\u89e3\u51b3\u65b9\u6848| 11.\u57fa\u4e8etailwindcss\u7684\u539f\u5b50\u5316\u7c7b\u540d\u73b0\u4ee3\u89e3\u51b3\u65b9\u6848| 12.\u57fa\u4e8esocket.io\u7684\u5373\u65f6\u901a\u8baf\u95ee\u8bca\u5ba4\u89e3\u51b3\u65b9\u6848| 13.\u57fa\u4e8eeruda \u7684\u79fb\u52a8\u7aef\u8c03\u8bd5\u89e3\u51b3\u65b9\u6848| 14.\u7b2c\u4e09\u65b9\u767b\u5f55\u89e3\u51b3\u65b9\u6848| 15.\u7b2c\u4e09\u65b9\u652f\u4ed8\u89e3\u51b3\u65b9\u6848| 16.\u57fa\u4e8e vitest \u5355\u5143\u6d4b\u8bd5\u3001\u7ec4\u4ef6\u6d4b\u8bd5\u65b9\u6848| 17.\u57fa\u4e8e husky \u4ee3\u7801\u68c0\u67e5\u5de5\u4f5c\u6d41\u5de5\u5177<\/p>\n
\u4e3b\u8bb2\u77e5\u8bc6\u70b9
\nvue3.0\u6846\u67b6|TypeScript\u4f7f\u7528|vite\u524d\u7aef\u6784\u5efa\u5de5\u5177|create-vue\u9879\u76ee\u811a\u624b\u67b6|vue-router\u8def\u7531|pinia\u72b6\u6001\u7ba1\u7406|pinia-plugin-persistedstate\u72b6\u6001\u6301\u4e45\u5316|sass\u9884\u5904\u7406\u5668|vite-plugin-svg-icons\u56fe\u6807\u7ec4\u4ef6\u63d2\u4ef6|tailwindcss\u73b0\u4ee3CSS\u6846\u67b6|@vueuse\/core\u7ec4\u5408API\u5de5\u5177\u5e93|dayjs\u65e5\u671f\u5904\u7406|vant\u7ec4\u4ef6\u5e93|postcss-px-to-viewport\u79fb\u52a8\u7aef\u9002\u914d|id-validator\u6821\u9a8c\u8eab\u4efd\u8bc1|socket.io\u5373\u65f6\u901a\u8baf|eruda\u771f\u673a\u8c03\u8bd5|\u7b2c\u4e09\u65b9\u767b\u5f55|\u7b2c\u4e09\u65b9\u652f\u4ed8|vant\u7ec4\u4ef6\u4e8c\u6b21\u5c01\u88c5|\u901a\u7528\u7ec4\u4ef6\u5c01\u88c5|reqeust\u5de5\u5177\u51fd\u6570|\u7ec4\u4ef6\u6309\u9700\u5f15\u5165|steup\u8bed\u6cd5\u7cd6|pnpm\u5305\u7ba1\u7406|\u7b2c\u4e09\u65b9\u5e93\u7c7b\u578b\u6269\u5c55|\u81ea\u5b9a\u4e49composable|css\u53d8\u91cf|\u5355\u5143\u6d4b\u8bd5|\u7ec4\u4ef6\u6d4b\u8bd5|husky|PM2\u90e8\u7f72|gitlab CI|\u9ad8\u5fb7\u5730\u56fe\u7269\u6d41\u8f68\u8ff9<\/p>\n
\u5c0f\u7a0b\u5e8f\u9ad8\u624b\u73ed\u9636\u6bb5\u4e5d
\n\u8bfe\u65f6:13\u5929 \u6280\u672f\u70b9:87\u9879 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n1. \u638c\u63e1\u539f\u751f\u5c0f\u7a0b\u5e8f\u5f00\u53d1\uff0c\u80fd\u591f\u72ec\u7acb\u5b8c\u6210\u539f\u751f\u5c0f\u7a0b\u5e8f\u9879\u76ee\u5f00\u53d1| 2. \u638c\u63e1 uni-app \u591a\u7aef\u6846\u67b6\uff0c\u80fd\u591f\u72ec\u7acb\u5f00\u53d1\u5c0f\u7a0b\u5e8f\u548c\u5176\u4ed6\u7aef\u7684\u5f00\u53d1<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. \u539f\u751f\u5c0f\u7a0b\u5e8f\u4e86\u89e3\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u7684\u4e00\u822c\u6d41\u7a0b\u5e8f\uff0c\u719f\u6089\u5c0f\u7a0b\u57fa\u7840\u7ec4\u4ef6\u7684\u4f7f\u7528\uff0c\u80fd\u591f\u57fa\u4e8e wxml \u548c wxss \u5b9e\u73b0\u5c0f\u7a0b\u5e8f\u7684\u754c\u9762\u5e03\u5c40\uff0c\u57fa\u4e8e\u6a21\u677f\u7684\u6570\u636e\u7ed1\u5b9a\u5b9e\u73b0\u6570\u636e\u7684\u52a8\u6001\u6e32\u67d3\uff0c\u57fa\u4e8e API \u5b9e\u73b0\u4e0e\u670d\u52a1\u7aef\u7684\u6570\u636e\u901a\u4fe1\uff0c\u4ee5\u53ca\u719f\u6089\u5176\u5b83\u9ad8\u7ea7 API \u7684\u4f7f\u7528\u3002<\/p>\n
\u8d26\u53f7\u7533\u8bf7|\u5f00\u53d1\u5de5\u5177|\u5de5\u7a0b\u76ee\u5f55|\u9879\u76ee\u914d\u7f6e|\u5c4f\u5e55\u9002\u914d|\u8d44\u6e90\u6258\u7ba1|\u5b57\u4f53\u56fe\u6807|\u6570\u636e\u7ed1\u5b9a|\u4e8b\u4ef6\u5904\u7406|\u751f\u547d\u5468\u671f|\u573a\u666f\u503c|\u6a21\u5757\u5316|\u7f51\u7edc\u8bf7\u6c42|\u8def\u7531|WXS|\u6a21\u677f|\u7ec4\u4ef6|UI \u6846\u67b6|\u8868\u5355|Promise<\/p>\n
2. uni-app\u7406\u89e3 uni-app \u5b9e\u73b0\u8de8\u5e73\u53f0\u5f00\u53d1\u7684\u539f\u7406\u673a\u5236\uff0c\u7406\u6e05\u5355\u6587\u4ef6\u7ec4\u4ef6\u4e0e\u539f\u751f\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6\u7684\u5bf9\u5e94\u5173\u7cfb\uff0c\u4ee5\u53ca uni-app \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u65f6\u5f00\u53d1\u65f6\u4e0e\u539f\u751f\u5c0f\u7a0b\u5e8f\u7684\u5dee\u5f02\u3002<\/p>\n
\u811a\u624b\u67b6|\u9879\u76ee\u914d\u7f6e|\u5355\u6587\u4ef6\u7ec4\u4ef6|\u751f\u547d\u5468\u671f|\u6761\u4ef6\u7f16\u8bd1|\u8ba1\u7b97\u5c5e\u6027|\u8de8\u5e73\u53f0\u652f\u6301|less|sass|\u7ec4\u4ef6\u901a\u4fe1<\/p>\n
\u4eab+\u751f\u6d3b\u539f\u751f\u5c0f\u7a0b\u5e8f\u9879\u76ee\u9ad8\u624b\u73ed\u9636\u6bb5\u5341
\n\u8bfe\u65f6:5\u5929\u6280\u672f\u70b9:27\u9879\u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n1. \u638c\u63e1\u5f00\u53d1\u539f\u751f\u5c0f\u7a0b\u5e8f\u9879\u76ee\u80fd\u529b| 2. \u638c\u63e1\u5fae\u4fe1\u8bf7\u6c42\u5de5\u5177\u5c01\u88c5\u548c\u4f7f\u7528| 3. \u638c\u63e1\u5fae\u4fe1\u7528\u6237\u767b\u5f55\u548c\u767b\u5f55\u72b6\u6001\u68c0\u6d4b\u89e3\u51b3\u65b9\u6848| 4. \u638c\u63e1\u57fa\u4e8e\u817e\u8baf\u4f4d\u7f6e\u670d\u52a1\u5b9e\u73b0\u5730\u7406\u5b9a\u4f4d\u68c0\u7d22| 5. \u638c\u63e1\u57fa\u4e8e\u5fae\u4fe1\u4e8c\u7ef4\u7801\u670d\u52a1\u5b9e\u73b0\u8bbf\u5ba2\u901a\u884c\u8bc1<\/p>\n
\u4eab+\u793e\u533a\u662f\u4e00\u4e2a\u751f\u6d3b\u7c7b\u7684\u5c0f\u7a0b\u5e8f\u9879\u76ee\uff0c\u4e3b\u8981\u670d\u52a1\u4e8e\u5c0f\u533a\u4e1a\u4e3b\uff0c\u4e3a\u5176\u63d0\u4f9b\u751f\u6d3b\u5bb6\u7535\u62a5\u4fee|\u8bbf\u5ba2\u95e8\u7981\u901a\u884c\u7684\u7684\u529f\u80fd\uff0c\u8be5\u9879\u76ee\u4e3b\u8981\u5305\u542b\u623f\u5c4b\u7ba1\u7406|\u62a5\u4fee\u7ba1\u7406|\u8bbf\u5ba2\u7ba1\u7406|\u7528\u6237\u7ba1\u7406|\u901a\u77e5\u7ba1\u7406\u7b49\u529f\u80fd\u6a21\u5757\uff0c\u6280\u672f\u6808\u4ee5\u539f\u751f\u5c0f\u7a0b\u5e8f\u6280\u672f\u4e3a\u4e3b\u914d\u5408\u4e86 Vant \u7ec4\u4ef6\u5e93\u3002<\/p>\n
\u4e3b\u8bb2\u89e3\u51b3\u65b9\u6848
\n1.\u5fae\u4fe1\u5c0f\u7a0b\u5e8f vant \u7ec4\u4ef6\u89e3\u51b3\u65b9\u6848| 2.\u5fae\u4fe1\u8bf7\u6c42\u5de5\u5177\u89e3\u51b3\u65b9\u6848| 3.\u5fae\u4fe1\u7528\u6237\u767b\u5f55\u548c\u767b\u5f55\u72b6\u6001\u68c0\u6d4b\u89e3\u51b3\u65b9\u6848| 4.\u817e\u8baf\u4f4d\u7f6e\u670d\u52a1\u5b9e\u73b0\u5730\u7406\u5b9a\u4f4d\u68c0\u7d22\u89e3\u51b3\u65b9\u6848| 5.\u5fae\u4fe1\u4e8c\u7ef4\u7801\u670d\u52a1\u89e3\u51b3\u65b9\u6848<\/p>\n
\u4e3b\u8bb2\u77e5\u8bc6\u70b9
\n\u81ea\u5b9a\u4e49\u7ec4\u4ef6|Vant \u7ec4\u4ef6\u5e93|getApp|getCurrentPages|\u5c01\u88c5 http \u6a21\u5757|rich-text \u6e32\u67d3\u5bcc\u6587\u672c|\u767b\u5f55\u72b6\u6001\u68c0\u6d4b|\u77ed\u4fe1\u9a8c\u8bc1\u7801|validate \u6570\u636e\u6821\u9a8c|\u817e\u8baf\u5730\u7406\u5b9a\u4f4d|\u9006\u5730\u5740\u89e3\u6790|\u56fe\u7247\u4e0a\u4f20|\u623f\u5c4b\u7ef4\u62a4|SwipeCell \u6ed1\u52a8\u5355\u5143\u683c|\u8bbf\u5ba2\u7ef4\u62a4|\u751f\u6210\u4e8c\u7ef4\u7801|\u81ea\u5b9a\u4e49\u5206\u4eab\u548c\u8f6c\u53d1|\u5728\u7ebf\u62a5\u4fee<\/p>\n
uni-app\u5c0f\u7a0b\u5e8f\u9879\u76ee\u9ad8\u624b\u73ed\u9636\u6bb5\u5341\u4e00
\n\u8bfe\u65f6:6\u5929\u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u5c0f\u5154\u9c9c\u513f\u7535\u5546 uni-app \u9879\u76ee \u795e\u9886\u7269\u6d41\u5c0f\u7a0b\u5e8f\u53f8\u673a\u7aef<\/p>\n
\u9879\u76ee\u7b80\u4ecb\u6280\u672f\u70b9:30\u9879
\n\u5c0f\u7a0b\u5e8f\u65e0\u9700\u5b89\u88c5\uff0c\u7528\u5b8c\u5373\u8d70\u7684\u5e94\u7528\u65b9\u5f0f\u8d8a\u6765\u8d8a\u53d7\u5230\u7528\u6237\u7684\u6b22\u8fce\uff0c\u4f01\u4e1a\u4e5f\u90fd\u7eb7\u7eb7\u5f00\u5c55\u4e86\u5c0f\u7a0b\u5e8f\u7684\u5f00\u53d1\u3002\u5c0f\u5154\u9c9c\u513f\u662f\u4e00\u4e2a\u7ecf\u5178\u7684\u7535\u5546\u7c7b\u5c0f\u7a0b\u5e8f\u9879\u76ee\uff0c\u5305\u62ec\u5546\u54c1\u3001\u7528\u6237\u3001\u8d2d\u7269\u8f66\u3001\u8ba2\u5355\u7b49\u6838\u5fc3\u529f\u80fd\u6a21\u5757\uff0c\u91c7\u7528 uni-app \u6846\u67b6\u505a\u4e3a\u8de8\u5e73\u53f0\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u65b9\u6848\uff0c\u5e76\u7efc\u5408\u8fd0\u7528\u4e86\u539f\u751f\u5c0f\u7a0b\u5e8f\u7684\u7ec4\u4ef6\u5316\u3001\u6a21\u5757\u5316\u3001\u7f51\u7edc\u8bf7\u6c42\u3001\u672c\u5730\u5b58\u50a8\u3001\u5fae\u4fe1\u767b\u5f55\u3001\u5fae\u4fe1\u652f\u4ed8\u7b49\u6280\u672f\uff0c\u5c0f\u5154\u9c9c\u9879\u76ee\u4ee5\u4f01\u4e1a\u7684\u9700\u6c42\u4e3a\u57fa\u7840\uff0c\u6709\u9488\u5bf9\u6027\u7684\u5bf9\u8bfe\u7a0b\u8fdb\u884c\u8bbe\u8ba1\uff0c\u5b66\u4e60\u672c\u8bfe\u7a0b\u4e0d\u4ec5\u80fd\u591f\u57f9\u517b\u5b66\u5458\u7684\u5b9e\u8df5\u80fd\u529b\uff0c\u8fd8\u53ef\u4ee5\u4e3a\u5c31\u4e1a\u63d0\u4f9b\u6709\u5229\u7684\u652f\u6491\u3002<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n1.\u80fd\u591f\u5f00\u53d1\u8de8\u5e73\u53f0\u7684\u5c0f\u7a0b\u5e8f| 2.\u80fd\u591f\u72ec\u7acb\u5f00\u53d1\u5c0f\u7a0b\u5e8f\u9879\u76ee| 3.\u638c\u63e1\u5fae\u4fe1\u767b\u5f55\u7684\u5b9e\u73b0\u65b9\u5f0f| 4.\u638c\u63e1\u5fae\u4fe1\u652f\u4ed8\u7684\u5b9e\u73b0\u65b9\u5f0f<\/p>\n
\u4e3b\u8bb2\u89e3\u51b3\u65b9\u6848
\n1.\u5c0f\u7a0b\u5e8f\u8de8\u5e73\u53f0\u5f00\u53d1\u89e3\u51b3\u65b9\u6848| 2.\u5c0f\u7a0b\u5e8f\u5fae\u4fe1\u767b\u5f55\u5b9e\u73b0\u65b9\u6848| 3.\u5c0f\u7a0b\u5e8f\u5fae\u4fe1\u652f\u4ed8\u5b9e\u73b0\u65b9\u6848| 4.\u4e0b\u62c9\u5237\u65b0\/\u4e0a\u62c9\u52a0\u8f7d\u4ea4\u4e92\u5b9e\u73b0\u65b9\u6848| 5.\u6570\u636e\u7f13\u5b58\u5b9e\u73b0\u65b9\u6848<\/p>\n
\u4e3b\u8bb2\u77e5\u8bc6\u70b9
\n1.uni-app\u8de8\u5e73\u53f0\u5f00\u53d1\u6846\u67b6| 2.uni-app\u63d2\u4ef6\u5e02\u573a| 3.\u7ec4\u4ef6\u5c01\u88c5\u53ca\u81ea\u52a8\u5bfc\u5165| 4.\u5fae\u4fe1\u652f\u4ed8\/\u767b\u5f55| 5.pinia \u72b6\u6001\u7ba1\u7406| 6.\u57fa\u4e8evue3+ts\u6280\u672f\u5b9e\u8df5\u65b9\u6848| 7.\u5c0f\u7a0b\u5e8f\u4e91\u5f00\u53d1<\/p>\n
React.js\u9ad8\u624b\u73ed\u9636\u6bb5\u5341\u4e8c
\n\u8bfe\u65f6:5\u5929 \u6280\u672f\u70b9:80\u9879 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n\u901a\u8fc7 React + Hooks + Redux Toolkit \u7684\u5b66\u4e60\uff0c\u5b9e\u73b0\u591a\u79cd\u4e1a\u52a1\u573a\u666f\u4e0b\u7684\u529f\u80fd\u5f00\u53d1\uff0c\u5982 B\u7ad9\u8bc4\u8bba|\u77e5\u4e4e\u9891\u9053\u7ba1\u7406|\u7f8e\u56e2\u5916\u5356|\u8bb0\u8d26\u672c\u7b49\u4e1a\u52a1\u529f\u80fd\u3002<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. React \u6838\u5fc3\u6280\u672f\u57fa\u4e8e React \u811a\u624b\u67b6\uff08create-react-app\uff09\u642d\u5efaReact\u9879\u76ee\uff0c\u638c\u63e1JSX\u8bed\u6cd5\u642d\u5efa\u9875\u9762\u7ed3\u6784\uff0c\u4f7f\u7528\u51fd\u6570\u7ec4\u4ef6\u5b9e\u73b0\u7ec4\u4ef6\u5316\u5f00\u53d1\uff0c\u638c\u63e1\u7ec4\u4ef6\u901a\u8baf\u5728\u9879\u76ee\u5f00\u53d1\u4e2d\u7684\u4f7f\u7528\u3002<\/p>\n
create-react-app\uff08CRA\uff09|JSX|\u6761\u4ef6\u6e32\u67d3|\u5217\u8868\u6e32\u67d3|\u6837\u5f0f\u5904\u7406|\u7ec4\u4ef6\u5316\u5f00\u53d1|\u51fd\u6570\u7ec4\u4ef6|useState Hook|\u72b6\u6001\u4e0d\u53ef\u53d8|\u4e8b\u4ef6\u7ed1\u5b9a|\u4e8b\u4ef6\u5bf9\u8c61|\u53d7\u63a7\u7ec4\u4ef6|useRef DOM\u64cd\u4f5c|\u7ec4\u4ef6\u901a\u4fe1|\u7236\u4f20\u5b50|\u5b50\u4f20\u7236|\u5144\u5f1f\u7ec4\u4ef6\u901a\u8baf|\u72b6\u6001\u63d0\u5347|\u8de8\u7ec4\u4ef6\u901a\u8baf|Context|useContext<\/p>\n
2. Hooks \u6df1\u5165+\u8def\u7531\u638c\u63e1 useEffect Hook \u7684\u5e94\u7528\uff0c\u638c\u63e1 useRef Hook \u7684\u9ad8\u7ea7\u7528\u6cd5\uff0c\u7406\u89e3 Hooks \u539f\u7406\uff0c\u638c\u63e1 react-router-dom \u7684\u5e94\u7528\u3002<\/p>\n
useEffect|useRef \u9ad8\u7ea7\u7528\u6cd5|useRef \u4fdd\u6301\u5f15\u7528\u4e0d\u53d8|\u7ec4\u4ef6\u66f4\u65b0\u673a\u5236\u548c\u7279\u70b9|\u9a8c\u8bc1\u7801\u767b\u5f55\u5012\u8ba1\u65f6|Hooks \u539f\u7406|React \u8def\u7531|Route|Routes|BrowserRouter|useRoutes|404\u9875\u9762|\u7f16\u7a0b\u5f0f\u5bfc\u822a useNavigate|\u5b50\u8def\u7531|\u8def\u7531\u5d4c\u5957<\/p>\n
3. Redux +\u4e2d\u95f4\u4ef6 + Redux Toolkit\u638c\u63e1 React \u6700\u5e38\u7528\u72b6\u6001\u7ba1\u7406\u5de5\u5177 Redux \u7684\u57fa\u672c\u4f7f\u7528\uff0c\u4f7f\u7528 react-redux \u94fe\u63a5\u5e93\u5728 React \u4e2d\u4f7f\u7528 Redux\uff0c\u638c\u63e1 Redux \u4e2d\u95f4\u4ef6 redux-thunk \u7528\u6765\u5904\u7406\u5f02\u6b65\u8bf7\u6c42\uff0c\u638c\u63e1 Redux Tookit \u7b80\u5316 Redux \u7684\u4f7f\u7528\u3002<\/p>\n
\u72b6\u6001\u7ba1\u7406\u6d41\u7a0b|action|dispatch|store|reducer|redux-thunk\u4e2d\u95f4\u4ef6|combineReducers|react-redux|Redux Toolkit |Redux \u8c03\u8bd5\u5de5\u5177|Redux \u6570\u636e\u6d41|createAsyncThunk|\u57fa\u4e8ePromise\u7684thunk\u72b6\u6001|immer<\/p>\n
4. \u8bb0\u8d26\u672c\u6848\u4f8b\u5229\u7528 React + Hooks + Redux Tookit \u5b9e\u73b0\u8bb0\u8d26\u672c\u6848\u4f8b\uff0c\u5bf9\u6574\u4e2a React \u9636\u6bb5\u6240\u5b66\u5185\u5bb9\u8fdb\u884c\u7ec3\u4e60\uff0c\u9a8c\u8bc1\u6211\u4eec\u662f\u5426\u638c\u63e1\u4e86 React \u5f00\u53d1\u80fd\u529b\u3002<\/p>\n
\u7ec4\u4ef6\u5e93 antd-mobile|\u8def\u7531|axios \u6570\u636e\u8bf7\u6c42|\u8bb0\u8d26\u9875\u9762|\u6708\u5ea6\u6536\u652f\u9875\u9762|\u5168\u90e8\u8d26\u5355\u9875\u9762|useMemo Hook|\u81ea\u5b9a\u4e49 Hooks|\u72b6\u6001\u903b\u8f91\u590d\u7528|json-server \u6570\u636e\u63a5\u53e3<\/p>\n
\u5c31\u4e1a\u52a0\u5f3a\u8bfe\u9ad8\u624b\u73ed\u9636\u6bb5\u5341\u4e09
\n\u8bfe\u65f6:2\u5929 \u6280\u672f\u70b9:30\u9879 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0b\u9762\u6388<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n\u901a\u8fc7\u4f01\u4e1a\u5e38\u89c1\u9762\u8bd5\u9898\u7684\u5b66\u4e60\uff0c\u80fd\u591f\u89e3\u7b54\u6d4f\u89c8\u5668\u539f\u7406|vue\u9879\u76ee\u76f8\u5173|\u7f51\u7edc\u901a\u4fe1\u534f\u8bae|\u524d\u7aef\u57fa\u7840\u7c7b\u9762\u8bd5\u9898\u3002<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. \u5c31\u4e1a\u52a0\u5f3a\u8bfe\u9762\u8bd5\u9898\u8bb2\u89e3<\/p>\n
\u6d4f\u89c8\u5668\u539f\u7406|TCP \u534f\u8bae|http \u534f\u8bae|\u524d\u7aef\u5de5\u7a0b\u5316|git \u76f8\u5173|vue \u7ec4\u4ef6\u901a\u4fe1|vue \u9879\u76ee\u76f8\u5173|JS \u9762\u8bd5\u9898|HTML \u9762\u8bd5\u9898|CSS \u9762\u8bd5\u9898<\/p>\n
React.js \u9ad8\u7ea7\u7ebf\u4e0a\u52a0\u85aa\u8bfe\u9636\u6bb5\u4e00
\n\u8bfe\u65f6:30\u5929 \u6280\u672f\u70b9:118\u9879 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0a\u5b66\u4e60<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n\u8fdb\u519b\u5927\u5382\u5fc5\u5907\uff0c\u7ed3\u5408 TypeScript+Hooks \u548c\u51fd\u6570\u5f0f\u7f16\u7a0b\u601d\u60f3\u5b8c\u6210\u9879\u76ee\u5f00\u53d1\u3002<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. TypeScript \u57fa\u7840\u7406\u89e3\u7c7b\u578b\u7cfb\u7edf \u7406\u89e3\u5e76\u80fd\u4f7f\u7528\u6cdb\u578b \u4e86\u89e3\u7c7b\u578b\u7684\u63a8\u65ad\u8fc7\u7a0b \u4e86\u89e3\u7c7b\u578b\u7684\u9ad8\u7ea7\u7528\u6cd5\uff0c\u80fd\u7406\u89e3\u4ee3\u7801<\/p>\n
\u9759\u6001\u7c7b\u578b | \u57fa\u7840\u7c7b\u578b\u548c\u5bf9\u8c61\u7c7b\u578b | \u7c7b\u578b\u6ce8\u89e3\u548c\u7c7b\u578b\u63a8\u65ad | \u51fd\u6570\u76f8\u5173\u7c7b\u578b | \u6570\u7ec4\u548c\u5143\u7ec4 | Interface \u63a5\u53e3 | \u7c7b | \u7ee7\u627f | \u6784\u9020\u5668 | Setter \u548c Getter | \u62bd\u8c61\u7c7b<\/p>\n
2. TypeScript \u9ad8\u9636\u8bed\u6cd5\u7406\u89e3\u7c7b\u578b\u7cfb\u7edf \u7406\u89e3\u5e76\u80fd\u4f7f\u7528\u6cdb\u578b \u4e86\u89e3\u7c7b\u578b\u7684\u63a8\u65ad\u8fc7\u7a0b \u4e86\u89e3\u7c7b\u578b\u7684\u9ad8\u7ea7\u7528\u6cd5\uff0c\u80fd\u7406\u89e3\u4ee3\u7801<\/p>\n
\u8054\u5408\u7c7b\u578b\u548c\u7c7b\u578b\u4fdd\u62a4 | Enum | \u51fd\u6570\u6cdb\u578b | \u7c7b\u4e2d\u7684\u6cdb\u578b | \u547d\u540d\u7a7a\u95f4 | \u6a21\u5757\u5316 | \u63cf\u8ff0\u6587\u4ef6<\/p>\n
3. Hooks\u7406\u89e3 Effect Hooks \u548c State Hooks \u8bbe\u8ba1\u601d\u60f3 \u7406\u89e3 Hooks \u5e94\u7528\u573a\u666f \u638c\u63e1\u4f7f\u7528 Hooks \u5c01\u88c5\u4e00\u4e9b\u7ec4\u4ef6<\/p>\n
useState | useEffect | useContext | \u81ea\u5b9a\u4e49 Hooks<\/p>\n
4. \u51fd\u6570\u5f0f\u7f16\u7a0b\u638c\u63e1 JavaScript \u51fd\u6570\u5f0f\u7f16\u7a0b\u8303\u5f0f\uff0c\u4e3a\u9605\u8bfb\u524d\u6cbf\u6846\u67b6\u6e90\u7801\uff0c\u5b66\u4e60\u6846\u67b6\u8bbe\u8ba1\u601d\u60f3\u505a\u50a8\u5907\uff0c\u4f8b\u5982\uff1aReact\u3001RxJS\u3001cycleJS\u3001lodashJS\u3001underscoreJS \u7b49\u3002<\/p>\n
\u7eaf\u51fd\u6570 | \u67ef\u91cc\u5316 | \u51fd\u6570\u7ec4\u5408 | Point Free | \u58f0\u660e\u5f0f\u4e0e\u547d\u4ee4\u5f0f<\/p>\n
5. Redux \u4e2d\u95f4\u4ef6\u7406\u89e3\u4e1a\u5185\u6bd4\u8f83\u4e3b\u6d41\u7684 2 \u79cd\u6570\u636e\u7ba1\u7406\u8bbe\u8ba1\u601d\u60f3 \u638c\u63e1\u5982\u4f55\u8fd0\u7528\u5408\u9002\u7684\u6570\u636e\u7ba1\u7406\u5de5\u5177\u5728\u9879\u76ee \u80fd\u901a\u8fc7\u67e5\u770b\u6e90\u7801\u5bf9\u9879\u76ee\u505a\u4e00\u4e9b\u6027\u80fd\u4f18\u5316<\/p>\n
React-Redux | redux-thunk | redux-saga<\/p>\n
6. \u5c0f\u5154\u9c9c\u513f\u540e\u53f0\u7ba1\u7406\u9879\u76ee\u638c\u63e1\u57fa\u4e8e React \u7ec4\u4ef6\u5316\u6280\u672f\u89e3\u51b3\u65b9\u6848 \u638c\u63e1\u7ed3\u5408 Redux \u72b6\u6001\u7ba1\u7406 \u638c\u63e1\u7528\u6237\u6743\u9650\u89e3\u51b3\u65b9\u6848 \u638c\u63e1 AI \u667a\u80fd\u63a8\u8350\u65b9\u6848 \u638c\u63e1\u79d2\u6740 \/ \u62fc\u56e2 \/ \u780d\u4ef7\u65b9\u6848 \u638c\u63e1\u7269\u6d41\u8ffd\u8e2a\u65b9\u6848 \u638c\u63e1\u6570\u636e\u5bfc\u51fa\u65b9\u6848 \u638c\u63e1\u7b2c\u4e09\u65b9\u652f\u4ed8\u65b9\u6848 \u638c\u63e1\u5373\u65f6\u901a\u8baf\u65b9\u6848 \u638c\u63e1\u77ed\u4fe1\u670d\u52a1\u65b9\u6848 \u638c\u63e1\u6d41\u5a92\u4f53\u65b9\u6848 \u638c\u63e1\u5355\u70b9\u767b\u5f55\u65b9\u6848 \u638c\u63e1\u670d\u52a1\u63d0\u9192\u65b9\u6848<\/p>\n
react \u7ec4\u4ef6\u903b\u8f91\u590d\u7528 | hooks \u4e0e\u7ec4\u4ef6\u751f\u547d\u5468\u671f | useState | useEffect | useContext | useMemo \u6027\u80fd\u4f18\u5316 | react-router-dom | redux | redux-thunk | useReducer | \u73af\u4fe1 | \u767e\u5ea6push | \u5fae\u8f6f\u5c0f\u51b0<\/p>\n
\u591a\u7aef\u8de8\u5e73\u53f0\u7ebf\u4e0a\u52a0\u85aa\u8bfe\u9636\u6bb5\u4e8c
\n\u8bfe\u65f6:31\u5929 \u6280\u672f\u70b9:124\u9879 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0a\u5b66\u4e60<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08\u5fc5\u5907\u6280\u80fd\uff0c\u771f\u6b63\u5b9e\u73b0\u4e00\u5957\u4ee3\u7801\u591a\u7aef\u8fd0\u884c\uff0c\u51cf\u5c11\u5f00\u53d1\u6210\u672c\uff0c\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u3002<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. Flutter \u5c0f\u5154\u9c9c\u513f\u9879\u76ee\u638c\u63e1 Flutter \u5f00\u53d1\u73af\u5883\u642d\u5efa \u638c\u63e1 Dart \u8bed\u8a00\u57fa\u7840 \u638c\u63e1 Flutter \u5e38\u89c1\u7684\u5e03\u5c40\u65b9\u5f0f \u7406\u89e3\u7ec4\u4ef6\u7684\u6982\u5ff5\u53ca\u5206\u7c7b \u638c\u63e1\u57fa\u7840\u7ec4\u4ef6\u3001\u5bb9\u5668\u7c7b\u7ec4\u4ef6\u3001\u53ef\u6eda\u52a8\u7ec4\u4ef6\u3001\u529f\u80fd\u6027\u7ec4\u4ef6\u7684\u5e94\u7528<\/p>\n
\u5f00\u53d1\u73af\u5883\u642d\u5efa | Dart \u5165\u95e8 | StatelessWidget | StatefulWidget | \u5e03\u5c40 | \u8def\u7531\u548c\u5bfc\u822a | \u624b\u52bf | \u4e8b\u4ef6 | \u8d44\u6e90\u6587\u4ef6 | \u751f\u547d\u5468\u671f | \u62cd\u7167\u548c\u56fe\u7247 | \u52a8\u753b | \u7f51\u7edc\u8bf7\u6c42 | \u5217\u8868\u7ec4\u4ef6 | \u5c4f\u5e55\u9002\u914d | \u6df7\u5408\u5f00\u53d1 | \u6027\u80fd\u4f18\u5316 | Plugin | \u6253\u5305\u53d1\u5e03<\/p>\n
2. \u5c0f\u5154\u9c9c\u513f\u539f\u751f\u5c0f\u7a0b\u5e8f\u7cbe\u8bb2\u7406\u89e3 Taro \u5b9e\u73b0\u8de8\u5e73\u53f0\u5f00\u53d1\u7684\u539f\u7406\u673a\u5236 \u7406\u89e3\u5355 JSX \u7ec4\u4ef6\u4e0e\u539f\u751f\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6\u7684\u5bf9\u5e94\u5173\u7cfb \u7406\u89e3 Taro \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u4e0e\u539f\u751f\u5c0f\u7a0b\u5e8f\u7684\u5dee\u5f02 \u638c\u63e1\u539f\u751f\u5c0f\u7a0b\u5e8f\u6d88\u606f\u63a8\u9001\u65b9\u6848 \u638c\u63e1\u539f\u751f\u5c0f\u7a0b\u5e8f\u591a\u7ebf\u7a0b\u65b9\u6848 \u638c\u63e1\u539f\u751f\u5c0f\u7a0b\u5e8f\u4e91\u5f00\u53d1\u7b49\u9ad8\u7ea7\u65b9\u6848<\/p>\n
\u811a\u624b\u67b6 | \u9879\u76ee\u914d\u7f6e | \u7f16\u8bd1\u914d\u7f6e | \u6761\u4ef6\u7f16\u8bd1 | \u9002\u914d | \u8de8\u5e73\u53f0\u652f\u6301 | sass | \u7ec4\u4ef6\u901a\u4fe1 | \u5206\u5305\u52a0\u8f7d | \u6d88\u606f\u63a8\u9001 | \u591a\u7ebf\u7a0b | \u63d2\u4ef6 | \u4e91\u5f00\u53d1<\/p>\n
3. PWA\u4e86\u89e3 PWA \u80fd\u591f\u5b9e\u73b0\u901a\u8fc7 PWA \u6280\u672f\u5f3a\u5316 H5 \u7f51\u9875\u7684\u539f\u751f\u7279\u6027 \u4e86\u89e3\u5f53\u524d PWA \u6280\u672f\u7684\u6d4f\u89c8\u5668\u517c\u5bb9\u60c5\u51b5<\/p>\n
PWA \u7b80\u4ecb\u4e0e\u4f18\u70b9 | PWA \u80cc\u540e\u7684\u6280\u672f\u4e0e\u539f\u7406 | PWA \u73b0\u72b6 | manifest | serviceWorker | \u6d88\u606f\u63a8\u9001\u7684\u5b9e\u73b0 | PWA \u6d4f\u89c8\u5668\u517c\u5bb9\u60c5\u51b5<\/p>\n
\u524d\u7aef\u5de5\u7a0b\u5316\u7ebf\u4e0a\u52a0\u85aa\u8bfe\u9636\u6bb5\u4e09
\n\u8bfe\u65f6:9\u5929 \u6280\u672f\u70b9:39\u9879 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0a\u5b66\u4e60<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08\u5fc5\u5907\u6280\u80fd\uff0c\u5728\u9879\u76ee\u5f00\u53d1\u4e2d\u5b9e\u73b0\u81ea\u52a8\u5316|\u89c4\u8303\u5316|\u7ec4\u4ef6\u5316|\u6a21\u5757\u5316\u3002<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. webpack \u6838\u5fc3\u5b66\u4f1a webpack \u7684\u914d\u7f6e \u7406\u89e3 webpack \u7684\u4f5c\u7528\u4e0e\u539f\u7406 \u4e0a\u624b\u9879\u76ee\u7684\u6253\u5305\u8fc7\u7a0b\u914d\u7f6e \u62e5\u6709\u5de5\u7a0b\u5316\u7684\u524d\u7aef\u601d\u7ef4 \u638c\u63e1\u524d\u7aef\u5de5\u7a0b\u5316\u7684\u5e38\u89c1\u5de5\u5177\u53ca\u5de5\u4f5c\u539f\u7406 \u4e86\u89e3 webpack \u6027\u80fd\u4f18\u5316 \u4e86\u89e3 webpack \u4e2d\u7684 tapable \u4e86\u89e3 AST \u7684\u5e94\u7528 \u6df1\u5165\u5b66\u4e60 webpack \u539f\u7406\uff0c\u624b\u5199 webpack<\/p>\n
\u57fa\u672c\u914d\u7f6e | loader | plugin | sourc map | HMR | Shimming | CodeSplitting | TreeShaking | Caching | \u6027\u80fd\u4f18\u5316 | \u591a\u9875\u5e94\u7528 | PreLoading | PreFetching<\/p>\n
2. \u811a\u624b\u67b6\u5de5\u5177\u638c\u63e1 vue-cli \u53ca\u76f8\u5173\u914d\u7f6e \u638c\u63e1 vue-cli \u521d\u59cb\u5316\u5355\u9875\u53ca\u591a\u9875\u9879\u76ee \u638c\u63e1\u4f7f\u7528 create-react-app \u642d\u5efa\u9879\u76ee \u4e86\u89e3 create-react-app \u7684\u539f\u7406 \u638c\u63e1 angular-cli \u642d\u5efa\u9879\u76ee \u4e86\u89e3 angular-cli \u7684\u539f\u7406 \u638c\u63e1\u4e00\u4e2a\u57fa\u7840 cli \u7684\u529f\u80fd\u5b9e\u73b0<\/p>\n
vue-cli | create-react-app | angular-cli | CLI \u539f\u7406<\/p>\n
3. git flow \u5168\u6d41\u7a0b\u638c\u63e1\u63d0\u4ea4\u76f8\u5173\uff1agit rebase\/git commit\/git reflog\/git log \u638c\u63e1\u5b50\u6a21\u5757: submodule\/subtree \u638c\u63e1\u5206\u652f\u7ba1\u7406\uff1agit fetch\/git checkout\/git merge \u638c\u63e1\u91cd\u7f6e\u53ca\u56de\u9000\uff1agit reset\/git checkout\/git rm \u638c\u63e1\u591a\u4eba\u534f\u540c git \u5de5\u4f5c\u6d41 \u638c\u63e1 git \u5e38\u89c1\u7684\u5206\u652f\u7ba1\u7406\u547d\u4ee4<\/p>\n
rebase | commit | reflog | log | submodule | subtree | fetch | checkout | merge | reset | checkout | rm | mv | branch | switch | git flow<\/p>\n
\u524d\u7aef\u670d\u52a1\u5316\u7ebf\u4e0a\u52a0\u85aa\u8bfe\u9636\u6bb5\u56db
\n\u8bfe\u65f6:33\u5929 \u6280\u672f\u70b9:135\u9879 \u5b66\u4e60\u65b9\u5f0f:\u7ebf\u4e0a\u5b66\u4e60<\/p>\n
\u5b66\u4e60\u76ee\u6807
\n\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08\u5fc5\u5907\u6280\u80fd\uff0cSEO \u4f18\u5316\u7b56\u7565\u4e4b\u4e00\uff0c\u7f51\u7ad9\u6027\u80fd\u76d1\u63a7\u4e0e\u57cb\u70b9\u65b9\u6848\u3002<\/p>\n
\u4e3b\u8bb2\u5185\u5bb9
\n1. Koa \/ eggKoa \/ egg \/ \u4e2d\u95f4\u4ef6<\/p>\n
\u5bf9 Egg \u7684\u529f\u80fd\u6709\u5168\u9762\u7684\u7406\u89e3 | \u638c\u63e1\u4f7f\u7528 Egg \u5b8c\u6210\u9879\u76ee | \u7406\u89e3 Koa \u7684\u6838\u5fc3\u8bbe\u8ba1\u601d\u60f3 | \u638c\u63e1 Koa \u7684\u4e2d\u95f4\u4ef6\u7f16\u5199<\/p>\n
2. NoSQLRedis \/ MongoDB<\/p>\n
\u7406\u89e3 redis \u6838\u5fc3\u6982\u5ff5\u4e0e\u4f7f\u7528 | \u80fd\u4f7f\u7528 redis \u8fd0\u7528\u5230\u9879\u76ee\u4e2d | \u7406\u89e3 MongoDB \u6838\u5fc3\u6982\u5ff5\u4e0e\u4f7f\u7528 | \u80fd\u4f7f\u7528 MongoDB \u8fd0\u7528\u5230\u9879\u76ee\u4e2d<\/p>\n
3. \u6027\u80fd\u76d1\u63a7\u670d\u52a1\u7aef\u65e5\u5fd7\u6536\u96c6\u7cfb\u7edf\u8bbe\u8ba1 \u63a5\u5165\u7b2c\u4e09\u65b9\u76d1\u63a7\u5e73\u53f0 \u670d\u52a1\u7aef\u9519\u8bef\u9884\u8b66 \u5206\u6790\u7528\u6237\u884c\u4e3a \u5efa\u7acb\u7528\u6237\u753b\u50cf<\/p>\n
\u7406\u89e3\u670d\u52a1\u7aef\u65e5\u5fd7\u6536\u96c6\u7cfb\u7edf\u8bbe\u8ba1 | \u638c\u63e1\u63a5\u5165\u7b2c\u4e09\u65b9\u76d1\u63a7\u5e73\u53f0 | \u638c\u63e1\u5bf9\u670d\u52a1\u7aef\u9519\u8bef\u9884\u8b66 | \u524d\u7aef\u5f02\u5e38\u4e0a\u62a5 | \u7528\u6237 PV\/UV \u7edf\u8ba1 | \u9875\u9762\u52a0\u8f7d\u65f6\u95f4\u7edf\u8ba1 | \u7528\u6237\u70b9\u51fb\u884c\u4e3a\u7edf\u8ba1 | \u63a5\u53e3\u8bf7\u6c42\u65e5\u5fd7\u7edf\u8ba1 | \u63a5\u53e3\u8bf7\u6c42\u8017\u65f6\u7edf\u8ba1 | \u9759\u6001\u8d44\u6e90\u52a0\u8f7d\u5f02\u5e38\u7edf\u8ba1 | \u5b9e\u73b0 JS \u9875\u9762\u622a\u56fe | JS \u62a5\u9519\u5b9e\u65f6\u76d1\u63a7\u7edf\u8ba1\u5206\u6790 | \u8be6\u60c5\u5206\u6790\u548c\u4ee3\u7801\u5b9a\u4f4d | \u9759\u6001\u8d44\u6e90\u52a0\u8f7d\u5f02\u5e38\u5b9e\u65f6\u76d1\u63a7 | \u9759\u6001\u8d44\u6e90\u52a0\u8f7d\u5f02\u5e38\u7684\u7edf\u8ba1\u5206\u6790 | \u63a5\u53e3\u8bf7\u6c42\u62a5\u9519\u5b9e\u65f6\u76d1\u63a7 | \u63a5\u53e3\u8bf7\u6c42\u62a5\u9519\u7684\u7edf\u8ba1\u5206\u6790 | \u7528\u6237 PV\/UV \u5b9e\u65f6\u7edf\u8ba1 | \u8bb0\u5f55\u56de\u653e\u529f\u80fd\uff08\u8be6\u7ec6\u8bb0\u5f55\u7528\u6237\u4f7f\u7528\u7684\u8db3\u8ff9\uff09 | 7 \u65e5\u5185\u7559\u5b58\u6570\u636e\u5206\u6790 | \u7248\u672c\u53f7\u5206\u6790\uff0c\u6d4f\u89c8\u5668\u5206\u5e03\uff0c\u7b49\u4fe1\u606f\u5206\u6790 | \u5206\u6790\u9875\u9762\u52a0\u8f7d\u6027\u80fd\u6570\u636e<\/p>\n
4. SSRSSR \u8fd0\u884c\u539f\u7406 SSR \u73af\u5883\u642d\u5efa \u7f13\u5b58\u548c stream \u6027\u80fd\u4f18\u5316<\/p>\n
\u7406\u89e3 SSR \u8fd0\u884c\u539f\u7406\u53ca\u4e3a\u4ec0\u4e48\u9700\u8981\u4f7f\u7528 SSR | \u638c\u63e1 SSR \u73af\u5883\u642d\u5efa | \u638c\u63e1\u4f7f\u7528\u7f13\u5b58\u548c stream \u5bf9 SSR \u8fdb\u884c\u4f18\u5316 | \u638c\u63e1 Nuxt.js \/ Next.js \u7684\u5e94\u7528<\/p>\n","protected":false},"excerpt":{"rendered":"
\u7f51\u9875\u5e03\u5c40\u57fa\u7840\u73ed\u9636\u6bb5\u4e00 \u8bfe\u65f6:10\u5929 \u6280\u672f…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[68],"tags":[],"class_list":["post-1888","post","type-post","status-publish","format-standard","hentry","category-zzjy"],"_links":{"self":[{"href":"https:\/\/www.aiersheng.cc\/index.php?rest_route=\/wp\/v2\/posts\/1888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aiersheng.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aiersheng.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aiersheng.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aiersheng.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1888"}],"version-history":[{"count":0,"href":"https:\/\/www.aiersheng.cc\/index.php?rest_route=\/wp\/v2\/posts\/1888\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.aiersheng.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aiersheng.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aiersheng.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}