![\"\u5229\u7528Taro](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/024\/61df8e16504b4952.jpg\" "\\"\u5229\u7528Taro")
<\/p>\n\u5982\u4f55\u4f7f\u7528 taro3 + vue3 \u5f00\u53d1\u5c0f\u7a0b\u5e8f\uff1f\u4e0b\u9762\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u4ecb\u7ecd\u4e00\u4e0b\u4f7f\u7528 taro3 + vue3 \u5f00\u53d1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u65b9\u6cd5\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01<\/p>\n
<\/p>\n
\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u662f\u4ee5\u5fae\u4fe1\u4e3a\u8fd0\u884c\u73af\u5883\u7684\u4e00\u79cd\u5e94\u7528\uff0c\u5176\u5b9e\u8d28\u662f Hybrid \u6280\u672f\u7684\u5e94\u7528\uff0cHybrid App \u5373\u6df7\u5408\u6a21\u5f0f\u79fb\u52a8\u5e94\u7528\uff0c\u56e0\u6b64\u4e0e H5 \u7c7b\u4f3c\uff0c\u4f46\u53c8\u6bd4 H5 \u62e5\u6709\u5f88\u591a\u539f\u751f\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u8c03\u7528\u4f4d\u7f6e\u4fe1\u606f\u548c\u6444\u50cf\u5934\u7b49\u3002<\/p>\n
\u5c0f\u7a0b\u5e8f\u7684\u5f00\u53d1\u65b9\u5f0f\u4e0e H5 \u5341\u5206\u76f8\u4f3c\uff0c\u7528\u7684\u4e5f\u662f JavaScript\u3001HTML\u3001CSS \u8bed\u8a00\u3002<\/p>\n
\u56e0\u6b64\uff0c\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u53ef\u4ee5\u8bf4\u662f\u4e00\u540d\u524d\u7aef\u5de5\u7a0b\u5e08\u5fc5\u987b\u8981\u638c\u63e1\u7684\u6280\u80fd\u3002<\/p>\n
\u7acb\u5373\u5b66\u4e60<\/span>\u201c\u201d\uff1b<\/p>\n \u539f\u751f\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u6709\u4e00\u5b9a\u7684\u5b66\u4e60\u6210\u672c\uff0c\u73b0\u5982\u4eca\u5e02\u9762\u4e0a\u6709\u5f88\u591a\u5f00\u53d1\u5c0f\u7a0b\u5e8f\u7684\u7b2c\u4e09\u65b9\u591a\u7aef\u6846\u67b6\uff0c\u5982\u679c\u4e0d\u662f\u8ffd\u6c42\u6781\u81f4\u6027\u80fd\u548c\u7a33\u5b9a\uff0c\u8fd8\u662f\u4e0d\u8981\u7528\u539f\u751f\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e86\uff0c\u5f00\u53d1\u6548\u7387\u592a\u4f4e\u3002<\/p>\n \u7b2c\u4e09\u65b9\u591a\u7aef\u6846\u67b6\u4e2d\uff0ctaro \u548c uni-app \u7684\u4f7f\u7528\u5ea6\u662f\u6700\u5e7f\u7684\uff0c\u4e00\u822c\u6765\u8bf4\uff0c\u505a\u6280\u672f\u9009\u578b\u65f6\uff0c\u56e2\u961f\u7528 react\uff0c\u5c31\u7528 taro\uff0c\u56e2\u961f\u7528 vue\uff0c\u5c31\u7528 uni-app\uff0c\u4e24\u8005\u4e4b\u95f4\u6ca1\u6709\u4ec0\u4e48\u4f18\u52a3\u4e4b\u5206\uff0c\u90fd\u633a\u597d\u7528\u7684\u3002<\/p>\n \u4f46\u5f88\u591a\u5f00\u53d1\u8005\u53ef\u80fd\u4e0d\u77e5\u9053\uff0ctaro3.0 \u4ee5\u4e0a\u7248\u672c\u662f\u652f\u6301\u4f7f\u7528 vue \u7684\uff0c\u672c\u7bc7\u6587\u7ae0\u5c31\u6765\u4ecb\u7ecd\u4e00\u4e0b\u5982\u4f55\u4f7f\u7528 Taro3 + Vue3 \u5f00\u53d1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u3002<\/p>\n \u6211\u6839\u636e\u7f51\u4e0a\u7684\u8d44\u6599\u5b8c\u6210\u4e86\u672c\u9879\u76ee\u7684\u642d\u5efa\u4e4b\u540e\uff0c\u7528\u672c\u9879\u76ee\u5f00\u53d1\u8fc7\u4e00\u4e2a\u5c0f\u7a0b\u5e8f\uff0c\u90a3\u79cd\u5f00\u53d1\u4f53\u9a8c\u771f\u7684\u662f\u8d85\u8d8a\u4e86\u6211\u4ee5\u5f80\u5f00\u53d1\u8fc7\u7684\u6240\u6709\u9879\u76ee\uff0c\u975e\u5e38\u4e1d\u6ed1\uff08\u53ef\u80fd\u662f\u6211\u7b2c\u4e00\u6b21\u5199 vue3 \u7684 script setup \u5427\uff0c\u7528\u8d77\u6765\u786e\u5b9e\u5f88\u8212\u670d\uff09\u3002<\/p>\n \u53ef\u76f4\u63a5\u8bbf\u95ee\u672c\u9879\u76ee clone \u4f7f\u7528\u3002<\/p>\n vue3 \u521a\u53d1\u5e03\u65f6\uff0c\u7531\u4e8e\u6ca1\u6709\u5408\u9002\u7684 ui \u6846\u67b6\u652f\u6301\uff0c\u6211\u5b66\u4e60 vue3 \u7684\u70ed\u60c5\u76f4\u63a5\u88ab\u529d\u9000\u4e86\u3002\u76f4\u5230\u73b0\u5728\uff0c\u7c7b\u4f3c\u4e8e\u3001\u3001 \u7b49\u4f18\u79c0\u6846\u67b6\u9646\u7eed\u652f\u6301 vue3\uff0c\u5e76\u4e14\u8bb8\u591a vue3 \u9879\u76ee\u88ab\u7528\u5230\u4e86\u751f\u4ea7\u73af\u5883\u4e2d\uff0c\u624d\u53d1\u73b0\u5927\u5bb6\u662f\u628a vue3 \u771f\u7684\u7528\u8d77\u6765\u4e86\u3002<\/p>\n \u6bd4\u5982\u6211\u4eec\u516c\u53f8\u9694\u58c1\u9879\u76ee\u7ec4\uff0c\u91cd\u6784\u9879\u76ee\u5c31\u7528\u4e86 vue3\uff0c\u8fd9\u65f6\u6211\u624d\u53d1\u73b0\u81ea\u5df1\u5b66\u4e60 vue3 \u6709\u70b9\u665a\u4e86\uff08tips:\u524d\u7aef\u771f\u7684\u592a\u5377\u4e86\uff09<\/p>\n \u662f\u4eac\u4e1c\u98ce\u683c\u7684\u79fb\u52a8\u7aef\u7ec4\u4ef6\u5e93\uff0c\u5b83\u652f\u6301\u4f7f\u7528 Vue \u8bed\u8a00\u6765\u7f16\u5199\u53ef\u4ee5\u5728 H5\uff0c\u5c0f\u7a0b\u5e8f\u5e73\u53f0\u4e0a\u7684\u5e94\u7528\uff0c\u5e2e\u52a9\u7814\u53d1\u4eba\u5458\u63d0\u5347\u5f00\u53d1\u6548\u7387\uff0c\u6539\u5584\u5f00\u53d1\u4f53\u9a8c\u3002<\/p>\n \u6211\u662f\u4ece \u77e5\u9053 NutUI \u7684\uff0ctaro \u5b98\u65b9\u63a8\u8350\u4f7f\u7528 NutUI \u5f00\u53d1\uff0c\u4ed6\u4eec\u4f3c\u4e4e\u4e5f\u90fd\u662f\u6765\u81ea\u4eac\u4e1c\u540c\u4e00\u4e2a\u5f00\u53d1\u56e2\u961f\uff0c\u6211\u62b1\u7740\u8bd5\u4e00\u8bd5\u7684\u5fc3\u6001\u4e0a\u624b\u4f7f\u7528\uff0c\u4f7f\u7528\u4f53\u9a8c\u8fd8\u4e0d\u9519\u3002<\/p>\n \u662f\u4e00\u4e2a\u7528\u4e8e Vue \u7684\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u7c7b\u4f3c Vuex, \u662f Vue \u7684\u53e6\u4e00\u79cd\u72b6\u6001\u7ba1\u7406\u65b9\u6848\uff0c\u652f\u6301 Vue2 \u548c Vue3\u3002<\/p>\n \u6211\u7b2c\u4e00\u6b21\u63a5\u89e6\u524d\u7aef\u72b6\u6001\u7ba1\u7406\u5de5\u5177\uff0c\u662f\u521a\u5b9e\u4e60\u65f6\u516c\u53f8\u7684\u4e00\u4e2a\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf\uff0c\u7528\u7684 dva\uff0c\u90a3\u53ef\u53eb\u4e00\u4e2a\u6298\u78e8\u554a\uff0c\u5dee\u70b9\u76f4\u63a5\u628a\u6211\u529d\u9000\u3002\u540e\u9762\u6162\u6162\u719f\u6089\u4e86\u4e00\u4e9b\uff0c\u4f46\u662f\u4e0d\u7ba1\u7528 redux\uff0c\u8fd8\u662f vuex\uff0c\u8fd8\u662f\u89c9\u5f97\u5199\u7740\u9ebb\u70e6\u3002<\/p>\n \u8fd9\u6b21\u5c1d\u8bd5\u4f7f\u7528 Pinia\uff0c\u7528\u8d77\u6765\u786e\u5b9e\u5f88\u8212\u670d\uff0c\u7b26\u5408\u76f4\u89c9\uff0c\u6613\u4e8e\u5b66\u4e60 \uff0c\u6709\u70b9\u7c7b\u4f3c\u4e8e \uff0c\u4f46\u6ca1\u6709 recoil \u90a3\u4e48\u591a\u7684\u6982\u5ff5\u548c API\uff0c\u4e3b\u4f53\u975e\u5e38\u7cbe\u7b80\uff0c\u6781\u6613\u4e0a\u624b\u3002<\/p>\n \u4e0evetur\u76f8\u540c\uff0cvolar\u662f\u4e00\u4e2a\u9488\u5bf9 vue \u7684 vscode \u63d2\u4ef6\uff0c\u4e0d\u8fc7\u4e0e vetur \u4e0d\u540c\u7684\u662f\uff0cvolar \u63d0\u4f9b\u4e86\u66f4\u4e3a\u5f3a\u5927\u7684\u529f\u80fd\u3002<\/p>\n<\/p>\n \u521d\u59cb\u5316\u9879\u76ee\u4e4b\u524d\uff0c\u9700\u5b89\u88c5 taro\uff0c\u8bf7\u53c2\u8003 \uff0c\u5b8c\u6210 taro \u5b89\u88c5<\/p>\n \u4f7f\u7528\u547d\u4ee4\u521b\u5efa\u6a21\u677f\u9879\u76ee\uff1a<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u5b89\u88c5 cli \u7528\u6765\u6267\u884c\u6784\u5efa\u7b49\u64cd\u4f5c\uff0c\u4e4b\u540e\u542f\u52a8\u9879\u76ee\uff0c\u4f1a\u751f\u6210\u4e00\u4e2a dist \u76ee\u5f55<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \n \u6253\u5f00\u5fae\u4fe1\u5f00\u53d1\u5de5\u5177 \u5de5\u7a0b\u76ee\u5f55\u9700\u8981\u6307\u5411\u6784\u5efa\u51fa\u6765\u7684 dist \u6587\u4ef6\n<\/p><\/blockquote>\n Hello world \u51fa\u73b0\uff0c\u9879\u76ee\u6210\u529f\u8dd1\u8d77\u6765\u4e86\uff01<\/p>\n \u4e2a\u4eba\u8ba4\u4e3a\uff0ceslint + prettier \u8db3\u4ee5\u5e94\u4ed8\u5927\u90e8\u5206\u524d\u7aef\u4ee3\u7801\u89c4\u8303\u95ee\u9898\u4e86\uff0c\u4e14\u914d\u7f6e\u8d77\u6765\u5f88\u7b80\u5355\uff0c\u6709\u7279\u6b8a\u9700\u6c42\u4e5f\u53ef\u7ee7\u7eed\u914d\u7f6e\u3002<\/p>\n \u5b89\u88c5\u4f9d\u8d56<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u8bbe\u7f6e\u4ee3\u7801\u89c4\u8303\u548c\u683c\u5f0f\u5316\u89c4\u5219<\/p>\n .eslintrc.js<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n .prettierrc<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u5728 package.json \u4e2d script \u6dfb\u52a0 Ts \u68c0\u67e5\u547d\u4ee4\u548c Eslint \u68c0\u67e5\u547d\u4ee4<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u6dfb\u52a0 \u89e6\u53d1 Git \u94a9\u5b50\uff0c\u4ee3\u7801\u63d0\u4ea4\u524d\u68c0\u67e5<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u7f16\u8f91 pre-commit \u6267\u884c Eslint \u68c0\u67e5\u548c Ts \u68c0\u67e5<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u81f3\u6b64\uff0c\u9879\u76ee\u7684\u4ee3\u7801\u89c4\u8303\u548c\u683c\u5f0f\u89c4\u8303\u914d\u7f6e\u5b8c\u6bd5\uff0c\u591a\u4eba\u534f\u4f5c\u4e5f\u4e0d\u662f\u95ee\u9898\u4e86\u3002<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u5728 .babelrc \u6216 babel.config.js \u4e2d\u6dfb\u52a0\u914d\u7f6e\uff1a<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u6309\u9700\u5f15\u5165\uff0c\u5b89\u88c5\u63d2\u4ef6 babel-plugin-import<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u6837\u5f0f\u5904\u7406 \u56e0\u4e3a nutui \u7684\u8bbe\u8ba1\u7a3f\u662f 375 \u7684 \u6240\u4ee5\u5c06\u6846\u67b6\u7684\u8bbe\u8ba1\u5c3a\u5bf8\u8c03\u6574\u4e3a 375<\/p>\n \u9879\u76ee\u914d\u7f6e\u6587\u4ef6 config\/index.js \u4e2d\u914d\u7f6e:<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n app.ts<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n index.vue \u4e2d\uff0cnut-button \u7ec4\u4ef6\u76f4\u63a5\u5728 template \u4e2d\u5199\uff0c\u4e0d\u7528\u518d\u5f15\u5165<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u8bf4\u5b9e\u8bdd\uff0c\u914d\u7f6e\u8d77\u6765\u8fd8\u662f\u6709\u70b9\u9ebb\u70e6\uff0c\u4e0d\u8fc7\u6309\u7167\u5b98\u7f51\u6587\u6863\u8bf4\u660e\u6765\u914d\u4e5f\u6ca1\u6709\u8e29\u5751\uff0c\u8fd8\u884c\u3002<\/p>\n \u5c0f\u7a0b\u5e8f\u4e3b\u5305\u8d85\u8fc7 2M\uff0c\u5c31\u65e0\u6cd5\u771f\u673a\u9884\u89c8\u4e86\uff0c\u4e3a\u4e86\u63d0\u524d\u505a\u597d\u51c6\u5907\u5728\u4e00\u5f00\u59cb\u5c31\u8fdb\u884c\u5206\u5305\u5904\u7406\u3002\u6bd4\u5982\u4e0b\u9762\u8fd9\u4e2a\u5c0f\u7a0b\u5e8f\u7684\u914d\u7f6e\uff0c\u5206\u4e86\u56db\u4e2a\u5305\u3002<\/p>\n app.config.ts<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u53ef\u4ee5\u5728\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u5de5\u5177\u7f16\u8f91\u5668\u91cc\u7684\u4ee3\u7801\u4f9d\u8d56\u5206\u6790\uff0c\u67e5\u770b\u4e3b\u5305\u548c\u5206\u5305\u7684\u5927\u5c0f<\/p>\n hooks\/life.ts<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u4f7f\u7528<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u9879\u76ee\u914d\u7f6e\u6587\u4ef6 config\/index.js \u4e2d\u914d\u7f6e:<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u4ee5\u7ba1\u7406\u7528\u6237\u4fe1\u606f\u548c\u7528\u6237\u767b\u5f55\u72b6\u6001\u4e3a\u4f8b\uff0c\u5b9e\u73b0\u4e00\u4e2a\u7528\u6237\u767b\u5f55\u529f\u80fd<\/p>\n \u9700\u8981\u5904\u7406\u7684\u6587\u4ef6\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n stores\/auth.ts<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n stores\/index.ts<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u4e2a\u4eba\u4e2d\u5fc3 index.vue<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n userInfo \u7ec4\u4ef6<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u603b\u7684\u6765\u8bf4\uff0c pinia \u5199\u8d77\u6765\u662f\u975e\u5e38\u7b80\u6d01\u7684\uff0c\u8fd9\u79cd\u7c7b react hooks \u7684\u5199\u6cd5\uff0c\u6211\u662f\u975e\u5e38\u559c\u6b22\u7684<\/p>\n http.ts<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n request.ts<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u4ee5\u83b7\u53d6\u56fe\u4e66\u5217\u8868\u548c\u56fe\u4e66\u8be6\u60c5\u4e3a\u4f8b<\/p>\n apis\/book.ts<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u8bf7\u6c42\u65b9\u6cd5\u5c01\u88c5\u8fd8\u662f\u7528\u5230\u4e86 axios\uff0c\u53ea\u662f\u7528\u7684\u662f axios-miniprogram \uff0c\u5199\u6cd5\u548c web \u7aef\u57fa\u672c\u4e00\u81f4\uff0chttp.js \u6587\u4ef6\u5f15\u7528\u7684\u4e00\u4e9b\u6a21\u5757\u592a\u591a\uff0c\u672c\u6587\u6ca1\u6709\u5217\u51fa\u6765\uff0c\u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee\u672c\u9879\u76ee github \u5730\u5740\u67e5\u770b\u3002<\/p>\n iPhoneX \u5e95\u90e8\u6a2a\u7ebf\u9002\u914d<\/p>\n assets\/styles\/common.scss<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u5218\u6d77\u513f\u5c4f\u9002\u914d<\/p>\n assets\/styles\/hairline.scss<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u591a\u884c\u6587\u5b57\u7701\u7565<\/p>\n assets\/styles\/ellipsis.scss<\/p>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n \u81f3\u6b64\uff0c\u7ec8\u4e8e\u5b8c\u6210\u4e86 Taro + Vue3 \u7684\u9879\u76ee\u642d\u5efa\uff0c\u5f3a\u70c8\u5efa\u8bae\u76f4\u63a5\u8bbf\u95ee\u9879\u76ee clone \u4f7f\u7528\uff0c\u6709\u4e00\u4e9b\u914d\u7f6e\u7ec6\u8282\u672c\u6587\u65e0\u6cd5\u4e00\u4e00\u5217\u4e3e\uff0c\u5c31\u5728\u9879\u76ee\u4e2d\u53bb\u53d1\u6398\u5427\uff01<\/p>\n \u5982\u679c\u6211\u7684\u6587\u7ae0\u80fd\u5e2e\u52a9\u5230\u4f60\uff0c\u90a3\u5c06\u662f\u6211\u7684\u8363\u5e78\uff01<\/p>\n \u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011<\/p>\n \u4ee5\u4e0a\u5c31\u662f\u5229\u7528Taro + Vue3\u5982\u4f55\u5f00\u53d1\u5c0f\u7a0b\u5e8f\uff1f\uff08\u5b9e\u8df5\uff09\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":" \u5982\u4f55\u4f7f\u7528 taro3 + vue3 \u5f00\u53d1\u5c0f\u7a0b\u5e8f\uff1f\u4e0b\u9762\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u4ecb\u7ecd\u4e00\u4e0b\u4f7f\u7528 taro3 + vue3 \u5f00\u53d1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7684\u65b9\u6cd5\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01 \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u662f\u4ee5\u5fae\u4fe1\u4e3a\u8fd0\u884c\u73af\u5883\u7684\u4e00\u79cd\u5e94\u7528\uff0c\u5176\u5b9e\u8d28\u662f Hybrid \u6280\u672f\u7684\u5e94\u7528\uff0cHybrid App \u5373\u6df7\u5408\u6a21\u5f0f\u79fb\u52a8\u5e94\u7528\uff0c\u56e0\u6b64\u4e0e H5 \u7c7b\u4f3c\uff0c\u4f46\u53c8\u6bd4 H5 \u62e5\u6709\u5f88\u591a\u539f\u751f\u7684\u80fd\u529b\uff0c\u4f8b\u5982\u8c03\u7528\u4f4d\u7f6e\u4fe1\u606f\u548c\u6444\u50cf\u5934\u7b49\u3002 \u5c0f\u7a0b\u5e8f\u7684\u5f00\u53d1\u65b9\u5f0f\u4e0e H5 \u5341\u5206\u76f8\u4f3c\uff0c\u7528\u7684\u4e5f\u662f JavaScript\u3001HTML\u3001CSS \u8bed\u8a00\u3002 \u56e0\u6b64\uff0c\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u53ef\u4ee5\u8bf4\u662f\u4e00\u540d\u524d\u7aef\u5de5\u7a0b\u5e08\u5fc5\u987b\u8981\u638c\u63e1\u7684\u6280\u80fd\u3002 \u7acb\u5373\u5b66\u4e60\u201c\u201d\uff1b \u539f\u751f\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u6709\u4e00\u5b9a\u7684\u5b66\u4e60\u6210\u672c\uff0c\u73b0\u5982\u4eca\u5e02\u9762\u4e0a\u6709\u5f88\u591a\u5f00\u53d1\u5c0f\u7a0b\u5e8f\u7684\u7b2c\u4e09\u65b9\u591a\u7aef\u6846\u67b6\uff0c\u5982\u679c\u4e0d\u662f\u8ffd\u6c42\u6781\u81f4\u6027\u80fd\u548c\u7a33\u5b9a\uff0c\u8fd8\u662f\u4e0d\u8981\u7528\u539f\u751f\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e86\uff0c\u5f00\u53d1\u6548\u7387\u592a\u4f4e\u3002 \u7b2c\u4e09\u65b9\u591a\u7aef\u6846\u67b6\u4e2d\uff0ctaro \u548c uni-app \u7684\u4f7f\u7528\u5ea6\u662f\u6700\u5e7f\u7684\uff0c\u4e00\u822c\u6765\u8bf4\uff0c\u505a\u6280\u672f\u9009\u578b\u65f6\uff0c\u56e2\u961f\u7528 react\uff0c\u5c31\u7528 taro\uff0c\u56e2\u961f\u7528 vue\uff0c\u5c31\u7528 uni-app\uff0c\u4e24\u8005\u4e4b\u95f4\u6ca1\u6709\u4ec0\u4e48\u4f18\u52a3\u4e4b\u5206\uff0c\u90fd\u633a\u597d\u7528\u7684\u3002 \u4f46\u5f88\u591a\u5f00\u53d1\u8005\u53ef\u80fd\u4e0d\u77e5\u9053\uff0ctaro3.0 \u4ee5\u4e0a\u7248\u672c\u662f\u652f\u6301\u4f7f\u7528 vue \u7684\uff0c\u672c\u7bc7\u6587\u7ae0\u5c31\u6765\u4ecb\u7ecd\u4e00\u4e0b\u5982\u4f55\u4f7f\u7528 Taro3 + Vue3 \u5f00\u53d1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u3002 \u6211\u6839\u636e\u7f51\u4e0a\u7684\u8d44\u6599\u5b8c\u6210\u4e86\u672c\u9879\u76ee\u7684\u642d\u5efa\u4e4b\u540e\uff0c\u7528\u672c\u9879\u76ee\u5f00\u53d1\u8fc7\u4e00\u4e2a\u5c0f\u7a0b\u5e8f\uff0c\u90a3\u79cd\u5f00\u53d1\u4f53\u9a8c\u771f\u7684\u662f\u8d85\u8d8a\u4e86\u6211\u4ee5\u5f80\u5f00\u53d1\u8fc7\u7684\u6240\u6709\u9879\u76ee\uff0c\u975e\u5e38\u4e1d\u6ed1\uff08\u53ef\u80fd\u662f\u6211\u7b2c\u4e00\u6b21\u5199 vue3 \u7684 script setup \u5427\uff0c\u7528\u8d77\u6765\u786e\u5b9e\u5f88\u8212\u670d\uff09\u3002 \u53ef\u76f4\u63a5\u8bbf\u95ee\u672c\u9879\u76ee clone \u4f7f\u7528\u3002 \u76ee\u6807\u529f\u80fd \u96c6\u6210 vue3\uff0c\u4f7f\u7528 script […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-34194","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=34194"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34194\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=34194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=34194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=34194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\u76ee\u6807\u529f\u80fd<\/h2>\n
\n
\u4e3b\u8981\u6280\u672f\u6808<\/h2>\n
\n
vscode \u9700\u5b89\u88c5\u63d2\u4ef6<\/h2>\n
\n
\u642d\u5efa\u9879\u76ee\u67b6\u6784<\/h2>\n
\u521d\u59cb\u5316\u9879\u76ee<\/h3>\n
taro init myApp<\/pre>\n
![\"\u5229\u7528Taro](\"https:\/\/img.php.cn\/upload\/image\/713\/413\/643\/1642039320184785.png\" "\\"\u5229\u7528Taro")
<\/p>\nyarn add @tarojs\/cli\nyarn dev:weapp<\/pre>\n
![\"\u5229\u7528Taro](\"https:\/\/img.php.cn\/upload\/image\/939\/125\/843\/1642039334383976.png\" "\\"\u5229\u7528Taro")
<\/p>\n![\"\u5229\u7528Taro](\"https:\/\/img.php.cn\/upload\/image\/209\/393\/295\/1642039338767003.png\" "\\"\u5229\u7528Taro")
<\/p>\n\u8bbe\u7f6e\u4ee3\u7801\u89c4\u8303<\/h3>\n
\n
yarn add @vue\/eslint-config-prettier @vue\/eslint-config-typescript eslint-plugin-prettier vue-tsc husky -D<\/pre>\n
module.exports = {\n root: true,\n\n env: {\n node: true,\n 'vue\/setup-compiler-macros': true\n },\n\n extends: ['plugin:vue\/vue3-essential', 'eslint:recommended', '@vue\/prettier', '@vue\/typescript'],\n\n parserOptions: {\n parser: '@typescript-eslint\/parser'\n },\n\n rules: {\n 'prettier\/prettier': [\n 'error',\n {\n singleQuote: true,\n semi: false,\n trailingComma: 'none',\n arrowParens: 'avoid',\n printWidth: 100\n }\n ],\n 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',\n 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'\n }\n}<\/pre>\n{\n \"tabWidth\": 2,\n \"singleQuote\": true,\n \"semi\": false,\n \"trailingComma\": \"none\",\n \"arrowParens\": \"avoid\",\n \"endOfLine\": \"auto\",\n \"printWidth\": 100\n}<\/pre>\n\"scripts\":{\n \"tsc\": \"vue-tsc --noEmit --skipLibCheck\",\n \"lint\": \"eslint --ext .vue --ext .js --ext .ts src\/\"\n}<\/pre>\nnpx husky install<\/pre>\n
#!\/bin\/sh\n. \"$(dirname \"$0\")\/_\/husky.sh\"\n\necho \"---eslint start---\"\nnpm run lint\necho \"---eslint end---\"\n\necho \"---ts lint start---\"\nnpm run tsc\necho \"---ts lint end---\"<\/pre>\n
\u5f15\u5165 NutUI<\/h3>\n
yarn add @nutui\/nutui-taro<\/pre>\n
module.exports = {\n \/\/ ...\n plugins: [\n [\n 'import',\n {\n libraryName: '@nutui\/nutui',\n libraryDirectory: 'dist\/packages\/_es',\n camel2DashComponentName: false\n },\n 'nutui3-vue'\n ],\n [\n 'import',\n {\n libraryName: '@nutui\/nutui-taro',\n libraryDirectory: 'dist\/packages\/_es',\n camel2DashComponentName: false\n },\n 'nutui3-taro'\n ]\n ]\n}<\/pre>\nyarn add babel-plugin-import -D<\/pre>\n
designWidth: 375<\/pre>\n
import { createApp } from 'vue'\nimport { Button } from '@nutui\/nutui-taro'\n\nconst app = createApp()\n\napp.use(Button)<\/pre>\n<template>\n <view>\n <text>{{ msg }}<\/text>\n <nut-button>\u4e3b\u8981\u6309\u94ae<\/nut-button>\n <\/view><\/template><\/pre>\n![\"\u5229\u7528Taro](\"https:\/\/img.php.cn\/upload\/image\/907\/561\/512\/1642039347587878.png\" "\\"\u5229\u7528Taro")
<\/p>\n\u5c0f\u7a0b\u5e8f\u5206\u5305\u914d\u7f6e<\/h3>\n
pages: ['pages\/create\/index', 'pages\/find\/index', 'pages\/my\/index'],\nsubpackages: [\n{\n root: 'pages\/featureA',\n pages: ['index\/index']\n},\n{\n root: 'pagesSub\/search',\n pages: ['index']\n},\n{\n root: 'pagesSub\/my',\n pages: ['detail\/index', 'about\/index']\n},\n{\n root: 'pagesSub\/book',\n pages: ['detail\/index', 'person\/list\/index', 'person\/detail\/index']\n}\n],<\/pre>\n![\"\u5229\u7528Taro](\"https:\/\/img.php.cn\/upload\/image\/210\/501\/509\/1642039353927092.png\" "\\"\u5229\u7528Taro")
<\/p>\n\u4f7f\u7528 script setup \u8bed\u6cd5\u5c01\u88c5\u5c0f\u7a0b\u5e8f\u9875\u9762\u751f\u547d\u5468\u671f\u65b9\u6cd5<\/h3>\n
import { getCurrentInstance } from '@tarojs\/taro'\nimport { onMounted } from 'vue'\n\nconst Current = getCurrentInstance()\n\nexport function useDidShow(callback) {\n onMounted(callback) Current?.page?.onShow && (Current.page.onShow = callback)\n}\nexport function usePullDownRefresh(callback) {\n Current?.page?.onPullDownRefresh && (Current.page.onPullDownRefresh = callback)\n}<\/pre>\nimport { useDidShow } from '@\/hooks\/life'\n\nuseDidShow(() => {\n \/\/ console.log('onShow')\n})<\/pre>\n\u5b89\u88c5 \u8fdb\u884c\u72b6\u6001\u7ba1\u7406<\/h3>\n
yarn add pinia\nyarn add taro-plugin-pinia<\/pre>\n
plugins: ['taro-plugin-pinia']<\/pre>\n
![\"\u5229\u7528Taro](\"https:\/\/img.php.cn\/upload\/image\/404\/712\/523\/1642039360155751.png\" "\\"\u5229\u7528Taro")
<\/p>\nimport { defineStore } from 'pinia'\n\ninterface UserInfoProp {\n nickName: string\n avatarUrl: string\n}\n\nconst useAuth = defineStore({\n id: 'authInfo',\n state: () => ({\n userInfo: {\n nickName: '',\n avatarUrl: ''\n },\n isLogin: false\n }),\n actions: {\n login() {\n this.isLogin = true\n },\n logout() {\n this.isLogin = false\n },\n setUserInfo(userInfo: UserInfoProp) {\n this.userInfo = userInfo\n }\n }\n})\nexport { useAuth }<\/pre>\nimport { createPinia } from 'pinia'\nimport { useAuth } from '.\/auth'\n\nexport const store = createPinia()\n\nconst storeObj = {\n auth: useAuth\n}\n\n\/\/ \u5c01\u88c5\u6210useStore\u7684\u5f62\u5f0f\uff0c\u8fd9\u6837\u4e00\u770b\u5f15\u7528\u5c31\u77e5\u9053\u662fstore\u7684\u6570\u636e\nexport function useStore(key: string) {\n return storeObj[key]()\n}<\/pre>\n<template>\n <main>\n <user-info><\/user-info>\n <\/main>\n <main>\n <nut-button>\u5fae\u4fe1\u4e00\u952e\u767b\u5f55<\/nut-button>\n <\/main><\/template><script>\nimport Taro from '@tarojs\/taro'\nimport { computed } from 'vue'\nimport { useStore } from '@\/stores'\n\nimport UserInfo from '.\/userInfo.vue'\n\nconst auth = useStore('auth')\nconst isLogin = computed(() => auth.isLogin)\n\nconst handleLogin = () => {\n setTimeout(() => {\n \/\/ \u6a21\u62df\u540e\u7aef\u8bf7\u6c42\u5f97\u5230token\u548cuserInfo\n Taro.setStorageSync('token', 'xxxx')\n auth.setUserInfo({\n nickName: '\u6797',\n avatarUrl:\n 'https:\/\/img12.360buyimg.com\/imagetools\/jfs\/t1\/143702\/31\/16654\/116794\/5fc6f541Edebf8a57\/4138097748889987.png'\n })\n auth.login()\n }, 500)\n}\n<\/script><\/pre>\n<template>\n <article>\n <nut-avatar><\/nut-avatar>\n <span>{{ userInfo.nickName }}<\/span>\n <\/article><\/template><script>\nimport Taro from '@tarojs\/taro'\nimport { computed } from 'vue'\nimport { useStore } from '@\/stores'\n\nconst auth = useStore('auth')\nconst userInfo = computed(() => auth.userInfo)\n\n<\/script><\/pre>\n\u8bf7\u6c42\u65b9\u6cd5\u5c01\u88c5<\/h3>\n
\/\/ \u5c01\u88c5axios\u7684\u8bf7\u6c42\uff0c\u8fd4\u56de\u91cd\u65b0\u5c01\u88c5\u7684\u6570\u636e\u683c\u5f0f\n\/\/ \u5bf9\u9519\u8bef\u7684\u7edf\u4e00\u5904\u7406\nimport { HttpResponse } from '@\/common\/interface'\nimport Taro from '@tarojs\/taro'\nimport publicConfig from '@\/config\/index'\nimport axios, {\n AxiosInstance,\n AxiosRequestConfig,\n AxiosResponse,\n Canceler\n} from 'axios-miniprogram'\nimport errorHandle from '..\/common\/errorHandle'\nconst CancelToken = axios.CancelToken\n\nclass HttpRequest {\n private baseUrl: string\n private pending: Record<string>\n\n constructor(baseUrl: string) {\n this.baseUrl = baseUrl\n this.pending = {}\n }\n\n \/\/ \u83b7\u53d6axios\u914d\u7f6e\n getInsideConfig() {\n const config = {\n baseURL: this.baseUrl,\n headers: {\n 'Content-Type': 'application\/json;charset=utf-8'\n },\n timeout: 10000\n }\n return config\n }\n\n removePending(key: string, isRequest = false) {\n if (this.pending[key] && isRequest) {\n this.pending[key]('\u53d6\u6d88\u91cd\u590d\u8bf7\u6c42')\n }\n delete this.pending[key]\n }\n\n \/\/ \u8bbe\u5b9a\u62e6\u622a\u5668\n interceptors(instance: AxiosInstance) {\n instance.interceptors.request.use(\n config => {\n console.log('config :>> ', config)\n let isPublic = false\n publicConfig.publicPath.map(path => {\n isPublic = isPublic || path.test(config.url || '')\n })\n const token = Taro.getStorageSync('token')\n if (!isPublic && token) {\n config.headers.Authorization = 'Bearer ' + token\n }\n const key = config.url + '&' + config.method\n this.removePending(key, true)\n config.cancelToken = new CancelToken(c => {\n this.pending[key] = c\n })\n return config\n },\n err => {\n errorHandle(err)\n return Promise.reject(err)\n }\n )\n\n \/\/ \u54cd\u5e94\u8bf7\u6c42\u7684\u62e6\u622a\u5668\n instance.interceptors.response.use(\n res => {\n const key = res.config.url + '&' + res.config.method\n this.removePending(key)\n if (res.status === 200) {\n return Promise.resolve(res.data)\n } else {\n return Promise.reject(res)\n }\n },\n err => {\n errorHandle(err)\n return Promise.reject(err)\n }\n )\n }\n\n \/\/ \u521b\u5efa\u5b9e\u4f8b\n request(options: AxiosRequestConfig) {\n const instance = axios.create()\n const newOptions = Object.assign(this.getInsideConfig(), options)\n this.interceptors(instance)\n return instance(newOptions)\n }\n\n get(url: string, config?: AxiosRequestConfig): Promise<axiosresponse> | Promise<httpresponse> {\n const options = Object.assign(\n {\n method: 'get',\n url: url\n },\n config\n )\n return this.request(options)\n }\n\n post(url: string, data?: unknown): Promise<axiosresponse> | Promise<httpresponse> {\n return this.request({\n method: 'post',\n url: url,\n data: data\n })\n }\n}\n\nexport default HttpRequest<\/httpresponse><\/axiosresponse><\/httpresponse><\/axiosresponse><\/string><\/pre>\nimport HttpRequest from '.\/http'\nimport config from '@\/config\/index'\nconst baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro\n\nconst request = new HttpRequest(baseUrl)\n\nexport default request<\/pre>\n
import request from '..\/request'\n\nexport function getBookList() {\n return request.get('books\/getBookList')\n}\n\nexport function getBookDetail(id: number) {\n return request.post('books\/getBookDetail', {\n id\n })\n}<\/pre>\n\u6837\u5f0f\u5c01\u88c5<\/h3>\n
.safe-area-bottom {\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n}<\/pre>\n@mixin hairline-common() {\n position: absolute;\n box-sizing: border-box;\n content: ' ';\n pointer-events: none;\n}\n\n@mixin hairline() {\n @include hairline-common();\n top: -50%;\n right: -50%;\n bottom: -50%;\n left: -50%;\n border: 0 solid #eaeaea;\n transform: scale(0.5);\n}\n\n@mixin hairline-top($color, $left: 0, $right: 0) {\n @include hairline-common();\n top: 0;\n right: $right;\n left: $left;\n border-top: 1px solid $color;\n transform: scaleY(0.5);\n}\n\n@mixin hairline-bottom($color, $left: 0, $right: 0) {\n @include hairline-common();\n right: $right;\n bottom: 0;\n left: $left;\n border-bottom: 1px solid $color;\n transform: scaleY(0.5);\n}\n\n[class*='van-hairline'] {\n &::after {\n @include hairline();\n }\n}\n\n.van-hairline {\n &,\n &--top,\n &--left,\n &--right,\n &--bottom,\n &--surround,\n &--top-bottom {\n position: relative;\n }\n\n &--top::after {\n border-top-width: 1px;\n }\n\n &--left::after {\n border-left-width: 1px;\n }\n\n &--right::after {\n border-right-width: 1px;\n }\n\n &--bottom::after {\n border-bottom-width: 1px;\n }\n\n &,\n &-unset {\n &--top-bottom::after {\n border-width: 1px 0;\n }\n }\n\n &--surround::after {\n border-width: 1px;\n }\n}<\/pre>\n@mixin multi-ellipsis($lines) {\n display: -webkit-box;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: $lines;\n -webkit-box-orient: vertical;\n}\n\n@mixin ellipsis() {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.ellipsis {\n @include ellipsis();\n}\n\n.multi-ellipsis--l2 {\n @include multi-ellipsis(2);\n}\n\n.multi-ellipsis--l3 {\n @include multi-ellipsis(3);\n}<\/pre>\n\u603b\u7ed3<\/h2>\n