{ "version": "https://jsonfeed.org/version/1", "title": "Vue.js", "description": "The Progressive Javascript Framework", "home_page_url": "go/vue", "feed_url": "feed/vue.json", "icon": "https://cdn.v2ex.com/navatar/7504/adad/881_large.png?m=1650095191", "favicon": "https://cdn.v2ex.com/navatar/7504/adad/881_normal.png?m=1650095191", "items": [ { "author": { "url": "member/Whbbit1999", "name": "Whbbit1999", "avatar": "https://cdn.v2ex.com/avatar/6671/a5d2/634904_large.png?m=1744617567" }, "url": "t/1199178", "title": "shadcn-vue-admin \u5df2\u5347\u7ea7\u81f3 vite8", "id": "t/1199178", "date_published": "2026-03-18T05:12:26+00:00", "content_html": "

\u6211\u628a shadcn-vue-admin \u5347\u7ea7\u5230\u4e86 Vite 8

\n

\u6784\u5efa\u901f\u5ea6\u5feb\u4e86\u5f88\u591a\uff0c\u6a21\u677f\u7684\u517c\u5bb9\u6027\u76ee\u524d\u770b\u4e0b\u6765\u4e5f\u6ca1\u6709\u4ec0\u4e48\u95ee\u9898\u3002

\n

shadcn-vue-admin \u6280\u672f\u6808:

\n

\n
• Vue 3
\n
• TypeScript
\n
• shadcn-vue
\n
• Vite 8
\n
• pinia
\n

\n

\u4ed3\u5e93

\u56e0\u4e3a AI \u5df2\u7ecf\u5f7b\u5e95\u6539\u53d8\u4e86\u6211\u5199\u4ee3\u7801\u3001\u505a\u4ea7\u54c1\u7684\u65b9\u5f0f\u3002

\u4e3e\u4e2a\u6700\u8fd1\u975e\u5e38\u771f\u5b9e\u7684\u4f8b\u5b50\uff1a\n\u6211\u7528 AI \u4ece\u6536\u96c6\u8d44\u6599\u3001\u4e70\u57df\u540d\u3001\u5199\u4ee3\u7801\uff0c\u5230\u4e0a\u7ebf\u4e00\u4e2a\u53ef\u8bbf\u95ee\u7684\u7f51\u7ad9\uff0c\u5168\u7a0b\u4e0d\u5230 1 \u4e2a\u5c0f\u65f6\u3002 https://openclawai.net/

\u8fd9\u4e2a\u901f\u5ea6\uff0c\u8bf4\u5b9e\u8bdd\uff0c\u7528 Vue \u662f\u51e0\u4e4e\u505a\u4e0d\u5230\u7684\uff0c\u800c\u4e14\u6211\u66f4\u52a0\u719f\u6089 vue \u3002

\u4e0d\u662f Vue \u4e0d\u597d\uff0c\u800c\u662f\uff1a\u5404\u4e2a\u5e73\u53f0\u9ed8\u8ba4\u8f93\u51fa\u7684\u5c31\u662f react \uff0c\u5982\u679c\u8fc1\u79fb\u5230 vue \u9700\u8981\u5f88\u591a\u989d\u5916\u7684 token

\u800c\u7528 AI \u5199 React\uff1a

\n
• JSX + \u51fd\u6570\u7ec4\u4ef6\uff0cAI \u547d\u4e2d\u7387\u975e\u5e38\u9ad8
\n
• \u4e00\u6b21\u751f\u6210\u53ef\u8fd0\u884c\u7684\u6982\u7387\u660e\u663e\u66f4\u5927
\n
• \u91cd\u6784\u3001\u62c6\u7ec4\u4ef6\u3001\u8865\u903b\u8f91\u51e0\u4e4e\u662f\u201c\u6307\u54ea\u6253\u54ea\u201d
\n

\u66f4\u5173\u952e\u7684\u4e00\u70b9\u662f\uff1a\n\u6211\u5bf9 React \u5176\u5b9e\u5e76\u4e0d\u7b97\u719f\u3002

\u4f46\u8fd9\u4ef6\u4e8b\u5df2\u7ecf\u4e0d\u518d\u91cd\u8981\u4e86\u3002

\u5982\u9898\uff0c\u95ee\u4e86 gemini \uff0c\u53d1\u73b0\u7b54\u6848\u80e1\u626f\u7684\uff0cgemini \u8bf4\u5199 onclick \u4e0d\u4f1a\u89e6\u53d1 vue \u54cd\u5e94\u5f0f\uff08 ref \u5143\u7d20\u4fee\u6539\uff09\uff0c\u4f46\u662f\u6211\u5b9e\u6d4b\u5728 div \u4e0a\u5199:onclick \u786e\u5b9e\u80fd\u89e6\u53d1\u54cd\u5e94\u5f0f\u4fee\u6539,\u6240\u4ee5\u6211\u6709\u70b9\u7eb3\u95f7\uff0c\u8fd9\u4e24\u79cd\u5199\u6cd5\u5230\u5e95\u6709\u4ec0\u4e48\u533a\u522b

\n\u56fe 1 \u662f\u9886\u5bfc\u60f3\u8981\u7684\u6548\u679c \u6765\u81ea\u4ed6\u5bb6 https://cms-docs.shengyc.com/cms/tutorial/

\n\u56fe 2 \u662f\u81ea\u5df1\u627e\u5230\u7684\u5f00\u6e90 goView https://gitee.com/dromara/go-view

\u60f3\u95ee\u95ee\u5927\u5bb6\u6709\u6ca1\u6709\u597d\u7684\u5e95\u5b50\u53ef\u4ee5\u4e8c\u5f00\u7684 \u4ece\u96f6\u642d\u5efa\u6709\u70b9\u56f0\u96be\u545c\u545c\u545c~

\u6709\u6ca1\u6709\u5927\u4f6c\u5728\u6b63\u5f0f\u9879\u76ee\u91cc\u4f7f\u7528 rolldown \u4e86? \u524d\u51e0\u5929\u5c1d\u8bd5\u5728\u5df2\u6709\u7684\u9879\u76ee\u4e0a\u5207\u6362\u4e3a rolldown ,\u7acb\u9a6c\u62a5\u4e00\u5806\u7684\u9519\u8bef...

\u6211\u4e0d\u78ba\u5b9a\u9019\u662f\u5426\u662f\u666e\u904d\u7684\u7528\u6cd5\uff0c\u4f46\u6211\u767c\u73fe reactive \u975e\u5e38\u9069\u5408\u7528\u4f86\u5efa\u7acb\u985e\u4f3c OO \u7684\u5c01\u88dd\u3002

reactive\u6703\u628a refs \u5c55\u5e73\uff0c\u6240\u4ee5\u53ef\u4ee5\u9019\u9ebc\u5beb\uff1a

function useClient() {\n const name = ref('Alice')\n const greeting = computed(() => `Hello ${name.value}`)\n\n function updateName(newName: string) {\n name.value = newName\n }\n\n return reactive({\n name,\n greeting,\n updateName\n })\n}\n

\u5728 component \u88cf\uff1a

const client = useClient()\nclient.greeting // => 'Hello Alice'\n\nclient.updateName('Bob')\nclient.greeting // => 'Hello Bob'\n

\u73fe\u5728client\u7ba1\u7406\u5b83\u81ea\u5df1\u7684\u72c0\u614b\uff0c\u5176\u66b4\u9732\u7684\u63a5\u53e3\u53ef\u4ee5\u76f4\u63a5\u7528\u5728\u6a21\u677f\u88cf\u3002

\u6211\u5011\u4e5f\u53ef\u4ee5\u7d44\u5408\u9019\u4e9b\u5c0d\u8c61\u548c\u4fdd\u7559\u56ae\u61c9\u6027\uff1a

function useOrder(client: ReturnType<typeof useClient>) {\n const createdBy = computed(() => `Created by ${client.name}`)\n\n // \u4f60\u4e5f\u53ef\u4ee5\u5728\u9019\u88cf\u8abf\u7528 client.updateName\n\n return reactive({\n createdBy\n })\n}\n\nconst client = useClient()\nconst order = useOrder(client)\norder.createdBy // => 'Created by Alice'\nclient.updateName('Bob')\norder.createdBy // => 'Created by Bob'\n

\u6211\u89ba\u5f97\u9019\u662f vue \u76f8\u5c0d\u65bc\u5176\u4ed6\u5eab\u7279\u5225\u7684\u5c6c\u6027\uff0c\u6211\u53ea\u9700\u8981\u50b3\u905e\u4e00\u500b\u5c0d\u8c61\uff0c\u800c\u5b83\u64c1\u6709\u81ea\u5df1\u7684\u72c0\u614b\u548c\u65b9\u6cd5\u3002

\u5728\u73fe\u5be6\u4e2d\uff0c\u9019\u4e9b\u5c0d\u8c61\u4e00\u822c\u6703\u57fa\u65bc\u5f8c\u7aef\u6578\u64da\uff0c\u6211\u5011\u53ef\u4ee5\u5728\u5f8c\u7aef\u6578\u64da\u7684\u57fa\u790e\u4e0a\u64f4\u5c55\u72c0\u614b\u548c\u65b9\u6cd5\u3002

async function useOrder(client: ReturnType<typeof useClient>) {\n const orderData = reactive(await fetchOrderData())\n\n const paid = ref(false)\n\n async function pay() {\n const res = await paymentAPI()\n paid.value = res.success\n }\n\n return reactive({\n ...toRefs(orderData), // \u6240\u6709 orderData \u7684\u5c6c\u6027\u6703\u88ab\u66b4\u9732\n // \u6211\u5011\u9700\u8981 toRefs \u4f86\u4fdd\u6301\u56ae\u61c9\u6027\n paid,\n pay\n })\n}\n

\u73fe\u5728\u7d66\u5b9a\u4e00\u500b order \uff0c\u6211\u5011\u53ef\u4ee5\u76f4\u63a5\u5728\u6a21\u677f\u88cf\u7d81\u5b9aorder.paid \u548corder.pay\u3002

\u672c\u5e16\u5728 reddit \u4e0a\u7684\u7248\u672c\uff1a https://www.reddit.com/r/vuejs/comments/1owezu4/reactive_as_an_object_encapsulation/

\u7a81\u7136\u53d1\u73b0\u597d\u50cf\u4ec0\u4e48\u9879\u76ee\u5199\u53d8\u91cf\u90fd\u662f ref \u4e00\u628a\u68ad\u4e86\uff0c\u6ca1\u6709\u4e13\u95e8\u7528\u8fc7\u8fd9\u4e2a reactive \u3002op \u8bb0\u5f97\u521a\u5b66\u7684\u65f6\u5019\u8fd8\u662f\u975e\u5e38\u4ed4\u7ec6\u7684\u533a\u5206\u53d8\u91cf\u7c7b\u578b\u7684\uff0c\u662f\u5bf9\u8c61\u5c31\u7528 reactive \u3002

\u60f3\u8981\u96c6\u6210\u4e00\u4e2a\u529f\u80fd\u5f3a\u4e00\u70b9\u7684 excel \u8fdb\u6765\uff0c\u5b9e\u73b0\u7f16\u8f91\u4fee\u6539\u5220\u9664\u7b49\uff0cgemini \u7ed9\u7684\u65b9\u6848\u662fLuckySheet,\u5927\u8001\u4eec\u8fd8\u6709\u5176\u5b83\u65b9\u6848\u5417\uff1f

\u673a\u5668 MacStudio,WebStorm \u5347\u5230\u6700\u65b0 2025.2.2 \u7248\u672c\u540e\uff0c\u51e0\u4e4e\u4e0d\u8f6c\u7684\u98ce\u6247\u547c\u547c\u76f4\u54cd\uff0c\u53d1\u73b0 cpu \u5feb 100%\u4e86

\u6392\u67e5\u4e00\u756a\u53d1\u73b0\u8fd9\u6837\u7684\u4ee3\u7801\u5c31\u80fd cpu \u5e72\u4e00\u534a\uff0c\u91cc\u9762\u518d\u5d4c\u5957\u4e00\u4e2a v-for \uff0ccpu \u5c31\u5360\u516b\u4e5d\u5341\u4e86\uff1a

<li v-for=\"menu in menus\" :key=\"menu.key\">\n\n</li>\n

\u4e4b\u524d\u4e00\u76f4\u4ee5\u4e3a\u662f ai \u63d2\u4ef6\u7684\u9505\uff0c\u5c4f\u853d\u6389\u6240\u6709 ai \u63d2\u4ef6\u540e\uff0c\u60c5\u51b5\u4f9d\u7136\u5982\u6b64\uff0c\u628a v-for \u76f8\u5173\u4ee3\u7801\u6ce8\u91ca\u6389\u4ee5\u540e\u5c31\u597d\u4e86\n\u8fd9\u662f\u4e2a\u5565\u60c5\u51b5\u554a

\n

With this release, we are unifying Nuxt UI and Nuxt UI Pro into a single, powerful, and completely free open-source library

\n

Blog: https://nuxt.com/blog/nuxt-ui-v4

Nuxt UI: https://ui.nuxt.com/

enum BaseEvent {\n CLICK = 'click'\n}\n\ninterface CustomEvent{\n [BaseEvent.CLICK]:string\n}\n\ndefineEmits<EmitEvents>()\n\n

\u4e0a\u9762\u8fd9\u79cd\u5199\u6cd5 @vue/compiler-sfc \u4f1a\u62a5 Unsupported computed key in type referenced by a macro \uff0c\u5e94\u8be5\u600e\u4e48\u5199\u624d\u5bf9\uff1f\u8c22\u8c22\u3002

\u8bf7\u95ee VUE \u4f6c\u4eec\u5728\u5f00\u53d1\u5927\u8868\u5355\u7684\u65f6\u5019\u600e\u4e48\u8bbe\u8ba1\u7ed1\u5b9a\u5bf9\u8c61\u7684\uff1f\u76f4\u63a5\u5728 data \u4e2d\u58f0\u660e\u6240\u6709\u8868\u5355\u9879\u6765\u7ed1\u5b9a\u5417\uff1f\u90a3\u5c82\u4e0d\u662f\u4f1a\u6709\u5f88\u591a\u5197\u4f59\u4ee3\u7801\uff1f\u800c\u4e14\u5982\u679c\u591a\u4e2a\u7ec4\u4ef6\u90fd\u4f7f\u7528\u8fd9\u4e2a\u5bf9\u8c61\uff0c\u5bf9\u8c61\u5728\u4f20\u9012\u7684\u65f6\u5019\u662f\u4e0d\u662f\u6bcf\u4e2a\u7ec4\u4ef6\u4e2d\u53c8\u9700\u8981\u58f0\u660e\u4e00\u6b21\uff1f\n\u521a\u4ece\u540e\u7aef\u5b66\u4e60\u524d\u7aef\uff0c\u5e0c\u671b\u80fd\u6709\u5927\u54e5\u6307\u70b9\u6307\u70b9\uff0c\u6309\u7167\u540e\u7aef\u7684\u903b\u8f91\uff0c\u8fd9\u4e2a\u8868\u5355\u4e0d\u662f\u5e94\u8be5\u8bbe\u8ba1\u4e3a\u4e00\u4e2a\u5bf9\u8c61\uff0c\u6bcf\u4e2a\u7ec4\u4ef6\u76f4\u63a5\u590d\u7528\u5bf9\u8c61\u5373\u53ef\uff0c\u4f20\u9012\u4e5f\u4f20\u9012\u5bf9\u8c61\uff0c\u4f46\u662f\u73b0\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u51fa\u73b0\u4e0d\u5c11\u95ee\u9898\uff0c\u641c\u4e86\u4e4b\u540e\u597d\u50cf\u8bf4\u4e0d\u80fd\u7ed1\u5b9a js \u7684\u7c7b\u5bf9\u8c61\u3002\u3002\u3002\u3002\u3002\u3002

\u63a5/t/1148645 \u7684 22 \u697c\u8bc4\u8bba\n\u201c\u8fd9\u4e2a\u6211 tm \u592a\u6709\u53d1\u8a00\u6743\u4e86\uff0c7 \u6708\u4e2d\u65ec\u63a5\u5230\u7684\u4e00\u4e2a vue3 \u7684\u4ee3\u7801\uff0c\u4e4b\u524d\u662f\u5916\u5305\u516c\u53f8\u505a\u7684\uff0c\u4e1a\u52a1\u903b\u8f91\u5c31\u662f\u505a\u95ee\u5377\u624b\u673a\u7684\uff0c\u6709\u5f88\u591a\u8868\u5355\uff0ctm \u7684\u72d7\u5916\u5305\u5d3d\u6240\u6709\u903b\u8f91\u5168\u90e8\u90fd\u662f\u76f4\u63a5\u901a\u8fc7\u4e0b\u6807\u6765\u5904\u7406\u8868\u5355\u9879\uff0c\u6211\u521a\u505a\u7684\u9700\u6c42\u78b0\u5de7\u5c31\u662f\u6539\u4e86\u5176\u4e2d\u4e00\u4e2a\u8868\u5355\u7ed3\u6784\uff0c\u6211\u9760\u8fd9\u4e2a\u4ee3\u7801\u7ed9\u6211\u770b\u7684\u5929\u5929\u5728\u5de5\u4f4d\u9a82\uff0c\u4f6c\u4f6c\u4eec\u8d76\u7d27\u4e5f\u5e2e\u6211\u9a82\u51e0\u53e5\u89e3\u89e3\u6c14\u201d

\n
1. \u5230\u5e95\u662f\u600e\u4e48\u60f3\u7684\u76f4\u63a5\u901a\u8fc7\u4e0b\u6807\u8bbf\u95ee\u8868\u5355\u9879\uff0c\u6839\u672c\u4e0d\u8003\u8651\u540e\u671f\u7ef4\u62a4\u5417?
\n
2. \u4e3a\u4ec0\u4e48\u4e0d\u8003\u8651\u505a\u6210\u914d\u7f6e\u9879\u81ea\u52a8\u9002\u914d\u6bcf\u4e2a\u8868\u5355\uff0c\u800c\u4e0d\u662f\u6bcf\u4e2a\u8868\u5355\u90fd\u5bf9\u5e94\u4e00\u4e2a\u9875\u9762\u6587\u4ef6\uff0c\u6bcf\u4e2a\u6587\u4ef6\u5197\u4f59\u5de8\u5927\u3002
\n
3. \u63a5\u53e3\u8c03\u7528\u4e3a\u4ec0\u4e48\u4e0d\u80fd\u505a\u5168\u5c40 api \uff0ctm \u590d\u5236\u51e0\u5341\u904d\u3002
\n
4. \u53d8\u91cf\u80fd\u4e0d\u80fd\u4e0d\u8981 abc 123 \u7684\u554a\u3002
\n
5. 24 \u5e74\u7684\u9879\u76ee\uff0c\u90fd 24 \u5e74\u4e86\u4e3a\u4ec0\u4e48\u8fd8\u8981\u7528\u539f\u751f wx \u5f00\u53d1\u554a\u3002
\n

\u4e3b\u8981\u662f\u9488\u5bf9\u8fd9\u4e2a\u9879\u76ee\u4ee3\u7801\u8bc4\u4ef7\uff0c\u6ca1\u6709\u9488\u5bf9\u5916\u5305\u5d3d\u7684\u610f\u601d\u3002\n\u603b\u4e4b\u662f\u95f9\u9ebb\u4e86\uff0c\u770b\u7740\u5c31\u5934\u75bc

\u9644\u90e8\u5206\u4ee3\u7801\u622a\u56fe\uff0c\u5f88\u591a\u5730\u65b9\u90fd\u5f88\u79bb\u8c31

\u840c\u65b0\u5c0f\u767d\u8bf7\u6559\uff0c\u4e0d\u592a\u660e\u767d\u4e3a\u4ec0\u4e48\u4f7f\u7528 ref \u6570\u636e\u53ef\u4ee5\u53cc\u5411\u7ed1\u5b9a\uff0c\u4f7f\u7528 reactive \u6570\u636e\u65e0\u6cd5\u53cc\u5411\u7ed1\u5b9a\uff1f\u662f\u6211\u7528\u6cd5\u4e0d\u5bf9\u5417\uff1f
\n\u5230\u5e95\u4ec0\u4e48\u65f6\u5019\u5e94\u8be5\u4f7f\u7528 ref \u4ec0\u4e48\u65f6\u5019\u5e94\u8be5\u4f7f\u7528 reactive \u5462\uff1f

https://play.vuejs.org/#eNp9U8Fu00AQ/ZXRXmJEsIVAHCInElQ9wAEqijj54tqTdMt6d2Wv3UCUOzeEOMAHIHFC8AP8De13MDubpNu09GLtzrx582b9ZiWeWpsOPYqJyLuqldZBh663s0LLxprWwQpanI/pU1ZODghrmLemgREVjXagA9PYTTzN/MVzUrrQWQaV0R3RuvcKD4yeywVMPWey4izMjXbH8gNO4OETjqzvFfr2miDBF+6X+Zo8CxOQdro4bKwqHdINILcwYbJpIVZRadQg3UbhPozscrQuxOzy4+fLb78ufn79++dLnvlHISqedXjQmBoV0UUUhYCMMHkW9RZj4Tqaxnc464ymh2b5haiIRypsX1knadpCTIAzPlcqZc5fcMy1PY638eoUq3e3xM+6pY8V4qjFDtsBC7HLubJdoAvpw+OXuKTzLklT9IrQdyRfY2dU7zUG2LNe1yQ7wrHa5+wEqRdvusOlQ91th/JCPXLN+EKQM/wT/m/0K7mP0sdcR3+XXnHrqn2ngir1gv6DI5rrrg1uGcN56arTPd8SUDts52WFcBy5bM9aum9OaFRNGuKKo9bYLmDZBm9L1RM6IuKSYGLL4CnUOJcauTTn7ywh08a0h410G9qE6Ea9rclEk6sWozEMN1rdm8BgZB11ROLZNWTSnL+bhgGkTFWqG7uVR8SzZAVpmrL+9EoE72eh+VWTiGUMicbzjSaYzsIgXkty6yRMvqtg1rWP1og2uIZjd211LQc+0FGVJ6hmYVUvvv+4+P0pz0JsA5Da9i7a20j5bvU3C0zoLFBfX+X1P0Ky0Q8=

\u76f4\u63a5\u5c55\u793a\u4ee3\u7801\uff1a

App.vue

<script setup>\nimport { ref, reactive } from 'vue'\nimport Comp from './Comp.vue'\n\n// const styleCOnfig= ref({\n// fontSize: 16\n// })\nconst styleCOnfig= reactive({\n fontSize: 16\n})\n</script>\n\n<template>\n <p :style=\"{ fontSize: styleConfig.fontSize + 'px'}\">\u6211\u662f\u5b57\u4f53</p>\n <Comp v-model=\"styleConfig\" />\n</template>\n\n

Comp.vue

<script setup lang=\"ts\">\nimport { reactive, watch } from 'vue'\n\ninterface StyleConfig {\n fontSize: number\n}\n\ninterface Props {\n modelValue: StyleConfig\n}\nconst props = defineProps<Props>()\n\ninterface Emits {\n (e: 'update:modelValue', value: StyleConfig): void\n}\nconst emit = defineEmits<Emits>()\n\nconst localCOnfig= reactive<StyleConfig>({ ...props.modelValue })\n\nwatch(localConfig, (newConfig) => {\n emit('update:modelValue', { ...newConfig })\n}, { deep: true })\n</script>\n\n<template>\n <div>\n <label>\u5b57\u4f53\u5927\u5c0f</label>\n <input v-model=\"localConfig.fontSize\" />\n </div>\n</template>\n

\u6700\u8fd1\u521a\u7528\u4e0a Vue3, \u6211\u5728\u5199 Vue3 \u7684\u65f6\u5019\u603b\u611f\u89c9\u4ee3\u7801\u975e\u5e38\u7684\u6563, \u7a0d\u5fae\u590d\u6742\u7684\u9875\u9762\u91cc, \u5c31\u662f\u4e00\u5806\u7684 const ref, computed, \u66f4\u4e0d\u7528\u8bf4\u4e00\u5806\u7684 xxxLoading, xxxVisible, showXXX, hideXXX, \u611f\u89c9\u5199 Vue2 \u7684\u65f6\u5019\u4e5f\u6ca1\u8fd9\u4e48\u4e71\u8fc7, \u5982\u679c\u8bf4\u8981\u63d0\u53d6\u6240\u8c13 Composiable \u7ec4\u4ef6, \u611f\u89c9\u53c8\u662f\u4e00\u5806\u7684 useXXX, \u5bfc\u51fa\u4e00\u5806\u7684 xxx,xxx \u597d\u50cf\u4e5f\u6ca1\u597d\u5230\u54ea\u91cc\u53bb, \u662f\u6211\u5199\u7684\u59ff\u52bf\u4e0d\u5bf9\u5417? \u8fd9\u65b9\u9762\u7684\u6700\u4f73\u5b9e\u8df5\u5230\u5e95\u662f\u4ec0\u4e48, \u6709\u6ca1\u6709\u54ea\u4e2a\u5f00\u6e90\u9879\u76ee\u8ba9\u6211\u53c2\u8003\u53c2\u8003?

\u540e\u7aef\u8bed\u8a00 NodeJs \u540e\u7aef\u6846\u67b6 ExpressJs \u6570\u636e\u5e93 MySql ui \u6846\u67b6 Vue\n\u57fa\u4e8e\u8fd9\u6837\u7684\u67b6\u6784\u5199 \u9700\u8981\u591a\u5c11\u6210\u672c \u80fd\u641e\u4e0b\u6765\n\u8981\u662f\u81ea\u5df1\u5f00\u53d1 \u9700\u8981\u4ece\u54ea\u5b66\u8d77

VueConf 2025 \u5c06\u4e8e 7 \u6708 12 \u65e5\u5728\u6df1\u5733\u4e3e\u529e\u3002\u672c\u6b21\u4f1a\u8bae\u5171\u6709 11 \u4f4d\u6f14\u8bb2\u5609\u5bbe\u7ed9\u5927\u5bb6\u5e26\u6765\u5206\u4eab\uff01

\u5927\u4f1a\u7f51\u7ad9\uff1a https://vueconf.cn

Vue.js & Vite \u4f5c\u8005\u5c06\u7ed9\u5927\u5bb6\u5e26\u6765\u4e3b\u9898\u6f14\u8bb2\u3002

Vue & Nuxt & Vite \u6838\u5fc3\u56e2\u961f\u6210\u5458 Anthony Fu \u5c06\u51fa\u5e2d\u672c\u6b21\u5927\u4f1a\uff0c\u4ed6\u5c06\u7ed9\u5927\u5bb6\u5206\u4eab Vite DevTools \u8bbe\u8ba1\u54f2\u5b66\u7684\u6700\u65b0\u8fdb\u5c55\uff0c\u4ee5\u53ca\u672a\u6765\u5c55\u671b\u3002

Vite \u6838\u5fc3\u56e2\u961f\u6210\u5458 Matias Capeletto \uff08 patak \uff09 \u5c06\u901a\u8fc7\u8fdc\u7a0b\u7684\u65b9\u5f0f\u7ed9\u5927\u5bb6\u5e26\u6765\u4e3b\u9898\u4e3a\u300a The first 5 years of Vite \u300b\u7684\u6f14\u8bb2\u3002

Vue.js \u6838\u5fc3\u56e2\u961f\u6210\u5458\uff0cVue Router \u3001Pinia \u3001VueFire \u7b49\u5e93\u7684\u4f5c\u8005 Eduardo (posva) \u5c06\u51fa\u5e2d\u672c\u6b21\u4f1a\u8bae\uff0c\u7ed9\u5927\u5bb6\u5e26\u6765\u4e3b\u9898\u4e3a\u300a\u6d41\u7545\u7684 UI \u4e0e\u5f02\u6b65\u72b6\u6001\u7ba1\u7406\u300b\u7684\u6f14\u8bb2\u3002

Vue & Vue Macros & Vue Language Tools \u56e2\u961f\u6210\u5458\u3001TS Macro & Vue JSX Vapor \u4f5c\u8005\u9ad8\u98de\u5c06\u51fa\u5e2d\u672c\u6b21\u4f1a\u8bae\uff0c\u7ed9\u5927\u5bb6\u5e26\u6765\u4e3b\u9898\u4e3a\u300a Vue JSX Vapor \u7684\u8fdb\u5316\u53f2\u300b\u7684\u6f14\u8bb2\u3002

Vue & VueUse \u6838\u5fc3\u56e2\u961f\u6210\u5458 Doctor Wu \u5c06\u51fa\u5e2d\u672c\u6b21\u4f1a\u8bae\uff0c\u7ed9\u5927\u5bb6\u5e26\u6765\u4e3b\u9898\u4e3a\u300a Alien Signals\uff1aVue \u54cd\u5e94\u5f0f\u6f14\u8fdb\u4e0e\u6700\u901f Signals \u5b9e\u8df5\u300b\u7684\u6f14\u8bb2\u3002

Vue.js \u6838\u5fc3\u56e2\u961f\u6210\u5458\uff0cVolar.js & Vue Language Tools & alien-signals \u4f5c\u8005 Johnson \u5c06\u51fa\u5e2d\u672c\u6b21\u4f1a\u8bae\uff0c\u5e76\u5e26\u6765\u4e3b\u9898\u4e3a\u300a TSSLint \u5982\u4f55\u6d88\u9664 linter \u5728 IDE \u4e2d\u6700\u5927\u7684\u9690\u6027\u5f00\u9500\u300b\u7684\u6f14\u8bb2\u3002\u672c\u6b21\u5206\u4eab\u5c06\u4f1a\u4ecb\u7ecd TSSLint \u5982\u4f55\u901a\u8fc7\u91cd\u65b0\u8bbe\u8ba1\uff0c\u89e3\u51b3\u4e86\u4e0a\u8ff0\u6027\u80fd\u95ee\u9898\u3002

\u817e\u8baf\u9ad8\u7ea7\u524d\u7aef\u5de5\u7a0b\u5e08\u5415\u6d0b\u5c06\u51fa\u5e2d\u672c\u6b21\u4f1a\u8bae\uff0c\u7ed9\u5927\u5bb6\u5e26\u6765\u4e3b\u9898\u4e3a\u300a\u6d4f\u89c8\u5668\u91cc\u6784\u5efa Vue\uff1a\u6e10\u8fdb\u5f0f AI+\u4f4e\u4ee3\u7801\u5f00\u53d1\u4f53\u9a8c\u300b\u7684\u6f14\u8bb2\u3002

Vue.js \u6838\u5fc3\u56e2\u961f\u6210\u5458\uff0ctsdown / Vue Macros \u4f5c\u8005\u4e09\u54b2\u667a\u5b50\u5c06\u51fa\u5e2d\u672c\u6b21\u4f1a\u8bae\uff0c\u7ed9\u5927\u5bb6\u5e26\u6765\u4e3b\u9898\u4e3a\u300a tsdown\uff1a\u5e93\u5e93\u5305\u4e00\u5207\u300b\u7684\u6f14\u8bb2\u3002

Vue Vine \u4f5c\u8005\u6c88\u9752\u5ddd\u5c06\u7ed9\u5927\u5bb6\u5e26\u6765\u4e3b\u9898\u4e3a\u300a Vue Vine 1.0 \u5347\u7ea7\u62a5\u544a\u300b\u7684\u5206\u4eab\u3002

Vue.js \u56e2\u961f\u6210\u5458\u3001Vue Language Tools \u6838\u5fc3\u8d21\u732e\u8005\u5c71\u5439\u8272\u5fa1\u5b88\u5c06\u51fa\u5e2d\u672c\u6b21\u4f1a\u8bae\uff0c\u7ed9\u5927\u5bb6\u5e26\u6765\u4e3b\u9898\u300a Vue Language Tools \u7684\u589e\u91cf\u66f4\u65b0\u673a\u5236\u89e3\u6790\u300b\u7684\u5206\u4eab\u3002

vue3+ElInput \u65e0\u6cd5\u8f93\u5165\u7684\u95ee\u9898

\u5f00\u7bc7

\u5199\u4e1a\u52a1\u7684\u65f6\u5019\u53d1\u73b0\uff0c\u56e0\u4e3a\u60f3\u5077\u61d2\u561b\uff0c\u76f4\u63a5\u5c31\u5728\u60f3\u5728\u5916\u90e8\u53bb\u5b9a\u4e49\u4e00\u4e2a\u53d8\u91cf\uff0c\u7136\u540e\u5199\u4e2a\u5f39\u7a97\u91cc\uff08 tsx \uff09\u7684 el-input \uff0c\u800c\u4e0d\u662f\u53c8\u53bb\u5199\u4e2a vue \u9875\u9762\uff0c\u4f46\u53d1\u73b0\u5c31\u8f93\u5165\u4e0d\u4e86\u4e86\uff0c\u800c\u4e14\u8ddf\u7740\u6587\u6863\u5199 textarea \u6ca1\u6709\u5b57\u6570\u7edf\u8ba1\u3002\u5c31\u4e24\u4e2a\u95ee\u9898\u561b

1.el-input \u65e0\u6cd5\u8f93\u5165

TSX \u7684\u5199\u6cd5\u561b\uff0c\u6700\u5f00\u59cb\u6211\u662f\u8fd9\u4e48\u5199\u7684

const auditText = ref('');\n // \u5ffd\u7565\u4ee3\u7801<ElInputmodel-value={auditText.value}autosize={{ minRows: 5, maxRows: 10 }}\n max-length={50}placeholder=\"\u8bf7\u586b\u5199\u5ba1\u6838\u4e0d\u901a\u8fc7\u539f\u56e0\uff08\u6700\u5c11\u4e94\u4e2a\u5b57\uff09\"show-word-limittype=\"textarea\"\n />\n

\u7136\u540e\u53d1\u73b0\u771f\u662f\u4e00\u70b9\u53cd\u5e94\u6ca1\u6709\u554a\uff0c\u7136\u540e\u770b\u4e86\u4e0b\u6587\u6863\u4e0a\u9762\u7684\u8fd9\u53e5\u8bdd

const auditText = ref<string>('');\nfunction test(value) {\n console.log(value);\n auditText.value = value;\n}\n//\u5ffd\u7565\u4ee3\u7801\n<ElInput\n model-value={auditText.value}\n OnInput={test}\n autosize={{ minRows: 5, maxRows: 10 }}\n max-length={50}\n placeholder=\"\u8bf7\u586b\u5199\u5ba1\u6838\u4e0d\u901a\u8fc7\u539f\u56e0\uff08\u6700\u5c11\u4e94\u4e2a\u5b57\uff09\"\n show-word-limit\n type=\"textarea\"\n/>\n

\u4f46\u662f\u90a3\u5176\u5b9e\u4e5f\u4e0d\u7528\u8fd9\u4e48\u9ebb\u70e6\u4eba\u6587\u6863\u91cc\u4e5f\u5199\u5f97\u5f88\u6e05\u695a\u4e86v-model\u5c31\u884c

<ElInput\n v-model={auditText.value}\n autosize={{ minRows: 5, maxRows: 10 }}\n max-length={50}\n placeholder=\"\u8bf7\u586b\u5199\u5ba1\u6838\u4e0d\u901a\u8fc7\u539f\u56e0\uff08\u6700\u5c11\u4e94\u4e2a\u5b57\uff09\"\n show-word-limit\n type=\"textarea\"\n/>\n

2.\u5b57\u6570\u7edf\u8ba1\u4e0d\u89c1\u4e86

\u5148\u770b\u770b\u5b98\u7f51\u7684\u5199\u6cd5\uff0c\u5b9a\u4e49\u4e2a maxlength \u518d\u5b9a\u4e49\u4e2a show-word-limit \u5c31\u6709\u5b57\u6570\u7edf\u8ba1\u4e86

\u53ef\u662f\u5982\u679c\u6211\u5728 tsx \u91cc\u6309\u5b98\u7f51\u8fd9\u4e48\u5199\u4f1a\u53d1\u751f\u4ec0\u4e48\u90a3

\u679c\u7136\u5417,\u4e0d\u662f props \u7684\u5c5e\u6027\u5c31\u4e0d\u7528\u5199\u4e86,\u539f\u751f\u4e8b\u4ef6\u662f\u76f4\u63a5\u7ed1\u5b9a\u5728 attrs \u4e0a\u7ed9 input \u6807\u7b7e\u7684\uff0c\u6240\u4ee5\u5199\u5728 tsx \u91cc\u4f1a\u62a5\u9519\uff0c\u5199\u5728\u6a21\u7248\u91cc\u4e0d\u4f1a\u3002\u6682\u65f6\u5c31\u5ffd\u7565\u8fd9\u4e00\u884c\u68c0\u67e5\u628a~~~\u3002

\u603b\u7ed3

\u5e73\u65f6\u4f1a\u8bb0\u5f55\u4e00\u4e9b\u7b80\u5355\u4f46\u597d\u73a9\u7684\u95ee\u9898\uff0c\u6c34\u4e00\u7bc7 vue \uff0c\u6bcf\u5929\u4e00\u7bc7 vue \u4e00\u7bc7 react \u3002

\u5173\u4e8e\u6211\u7684\u4e00\u4e9b\u4ecb\u7ecd

RT \uff0c\u672c\u4eba\u505a\u4e86\u6b3e\u5c0f\u6e38\u620f\uff0c\u628a\u73a9\u5bb6\u4fe1\u606f\u5b58\u5230\u4e86 store \u91cc\u3002\u4f46\u662f\u53d1\u73b0\u5982\u679c\u67d0\u4e2a\u73a9\u5bb6\u610f\u5916\u9000\u51fa\u4e86\uff0c\u4e14\u6e38\u620f\u5bf9\u5c40\u7ed3\u675f\u4e86\uff0c\u5f53\u8fd9\u4e2a\u73a9\u5bb6\u518d\u6253\u5f00\u9875\u9762\u7684\u65f6\u5019\u8fd8\u4f1a\u88ab\u8bc6\u522b\u4e3a\u5728\u6e38\u620f\u4e2d\uff0c\u56e0\u4e3a\u4ed6\u6ca1\u6709\u7ecf\u5386\u6b63\u5e38\u7684\u7ed3\u675f\u6e38\u620f\u4ee3\u7801\uff0c\u6ca1\u6709\u53bb\u79fb\u9664\u6389\u5931\u6548\u7684\u73a9\u5bb6\u4fe1\u606f\u3002\u5f53\u7136\u6bcf\u6b21\u91cd\u8f7d\u6e38\u620f\u7684\u65f6\u5019\u7528\u73a9\u5bb6\u4fe1\u606f\u53bb\u6838\u5b9e\u6e38\u620f\u72b6\u6001\u4e5f\u53ef\u4ee5\u3002\u4f46\u662f\u6211\u60f3\u77e5\u9053\u8fd9\u4e2a\u6301\u4e45\u5316\u5230\u5e95\u80fd\u4e0d\u80fd\u8bbe\u7f6e\u6709\u6548\u671f

\u6709\u7ecf\u9a8c\u7684\u8001\u54e5\u7ed9\u70b9\u63a8\u8350\u3002\u76ee\u524d\u770b\u4e86\u51e0\u4e2a\uff0c\u5728\u8bbe\u8ba1\u5668/Builder \u4e0a\u90fd\u662f\u6536\u8d39\u7684\u3002\u867d\u7136\u65e0\u53ef\u539a\u975e\uff0c\u4f46\u662f\u6bd4\u8f83\u9700\u8981\u4e00\u4e2a\u514d\u8d39/\u5546\u4e1a\u53cb\u597d\u7684\u3002

\u9700\u6c42\u662f\u4e8c\u6b21\u5c01\u88c5\uff0c\u7528\u5728\u591a\u4e2a\u9879\u76ee\u91cc\uff0c\u8bbe\u8ba1\u5668/Builder \u662f\u5fc5\u8981\u7684\u3002

\u5982\u679c\u81ea\u5df1\u5f00\u53d1\u5de5\u4f5c\u91cf\u53c8\u6709\u70b9\u5927\uff0c\u5bf9\u4e8e\u6211\u6765\u8bf4\u80fd\u505a\u96c6\u6210\u5c31\u7edd\u4e0d\u81ea\u5df1\u5f00\u53d1\u3002

\u8ba9 AI \u7edf\u8ba1\u7684 \u6c7d\u6c34\u97f3\u4e50\u7535\u8111\u7248\u7528\u4e86\u54ea\u4e9b\u5f00\u6e90\u7ec4\u4ef6

\n
1. \n

   @electron/osx-sign

   \n
   \n
   • \u4f5c\u7528: \u7528\u4e8e\u5728 macOS \u7cfb\u7edf\u4e0a\u5bf9 Electron \u5e94\u7528\u7a0b\u5e8f\u8fdb\u884c\u4ee3\u7801\u7b7e\u540d\u7684\u5de5\u5177\u3002
   \n
   \n
\n
2. \n

   electron-winstaller

   \n
   \n
   • \u4f5c\u7528: \u7528\u4e8e\u4e3a Electron \u5e94\u7528\u7a0b\u5e8f\u521b\u5efa Windows \u5b89\u88c5\u7a0b\u5e8f (Squirrel.Windows installer)\u3002
   \n
   \n
\n
3. \n

   dayjs

   \n
   \n
   • \u4f5c\u7528: \u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684 Javascript \u65e5\u671f\u65f6\u95f4\u5e93\uff0c\u7528\u4e8e\u89e3\u6790\u3001\u6821\u9a8c\u3001\u64cd\u4f5c\u548c\u663e\u793a\u65e5\u671f\u548c\u65f6\u95f4\u3002
   \n
   \n
\n
4. \n

   immer

   \n
   \n
   • \u4f5c\u7528: \u4e00\u4e2a Javascript \u5e93\uff0c\u901a\u8fc7\u5728\u201c\u8349\u7a3f\u72b6\u6001\u201d\uff08 draft state \uff09\u4e0a\u8fdb\u884c\u4fee\u6539\u6765\u521b\u5efa\u4e0b\u4e00\u4e2a\u4e0d\u53ef\u53d8\u7684\u72b6\u6001\uff0c\u7b80\u5316\u4e86\u4e0d\u53ef\u53d8\u6570\u636e\u7684\u5904\u7406\u3002
   \n
   \n
\n
5. \n

   minimist

   \n
   \n
   • \u4f5c\u7528: \u4e00\u4e2a\u7528\u4e8e Node.js \u7684\u547d\u4ee4\u884c\u53c2\u6570\u89e3\u6790\u5668\u3002
   \n
   \n
\n
6. \n

   nanoid

   \n
   \n
   • \u4f5c\u7528: \u4e00\u4e2a\u5c0f\u5de7\u3001\u5b89\u5168\u3001URL \u53cb\u597d\u7684\u552f\u4e00\u5b57\u7b26\u4e32 ID \u751f\u6210\u5668\u3002
   \n
   \n
\n
7. \n

   web-vitals

   \n
   \n
   • \u4f5c\u7528: Google \u63a8\u51fa\u7684\u4e00\u4e2a\u5e93\uff0c\u7528\u4e8e\u6d4b\u91cf\u548c\u4e0a\u62a5\u7f51\u9875\u6838\u5fc3\u6027\u80fd\u6307\u6807 (Core Web Vitals)\uff0c\u5982 LCP, FID, CLS \u3002
   \n
   \n
\n
8. \n

   axios

   \n
   \n
   • \u4f5c\u7528: \u4e00\u4e2a\u57fa\u4e8e Promise \u7684 HTTP \u5ba2\u6237\u7aef\uff0c\u53ef\u7528\u4e8e\u6d4f\u89c8\u5668\u548c Node.js \u73af\u5883\u4e2d\u53d1\u9001\u7f51\u7edc\u8bf7\u6c42\u3002
   \n
   \n
\n
9. \n

   chalk

   \n
   \n
   • \u4f5c\u7528: \u4e00\u4e2a\u7528\u4e8e\u5728\u7ec8\u7aef\uff08\u547d\u4ee4\u884c\uff09\u4e2d\u4e3a\u6587\u672c\u6dfb\u52a0\u989c\u8272\u548c\u6837\u5f0f\u7684\u5e93\u3002
   \n
   \n
\n
10. \n

    electron-squirrel-startup

    \n
    \n
    • \u4f5c\u7528: \u7528\u4e8e\u5904\u7406 Electron \u5e94\u7528\u7a0b\u5e8f\u901a\u8fc7 Squirrel.Windows \u5b89\u88c5\u548c\u542f\u52a8\u65f6\u7684\u76f8\u5173\u4e8b\u4ef6\u3002
    \n
    \n
\n
11. \n

    multistream

    \n
    \n
    • \u4f5c\u7528: \u5c06\u591a\u4e2a\u53ef\u8bfb\u6d41\uff08 readable streams \uff09\u5408\u5e76\u6210\u4e00\u4e2a\u5355\u4e00\u7684\u6d41\u3002
    \n
    \n
\n
12. \n

    inquirer

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u5e38\u7528\u7684\u4ea4\u4e92\u5f0f\u547d\u4ee4\u884c\u7528\u6237\u754c\u9762\u96c6\u5408\uff0c\u7528\u4e8e\u521b\u5efa\u590d\u6742\u7684\u547d\u4ee4\u884c\u4ea4\u4e92\u63d0\u793a\u3002
    \n
    \n
\n
13. \n

    sanitize-html

    \n
    \n
    • \u4f5c\u7528: \u7528\u4e8e\u6e05\u7406 HTML \u4ee3\u7801\uff0c\u79fb\u9664\u4e0d\u9700\u8981\u7684\u6807\u7b7e\u548c\u5c5e\u6027\uff0c\u9632\u6b62 XSS \u653b\u51fb\u7b49\u3002
    \n
    \n
\n
14. \n

    qrcode

    \n
    \n
    • \u4f5c\u7528: \u7528\u4e8e\u751f\u6210\u4e8c\u7ef4\u7801\u56fe\u50cf\u7684\u5e93\u3002
    \n
    \n
\n
15. \n

    vue

    \n
    \n
    • \u4f5c\u7528: \u4e00\u6b3e\u6d41\u884c\u7684\u6e10\u8fdb\u5f0f Javascript \u6846\u67b6\uff0c\u7528\u4e8e\u6784\u5efa\u7528\u6237\u754c\u9762\u3002
    \n
    \n
\n
16. \n

    @byted-sdk/account-api

    \n
    \n
    • \u4f5c\u7528: \u6839\u636e\u540d\u79f0\u63a8\u6d4b\uff0c\u8fd9\u53ef\u80fd\u662f\u5b57\u8282\u8df3\u52a8\u5185\u90e8\u7528\u4e8e\u8d26\u6237\u76f8\u5173 API \u7684 SDK \u3002
    \n
    \n
\n
17. \n

    vue-router

    \n
    \n
    • \u4f5c\u7528: Vue.js \u5b98\u65b9\u7684\u8def\u7531\u7ba1\u7406\u5668\uff0c\u7528\u4e8e\u6784\u5efa\u5355\u9875\u9762\u5e94\u7528 (SPA)\u3002
    \n
    \n
\n
18. \n

    @vueuse/core

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u5305\u542b Vue \u7ec4\u5408\u5f0f API (Composition API) \u5b9e\u7528\u5de5\u5177\u7684\u96c6\u5408\u5e93\u3002
    \n
    \n
\n
19. \n

    file-uri-to-path

    \n
    \n
    • \u4f5c\u7528: \u5c06 file: \u534f\u8bae\u7684 URI \u8f6c\u6362\u4e3a\u672c\u5730\u6587\u4ef6\u7cfb\u7edf\u8def\u5f84\u3002
    \n
    \n
\n
20. \n

    follow-redirects

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u652f\u6301\u81ea\u52a8\u8ddf\u968f HTTP/HTTPS \u91cd\u5b9a\u5411\u7684 HTTP/HTTPS \u5ba2\u6237\u7aef\u3002
    \n
    \n
\n
21. \n

    proxy-from-env

    \n
    \n
    • \u4f5c\u7528: \u4ece\u73af\u5883\u53d8\u91cf (\u5982 HTTP_PROXY, HTTPS_PROXY, NO_PROXY) \u4e2d\u83b7\u53d6\u4ee3\u7406\u8bbe\u7f6e\u3002
    \n
    \n
\n
22. \n

    form-data

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u7528\u4e8e\u521b\u5efa multipart/form-data \u7c7b\u578b\u6570\u636e\u6d41\u7684\u5e93\uff0c\u5e38\u7528\u4e8e\u6587\u4ef6\u4e0a\u4f20\u3002
    \n
    \n
\n
23. \n

    asynckit

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u7528\u4e8e\u5f02\u6b65\u64cd\u4f5c\u7684\u6781\u7b80\u62bd\u8c61\u5c42\uff0c\u4e3a\u6d41\u3001Promise \u548c\u56de\u8c03\u63d0\u4f9b\u4e00\u81f4\u7684 API \u3002
    \n
    \n
\n
24. \n

    combined-stream

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u53ef\u4ee5\u6309\u987a\u5e8f\u4ece\u4e00\u7cfb\u5217\u53ef\u8bfb\u6d41\u4e2d\u53d1\u51fa\u6570\u636e\u7684\u6d41\u3002
    \n
    \n
\n
25. \n

    mime-types

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u5de5\u5177\u5e93\uff0c\u7528\u4e8e\u6839\u636e\u6587\u4ef6\u6269\u5c55\u540d\u67e5\u627e MIME \u7c7b\u578b\uff0c\u53cd\u4e4b\u4ea6\u7136\u3002
    \n
    \n
\n
26. \n

    delayed-stream

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u53ef\u4ee5\u5ef6\u8fdf\u6d41\u4e8b\u4ef6\uff08\u7279\u522b\u662f data \u4e8b\u4ef6\uff09\u76f4\u5230\u8c03\u7528 resume() \u65b9\u6cd5\u7684\u6d41\u3002
    \n
    \n
\n
27. \n

    mime-db

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u5168\u9762\u7684 MIME \u7c7b\u578b\u6570\u636e\u5e93\u3002
    \n
    \n
\n
28. \n

    supports-color

    \n
    \n
    • \u4f5c\u7528: \u68c0\u6d4b\u7ec8\u7aef\uff08\u547d\u4ee4\u884c\u73af\u5883\uff09\u662f\u5426\u652f\u6301\u989c\u8272\u4ee5\u53ca\u652f\u6301\u7684\u7ea7\u522b\u3002
    \n
    \n
\n
29. \n

    ansi-styles

    \n
    \n
    • \u4f5c\u7528: \u63d0\u4f9b ANSI \u8f6c\u4e49\u7801\uff0c\u7528\u4e8e\u5728\u7ec8\u7aef\u4e2d\u8bbe\u7f6e\u6587\u672c\u6837\u5f0f\uff08\u5982\u989c\u8272\u3001\u80cc\u666f\u8272\u3001\u52a0\u7c97\u7b49\uff09\u3002
    \n
    \n
\n
30. \n

    has-flag

    \n
    \n
    • \u4f5c\u7528: \u68c0\u67e5\u547d\u4ee4\u884c\u53c2\u6570\u4e2d\u662f\u5426\u5b58\u5728\u67d0\u4e2a\u6807\u5fd7\uff08 flag \uff09\u3002
    \n
    \n
\n
31. \n

    color-convert

    \n
    \n
    • \u4f5c\u7528: \u63d0\u4f9b\u989c\u8272\u503c\u8f6c\u6362\u529f\u80fd\uff0c\u4f8b\u5982\u5728 RGB, HSL, HEX \u7b49\u4e0d\u540c\u989c\u8272\u6a21\u578b\u4e4b\u95f4\u8f6c\u6362\u3002
    \n
    \n
\n
32. \n

    color-name

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u5305\u542b\u989c\u8272\u540d\u79f0\u53ca\u5176\u5bf9\u5e94\u5341\u516d\u8fdb\u5236\u503c\u7684\u5217\u8868\u3002
    \n
    \n
\n
33. \n

    debug

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u5c0f\u578b\u7684 Javascript \u8c03\u8bd5\u5de5\u5177\uff0c\u53ef\u4ee5\u901a\u8fc7\u73af\u5883\u53d8\u91cf\u63a7\u5236\u8c03\u8bd5\u4fe1\u606f\u7684\u8f93\u51fa\u3002
    \n
    \n
\n
34. \n

    once

    \n
    \n
    • \u4f5c\u7528: \u786e\u4fdd\u4e00\u4e2a\u51fd\u6570\u53ea\u88ab\u8c03\u7528\u4e00\u6b21\u3002
    \n
    \n
\n
35. \n

    readable-stream

    \n
    \n
    • \u4f5c\u7528: Node.js \u6838\u5fc3 stream \u6a21\u5757\u4e2d\u53ef\u8bfb\u6d41\u63a5\u53e3\u7684\u5b9e\u73b0\uff0c\u53ef\u7528\u4e8e\u65e7\u7248 Node.js \u6216\u6d4f\u89c8\u5668\u73af\u5883\u3002
    \n
    \n
\n
36. \n

    wrappy

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u7528\u4e8e\u5305\u88c5\u51fd\u6570\u7684\u5de5\u5177\u3002
    \n
    \n
\n
37. \n

    inherits

    \n
    \n
    • \u4f5c\u7528: Node.js util.inherits \u65b9\u6cd5\u7684\u72ec\u7acb\u7248\u672c\uff0c\u7528\u4e8e\u5b9e\u73b0\u5bf9\u8c61\u95f4\u7684\u539f\u578b\u7ee7\u627f\u3002
    \n
    \n
\n
38. \n

    util-deprecate

    \n
    \n
    • \u4f5c\u7528: Node.js util.deprecate \u65b9\u6cd5\u7684\u72ec\u7acb\u7248\u672c\uff0c\u7528\u4e8e\u6807\u8bb0\u51fd\u6570\u6216\u65b9\u6cd5\u4e3a\u5df2\u5e9f\u5f03\u3002
    \n
    \n
\n
39. \n

    string_decoder

    \n
    \n
    • \u4f5c\u7528: Node.js string_decoder \u6a21\u5757\u7684\u72ec\u7acb\u7248\u672c\uff0c\u7528\u4e8e\u5c06 Buffer \u5bf9\u8c61\u89e3\u7801\u4e3a\u5b57\u7b26\u4e32\u3002
    \n
    \n
\n
40. \n

    safe-buffer

    \n
    \n
    • \u4f5c\u7528: \u63d0\u4f9b\u4e00\u4e2a\u66f4\u5b89\u5168\u7684 Buffer \u6784\u9020\u51fd\u6570\uff0c\u4ee5\u907f\u514d\u4e00\u4e9b\u6f5c\u5728\u7684\u5b89\u5168\u95ee\u9898\u3002
    \n
    \n
\n
41. \n

    cli-width

    \n
    \n
    • \u4f5c\u7528: \u83b7\u53d6\u7ec8\u7aef\uff08\u547d\u4ee4\u884c\u754c\u9762\uff09\u7684\u53ef\u662f\u5bbd\u5ea6\u3002
    \n
    \n
\n
42. \n

    lodash

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u73b0\u4ee3 Javascript \u5de5\u5177\u5e93\uff0c\u63d0\u4f9b\u4e86\u8bb8\u591a\u5b9e\u7528\u7684\u51fd\u6570\uff0c\u7b80\u5316\u5e38\u89c1\u7684\u7f16\u7a0b\u4efb\u52a1\u3002
    \n
    \n
\n
43. \n

    mute-stream

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u53ef\u4ee5\u88ab\u201c\u9759\u97f3\u201d\u7684\u76f4\u901a\u6d41\uff08 passthrough stream \uff09\uff0c\u9759\u97f3\u65f6\u6570\u636e\u4f1a\u4e22\u5931\u3002
    \n
    \n
\n
44. \n

    run-async

    \n
    \n
    • \u4f5c\u7528: \u5141\u8bb8\u5f02\u6b65\u51fd\u6570\u4e32\u884c\u6216\u5e76\u884c\u6267\u884c\u3002
    \n
    \n
\n
45. \n

    ansi-escapes

    \n
    \n
    • \u4f5c\u7528: \u63d0\u4f9b\u7528\u4e8e\u64cd\u4f5c\u7ec8\u7aef\u7684 ANSI \u8f6c\u4e49\u7801\uff0c\u5982\u79fb\u52a8\u5149\u6807\u3001\u6e05\u5c4f\u7b49\u3002
    \n
    \n
\n
46. \n

    figures

    \n
    \n
    • \u4f5c\u7528: \u63d0\u4f9b\u5404\u79cd Unicode \u7b26\u53f7\uff0c\u5e76\u4e3a Windows CMD \u73af\u5883\u63d0\u4f9b\u4e86\u56de\u9000\u65b9\u6848\u3002
    \n
    \n
\n
47. \n

    strip-ansi

    \n
    \n
    • \u4f5c\u7528: \u4ece\u5b57\u7b26\u4e32\u4e2d\u79fb\u9664 ANSI \u8f6c\u4e49\u7801\u3002
    \n
    \n
\n
48. \n

    external-editor

    \n
    \n
    • \u4f5c\u7528: \u5141\u8bb8\u7528\u6237\u4f7f\u7528\u5176\u504f\u597d\u7684\u6587\u672c\u7f16\u8f91\u5668\u6765\u7f16\u8f91\u5b57\u7b26\u4e32\u3002
    \n
    \n
\n
49. \n

    string-width

    \n
    \n
    • \u4f5c\u7528: \u83b7\u53d6\u5b57\u7b26\u4e32\u5728\u7ec8\u7aef\u4e2d\u5b9e\u9645\u663e\u793a\u7684\u5bbd\u5ea6\uff08\u6240\u5360\u5217\u6570\uff09\u3002
    \n
    \n
\n
50. \n

    cli-cursor

    \n
    \n
    • \u4f5c\u7528: \u7528\u4e8e\u63a7\u5236\u547d\u4ee4\u884c\u754c\u9762\u4e2d\u5149\u6807\u7684\u663e\u793a\u548c\u9690\u85cf\u3002
    \n
    \n
\n
51. \n

    wrap-ansi

    \n
    \n
    • \u4f5c\u7528: \u5bf9\u5305\u542b ANSI \u8f6c\u4e49\u7801\u7684\u5b57\u7b26\u4e32\u8fdb\u884c\u81ea\u52a8\u6362\u884c\u3002
    \n
    \n
\n
52. \n

    ora

    \n
    \n
    • \u4f5c\u7528: \u5728\u7ec8\u7aef\u4e2d\u663e\u793a\u4f18\u96c5\u7684\u52a0\u8f7d\u52a8\u753b\uff08 spinners \uff09\u3002
    \n
    \n
\n
53. \n

    escape-string-regexp

    \n
    \n
    • \u4f5c\u7528: \u8f6c\u4e49\u5b57\u7b26\u4e32\u4e2d\u7684\u6b63\u5219\u8868\u8fbe\u5f0f\u7279\u6b8a\u5b57\u7b26\u3002
    \n
    \n
\n
54. \n

    is-unicode-supported

    \n
    \n
    • \u4f5c\u7528: \u68c0\u6d4b\u7ec8\u7aef\u662f\u5426\u652f\u6301 Unicode \u5b57\u7b26\u3002
    \n
    \n
\n
55. \n

    ansi-regex

    \n
    \n
    • \u4f5c\u7528: \u7528\u4e8e\u5339\u914d ANSI \u8f6c\u4e49\u7801\u7684\u6b63\u5219\u8868\u8fbe\u5f0f\u3002
    \n
    \n
\n
56. \n

    chardet

    \n
    \n
    • \u4f5c\u7528: Javascript \u7684\u5b57\u7b26\u7f16\u7801\u68c0\u6d4b\u5668\u3002
    \n
    \n
\n
57. \n

    iconv-lite

    \n
    \n
    • \u4f5c\u7528: \u7eaf Javascript \u5b9e\u73b0\u7684\u5b57\u7b26\u7f16\u7801\u8f6c\u6362\u5e93\u3002
    \n
    \n
\n
58. \n

    tmp

    \n
    \n
    • \u4f5c\u7528: Node.js \u7684\u4e34\u65f6\u6587\u4ef6\u548c\u76ee\u5f55\u521b\u5efa\u5de5\u5177\u3002
    \n
    \n
\n
59. \n

    safer-buffer

    \n
    \n
    • \u4f5c\u7528: \u4e0e safe-buffer \u7c7b\u4f3c\uff0c\u63d0\u4f9b\u66f4\u5b89\u5168\u7684 Buffer API \uff0c\u53ef\u80fd\u662f\u5176\u66ff\u4ee3\u6216\u589e\u5f3a\u7248\u672c\u3002
    \n
    \n
\n
60. \n

    os-tmpdir

    \n
    \n
    • \u4f5c\u7528: Node.js os.tmpdir() \u65b9\u6cd5\u7684 ponyfill \uff08\u817b\u5b50\u811a\u672c\uff09\uff0c\u63d0\u4f9b\u83b7\u53d6\u64cd\u4f5c\u7cfb\u7edf\u4e34\u65f6\u76ee\u5f55\u8def\u5f84\u7684\u529f\u80fd\u3002
    \n
    \n
\n
61. \n

    restore-cursor

    \n
    \n
    • \u4f5c\u7528: \u5728\u7a0b\u5e8f\u9000\u51fa\u65f6\u4f18\u96c5\u5730\u6062\u590d\u547d\u4ee4\u884c\u5149\u6807\u7684\u663e\u793a\u72b6\u6001\u3002
    \n
    \n
\n
62. \n

    onetime

    \n
    \n
    • \u4f5c\u7528: \u786e\u4fdd\u4e00\u4e2a\u51fd\u6570\u53ea\u6267\u884c\u4e00\u6b21\uff08\u4e0e once \u529f\u80fd\u7c7b\u4f3c\uff0c\u4f46\u53ef\u80fd\u6765\u81ea\u4e0d\u540c\u4f5c\u8005\u6216\u6709\u7ec6\u5fae\u5dee\u522b\uff09\u3002
    \n
    \n
\n
63. \n

    mimic-fn

    \n
    \n
    • \u4f5c\u7528: \u4f7f\u4e00\u4e2a\u51fd\u6570\u6a21\u4eff\u53e6\u4e00\u4e2a\u51fd\u6570\u7684\u67d0\u4e9b\u5c5e\u6027\uff08\u5982\u540d\u79f0\u3001\u957f\u5ea6\uff09\u3002
    \n
    \n
\n
64. \n

    cli-spinners

    \n
    \n
    • \u4f5c\u7528: \u63d0\u4f9b\u591a\u79cd\u547d\u4ee4\u884c\u52a0\u8f7d\u52a8\u753b\uff08 spinners \uff09\u6837\u5f0f\u3002
    \n
    \n
\n
65. \n

    is-interactive

    \n
    \n
    • \u4f5c\u7528: \u68c0\u67e5\u5f53\u524d\u8fdb\u7a0b\u662f\u5426\u5728\u4ea4\u4e92\u5f0f\u7ec8\u7aef\u4e2d\u8fd0\u884c\u3002
    \n
    \n
\n
66. \n

    log-symbols

    \n
    \n
    • \u4f5c\u7528: \u4e3a\u65e5\u5fd7\u4fe1\u606f\u63d0\u4f9b\u5404\u79cd\u72b6\u6001\u7b26\u53f7\uff08\u5982 \u2714, \u2139, \u26a0, \u2716\uff09\u3002
    \n
    \n
\n
67. \n

    wcwidth

    \n
    \n
    • \u4f5c\u7528: Javascript \u5b9e\u73b0\u7684 wcwidth() \u51fd\u6570\uff0c\u7528\u4e8e\u8ba1\u7b97\u5bbd\u5b57\u7b26\uff08\u5982\u4e2d\u65e5\u97e9\u5b57\u7b26\uff09\u5728\u7ec8\u7aef\u4e2d\u5360\u636e\u7684\u5217\u6570\u3002
    \n
    \n
\n
68. \n

    defaults

    \n
    \n
    • \u4f5c\u7528: \u5c06\u9ed8\u8ba4\u9009\u9879\u5bf9\u8c61\u5408\u5e76\u5230\u7528\u6237\u63d0\u4f9b\u7684\u9009\u9879\u5bf9\u8c61\u4e2d\u3002
    \n
    \n
\n
69. \n

    clone

    \n
    \n
    • \u4f5c\u7528: \u5bf9 Javascript \u5bf9\u8c61\u8fdb\u884c\u6df1\u62f7\u8d1d\u3002
    \n
    \n
\n
70. \n

    buffer

    \n
    \n
    • \u4f5c\u7528: \u4e3a\u6d4f\u89c8\u5668\u73af\u5883\u63d0\u4f9b Node.js Buffer API \u7684\u5b9e\u73b0\u3002
    \n
    \n
\n
71. \n

    base64-js

    \n
    \n
    • \u4f5c\u7528: \u63d0\u4f9b Base64 \u7f16\u7801\u548c\u89e3\u7801\u529f\u80fd\u3002
    \n
    \n
\n
72. \n

    ieee754

    \n
    \n
    • \u4f5c\u7528: \u7528\u4e8e\u5904\u7406 IEEE754 \u6d6e\u70b9\u6570\u7684\u8bfb\u53d6\u548c\u5199\u5165\u3002
    \n
    \n
\n
73. \n

    is-plain-object

    \n
    \n
    • \u4f5c\u7528: \u5224\u65ad\u4e00\u4e2a\u503c\u662f\u5426\u4e3a\u7eaf\u7cb9\u7684 Javascript \u5bf9\u8c61\uff08\u5373\u901a\u8fc7 {} \u6216 new Object() \u521b\u5efa\u7684\u5bf9\u8c61\uff09\u3002
    \n
    \n
\n
74. \n

    parse-srcset

    \n
    \n
    • \u4f5c\u7528: \u89e3\u6790 HTML <img> \u6807\u7b7e\u7684 srcset \u5c5e\u6027\u3002
    \n
    \n
\n
75. \n

    postcss

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u7528 Javascript \u8f6c\u6362 CSS \u7684\u5de5\u5177\uff0c\u901a\u8fc7\u63d2\u4ef6\u4f53\u7cfb\u53ef\u4ee5\u5b9e\u73b0\u5404\u79cd CSS \u5904\u7406\u529f\u80fd\u3002
    \n
    \n
\n
76. \n

    htmlparser2

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u5bbd\u5bb9\u7684\u3001\u5feb\u901f\u7684 HTML \u548c XML \u89e3\u6790\u5668\u3002
    \n
    \n
\n
77. \n

    picocolors

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u975e\u5e38\u5c0f\u4e14\u5feb\u901f\u7684 Node.js \u5e93\uff0c\u7528\u4e8e\u901a\u8fc7 ANSI \u989c\u8272\u4ee3\u7801\u683c\u5f0f\u5316\u7ec8\u7aef\u6587\u672c\u3002
    \n
    \n
\n
78. \n

    source-map-js

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u7528\u4e8e\u751f\u6210\u548c\u4f7f\u7528 source map \u683c\u5f0f\u7684\u5e93\uff0c\u5e2e\u52a9\u8c03\u8bd5\u538b\u7f29\u6216\u8f6c\u6362\u540e\u7684\u4ee3\u7801\u3002
    \n
    \n
\n
79. \n

    domelementtype

    \n
    \n
    • \u4f5c\u7528: \u4e3a htmlparser2 \u5b9a\u4e49 DOM \u5143\u7d20\u7684\u7c7b\u578b\u3002
    \n
    \n
\n
80. \n

    entities

    \n
    \n
    • \u4f5c\u7528: \u7528\u4e8e HTML/XML \u5b9e\u4f53\u7684\u7f16\u7801\u548c\u89e3\u7801\u3002
    \n
    \n
\n
81. \n

    domhandler

    \n
    \n
    • \u4f5c\u7528: htmlparser2 \u7684\u4e00\u4e2a\u5904\u7406\u5668\uff0c\u7528\u4e8e\u5c06\u89e3\u6790\u7684 HTML/XML \u6784\u5efa\u6210 DOM \u6811\u7ed3\u6784\u3002
    \n
    \n
\n
82. \n

    domutils

    \n
    \n
    • \u4f5c\u7528: \u63d0\u4f9b\u64cd\u4f5c\u7531 domhandler \u521b\u5efa\u7684 DOM \u7ed3\u6784\u7684\u5de5\u5177\u51fd\u6570\u3002
    \n
    \n
\n
83. \n

    dom-serializer

    \n
    \n
    • \u4f5c\u7528: \u5c06 domhandler \u521b\u5efa\u7684 DOM \u6811\u6e32\u67d3\u56de HTML/XML \u5b57\u7b26\u4e32\u3002
    \n
    \n
\n
84. \n

    pngjs

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u7b80\u5355\u7684 PNG \u56fe\u7247\u7f16\u89e3\u7801\u5e93\uff0c\u7528\u4e8e Node.js \u3002
    \n
    \n
\n
85. \n

    yargs

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u5f3a\u5927\u7684\u5e93\uff0c\u7528\u4e8e\u6784\u5efa\u4ea4\u4e92\u5f0f\u7684\u547d\u4ee4\u884c\u5de5\u5177\uff0c\u80fd\u89e3\u6790\u53c2\u6570\u3001\u751f\u6210\u5e2e\u52a9\u4fe1\u606f\u7b49\u3002
    \n
    \n
\n
86. \n

    decamelize

    \n
    \n
    • \u4f5c\u7528: \u5c06\u9a7c\u5cf0\u547d\u540d\uff08 camelCase \uff09\u7684\u5b57\u7b26\u4e32\u8f6c\u6362\u4e3a\u4f7f\u7528\u6307\u5b9a\u5206\u9694\u7b26\u7684\u5c0f\u5199\u5b57\u7b26\u4e32\uff08\u4f8b\u5982 fooBar -> foo_bar\uff09\u3002
    \n
    \n
\n
87. \n

    require-directory

    \n
    \n
    • \u4f5c\u7528: \u9012\u5f52\u5730\u904d\u5386\u6307\u5b9a\u76ee\u5f55\uff0crequire() \u6bcf\u4e2a\u6587\u4ef6\uff0c\u5e76\u8fd4\u56de\u4e00\u4e2a\u5d4c\u5957\u7684\u54c8\u5e0c\u7ed3\u6784\u3002
    \n
    \n
\n
88. \n

    which-module

    \n
    \n
    • \u4f5c\u7528: \u6839\u636e\u7ed9\u5b9a\u7684\u6587\u4ef6\u8def\u5f84\u627e\u5230\u5176\u6240\u5c5e\u7684\u6a21\u5757\u5bf9\u8c61\u3002
    \n
    \n
\n
89. \n

    y18n

    \n
    \n
    • \u4f5c\u7528: yargs \u4f7f\u7528\u7684\u8f7b\u91cf\u7ea7\u56fd\u9645\u5316 (i18n) \u5e93\u3002
    \n
    \n
\n
90. \n

    find-up

    \n
    \n
    • \u4f5c\u7528: \u901a\u8fc7\u5411\u4e0a\u904d\u5386\u7236\u76ee\u5f55\u6765\u67e5\u627e\u6587\u4ef6\u6216\u76ee\u5f55\u3002
    \n
    \n
\n
91. \n

    camelcase

    \n
    \n
    • \u4f5c\u7528: \u5c06\u4f7f\u7528\u77ed\u6a2a\u7ebf\u3001\u70b9\u3001\u4e0b\u5212\u7ebf\u6216\u7a7a\u683c\u5206\u9694\u7684\u5b57\u7b26\u4e32\u8f6c\u6362\u4e3a\u9a7c\u5cf0\u547d\u540d\uff08 camelCase \uff09\u3002
    \n
    \n
\n
92. \n

    is-fullwidth-code-point

    \n
    \n
    • \u4f5c\u7528: \u68c0\u67e5\u4e00\u4e2a\u6570\u5b57\u662f\u5426\u4e3a\u5168\u89d2\u5b57\u7b26\u7684 Unicode \u7801\u70b9\u3002
    \n
    \n
\n
93. \n

    path-exists

    \n
    \n
    • \u4f5c\u7528: \u68c0\u67e5\u6307\u5b9a\u7684\u8def\u5f84\u662f\u5426\u5b58\u5728\u3002
    \n
    \n
\n
94. \n

    locate-path

    \n
    \n
    • \u4f5c\u7528: \u4ece\u591a\u4e2a\u8def\u5f84\u4e2d\u627e\u51fa\u7b2c\u4e00\u4e2a\u5b9e\u9645\u5b58\u5728\u7684\u8def\u5f84\u3002
    \n
    \n
\n
95. \n

    p-locate

    \n
    \n
    • \u4f5c\u7528: \u5f02\u6b65\u5730\u67e5\u627e\u5e76\u8fd4\u56de\u7b2c\u4e00\u4e2a\u6ee1\u8db3\u6d4b\u8bd5\u51fd\u6570\u7684 Promise \u3002
    \n
    \n
\n
96. \n

    p-limit

    \n
    \n
    • \u4f5c\u7528: \u4ee5\u6709\u9650\u7684\u5e76\u53d1\u6570\u8fd0\u884c\u591a\u4e2a\u8fd4\u56de Promise \u7684\u5f02\u6b65\u51fd\u6570\u3002
    \n
    \n
\n
97. \n

    p-try

    \n
    \n
    • \u4f5c\u7528: Promise.try() \u7684 ponyfill \uff0c\u7528\u4e8e\u542f\u52a8\u4e00\u4e2a Promise \u94fe\u3002
    \n
    \n
\n
98. \n

    core-js-pure

    \n
    \n
    • \u4f5c\u7528: Javascript \u7684\u6a21\u5757\u5316\u6807\u51c6\u5e93\uff0c\u5305\u542b ECMAScript \u6700\u65b0\u8349\u6848\u7684 polyfills \uff08\u7eaf\u51c0\u7248\uff0c\u4e0d\u6c61\u67d3\u5168\u5c40\u4f5c\u7528\u57df\uff09\u3002
    \n
    \n
\n
99. \n

    js-cookie

    \n
    \n
    • \u4f5c\u7528: \u4e00\u4e2a\u7b80\u5355\u3001\u8f7b\u91cf\u7ea7\u7684 Javascript API \uff0c\u7528\u4e8e\u5904\u7406\u6d4f\u89c8\u5668 cookie \u3002
    \n
    \n
\n
100. \n

     fast-glob\n* \u4f5c\u7528: \u4e00\u4e2a\u5feb\u901f\u7684 glob \u6a21\u5f0f\u5339\u914d\u5e93\uff08\u7528\u4e8e\u6587\u4ef6\u8def\u5f84\u5339\u914d\uff09\u3002

     \n
\n
101. \n

     @nodelib/fs.stat\n* \u4f5c\u7528: \u63d0\u4f9b\u5177\u6709\u6269\u5c55 API \u7684 fs.stat \u548c fs.lstat \u65b9\u6cd5\u3002

     \n
\n
102. \n

     merge2\n* \u4f5c\u7528: \u5c06\u591a\u4e2a\u6d41\uff08 streams \uff09\u6309\u987a\u5e8f\u6216\u5e76\u884c\u5408\u5e76\u4e3a\u4e00\u4e2a\u6d41\u3002

     \n
\n
103. \n

     glob-parent\n* \u4f5c\u7528: \u4ece glob \u5b57\u7b26\u4e32\u4e2d\u63d0\u53d6\u51fa\u975e\u901a\u914d\u7b26\u90e8\u5206\u7684\u7236\u8def\u5f84\u3002

     \n
\n
104. \n

     @nodelib/fs.walk\n* \u4f5c\u7528: \u63d0\u4f9b\u904d\u5386\u76ee\u5f55\u7684\u65b9\u6cd5\u3002

     \n
\n
105. \n

     micromatch\n* \u4f5c\u7528: \u9ad8\u5ea6\u4f18\u5316\u7684\u901a\u914d\u7b26\u548c glob \u6a21\u5f0f\u5339\u914d\u5e93\u3002

     \n
\n
106. \n

     is-glob\n* \u4f5c\u7528: \u5224\u65ad\u4e00\u4e2a\u5b57\u7b26\u4e32\u662f\u5426\u770b\u8d77\u6765\u50cf\u4e00\u4e2a glob \u6a21\u5f0f\u6216\u6269\u5c55 glob \u6a21\u5f0f\u3002

     \n
\n
107. \n

     is-extglob\n* \u4f5c\u7528: \u5224\u65ad\u4e00\u4e2a\u5b57\u7b26\u4e32\u662f\u5426\u4e3a\u6269\u5c55 glob (extglob) \u6a21\u5f0f\u3002

     \n
\n
108. \n

     fastq\n* \u4f5c\u7528: \u4e00\u4e2a\u5feb\u901f\u3001\u7b80\u5355\u3001\u57fa\u4e8e Promise \u7684\u5f02\u6b65\u961f\u5217\u3002

     \n
\n
109. \n

     @nodelib/fs.scandir\n* \u4f5c\u7528: \u63d0\u4f9b fs.scandir \u65b9\u6cd5\uff0c\u7528\u4e8e\u626b\u63cf\u76ee\u5f55\u5185\u5bb9\u3002

     \n
\n
110. \n

     reusify\n* \u4f5c\u7528: \u9ad8\u6548\u5730\u91cd\u7528\u5bf9\u8c61\uff0c\u51cf\u5c11\u5783\u573e\u56de\u6536\u3002

     \n
\n
111. \n

     run-parallel\n* \u4f5c\u7528: \u5e76\u884c\u8fd0\u884c\u4e00\u7ec4\u51fd\u6570\u3002

     \n
\n
112. \n

     queue-microtask\n* \u4f5c\u7528: \u4e00\u4e2a\u7528\u4e8e\u5c06\u51fd\u6570\u6392\u961f\u5230\u5fae\u4efb\u52a1\uff08 microtask \uff09\u4e2d\u6267\u884c\u7684\u5fae\u578b\u5e93\u3002

     \n
\n
113. \n

     picomatch\n* \u4f5c\u7528: \u4e00\u4e2a\u975e\u5e38\u5feb\u901f\u4e14\u51c6\u786e\u7684 Javascript glob \u6a21\u5f0f\u5339\u914d\u5668\u3002

     \n
\n
114. \n

     braces\n* \u4f5c\u7528: Javascript \u5b9e\u73b0\u7684\u7c7b\u4f3c Bash \u7684\u82b1\u62ec\u53f7\u6269\u5c55\u529f\u80fd\uff08\u4f8b\u5982 a{b,c}d -> abd, acd\uff09\u3002

     \n
\n
115. \n

     fill-range\n* \u4f5c\u7528: \u586b\u5145\u4e00\u4e2a\u6570\u5b57\u6216\u5b57\u6bcd\u8303\u56f4\uff0c\u53ef\u4ee5\u6307\u5b9a\u6b65\u957f\uff0c\u6216\u521b\u5efa\u4e00\u4e2a\u4e0e\u6b63\u5219\u8868\u8fbe\u5f0f\u517c\u5bb9\u7684\u8303\u56f4\u3002

     \n
\n
116. \n

     to-regex-range\n* \u4f5c\u7528: \u4ece\u4e24\u4e2a\u6570\u5b57\u6216\u5b57\u6bcd\u521b\u5efa\u4e00\u4e2a\u4e0e\u6b63\u5219\u8868\u8fbe\u5f0f\u517c\u5bb9\u7684\u8303\u56f4\u3002

     \n
\n
117. \n

     is-number\n* \u4f5c\u7528: \u5224\u65ad\u4e00\u4e2a\u503c\u662f\u5426\u4e3a\u6570\u5b57\u7c7b\u578b\u3002

     \n
\n
118. \n

     node-machine-id\n* \u4f5c\u7528: \u83b7\u53d6\u4e00\u4e2a\u552f\u4e00\u7684\u673a\u5668 ID \u3002

     \n
\n
119. \n

     @vue/shared\n* \u4f5c\u7528: Vue.js \u5185\u90e8\u5305\u5171\u4eab\u7684\u5de5\u5177\u51fd\u6570\u3002

     \n
\n
120. \n

     @vue/runtime-dom\n* \u4f5c\u7528: Vue.js \u9488\u5bf9 DOM \u73af\u5883\u7684\u8fd0\u884c\u65f6\u3002

     \n
\n
121. \n

     @vue/compiler-dom\n* \u4f5c\u7528: Vue.js \u9488\u5bf9 DOM \u73af\u5883\u7684\u7f16\u8bd1\u5668\u3002

     \n
\n
122. \n

     @vue/compiler-sfc\n* \u4f5c\u7528: Vue.js \u5355\u6587\u4ef6\u7ec4\u4ef6 (SFC, .vue \u6587\u4ef6) \u7684\u7f16\u8bd1\u5668\u3002

     \n
\n
123. \n

     @vue/server-renderer\n* \u4f5c\u7528: Vue.js \u7528\u4e8e\u670d\u52a1\u5668\u7aef\u6e32\u67d3 (SSR) \u7684\u5305\u3002

     \n
\n
124. \n

     csstype\n* \u4f5c\u7528: \u4e3a TypeScript \u63d0\u4f9b\u4e25\u683c\u7c7b\u578b\u7684 CSS \u5c5e\u6027\u548c\u503c\u5b9a\u4e49\u3002

     \n
\n
125. \n

     @vue/runtime-core\n* \u4f5c\u7528: Vue.js \u7684\u8fd0\u884c\u65f6\u6838\u5fc3\uff0c\u5e73\u53f0\u65e0\u5173\u3002

     \n
\n
126. \n

     @vue/reactivity\n* \u4f5c\u7528: Vue.js \u7684\u54cd\u5e94\u5f0f\u7cfb\u7edf\u6838\u5fc3\u3002

     \n
\n
127. \n

     @vue/compiler-core\n* \u4f5c\u7528: Vue.js \u7684\u7f16\u8bd1\u5668\u6838\u5fc3\uff0c\u5e73\u53f0\u65e0\u5173\u3002

     \n
\n
128. \n

     estree-walker\n* \u4f5c\u7528: \u7528\u4e8e\u904d\u5386\u7b26\u5408 ESTree \u89c4\u8303\u7684\u62bd\u8c61\u8bed\u6cd5\u6811 (AST)\u3002

     \n
\n
129. \n

     @babel/parser\n* \u4f5c\u7528: Babel \u4f7f\u7528\u7684 Javascript \u89e3\u6790\u5668\uff0c\u53ef\u4ee5\u5c06 Javascript \u4ee3\u7801\u8f6c\u6362\u4e3a AST \u3002

     \n
\n
130. \n

     @babel/types\n* \u4f5c\u7528: Babel \u7528\u4e8e\u5904\u7406 AST \u8282\u70b9\u7684\u5de5\u5177\u51fd\u6570\u548c\u7c7b\u578b\u5b9a\u4e49\u3002

     \n
\n
131. \n

     @babel/helper-string-parser\n* \u4f5c\u7528: Babel \u5185\u90e8\u7528\u4e8e\u89e3\u6790\u5b57\u7b26\u4e32\u7684\u8f85\u52a9\u51fd\u6570\u3002

     \n
\n
132. \n

     @babel/helper-validator-identifier\n* \u4f5c\u7528: Babel \u5185\u90e8\u7528\u4e8e\u9a8c\u8bc1\u6807\u8bc6\u7b26\uff08\u53d8\u91cf\u540d\u7b49\uff09\u7684\u8f85\u52a9\u51fd\u6570\u3002

     \n
\n
133. \n

     to-fast-properties\n* \u4f5c\u7528: \u5f3a\u5236 V8 \u5f15\u64ce\u5bf9\u4e00\u4e2a\u5bf9\u8c61\u4f7f\u7528\u201c\u5feb\u901f\u5c5e\u6027\u201d\u6a21\u5f0f\uff0c\u4ee5\u4f18\u5316\u6027\u80fd\u3002

     \n
\n
134. \n

     magic-string\n* \u4f5c\u7528: \u4e00\u4e2a\u7528\u4e8e\u64cd\u4f5c\u5b57\u7b26\u4e32\u5e76\u80fd\u751f\u6210\u5bf9\u5e94 source map \u7684\u5e93\u3002

     \n
\n
135. \n

     @vue/reactivity-transform\n* \u4f5c\u7528: Vue.js \u5b9e\u9a8c\u6027\u7684\u54cd\u5e94\u5f0f\u8bed\u6cd5\u7cd6\u8f6c\u6362\u3002

     \n
\n
136. \n

     @vue/compiler-ssr\n* \u4f5c\u7528: Vue.js \u9488\u5bf9\u670d\u52a1\u5668\u7aef\u6e32\u67d3 (SSR) \u7684\u7f16\u8bd1\u5668\u3002

     \n
\n
137. \n

     @jridgewell/sourcemap-codec\n* \u4f5c\u7528: \u7528\u4e8e\u7f16\u7801\u548c\u89e3\u7801 sourcemap VLQ (Variable Length Quantity) \u6bb5\u3002

     \n
\n
138. \n

     crypto-js\n* \u4f5c\u7528: \u4e00\u4e2a Javascript \u7684\u52a0\u5bc6\u6807\u51c6\u5e93\uff0c\u652f\u6301\u591a\u79cd\u52a0\u5bc6\u7b97\u6cd5\u548c\u54c8\u5e0c\u51fd\u6570\u3002

     \n
\n
139. \n

     isuri\n* \u4f5c\u7528: \u68c0\u67e5\u4e00\u4e2a\u5b57\u7b26\u4e32\u662f\u5426\u4e3a\u6709\u6548\u7684 URI \u3002

     \n
\n
140. \n

     rfc-3986\n* \u4f5c\u7528: \u9a8c\u8bc1 URI \u662f\u5426\u7b26\u5408 RFC 3986 \u6807\u51c6\u3002

     \n
\n
141. \n

     @vueuse/metadata\n* \u4f5c\u7528: VueUse \u5185\u90e8\u4f7f\u7528\u7684\u5143\u6570\u636e\u3002

     \n
\n
142. \n

     vue-demi\n* \u4f5c\u7528: \u4e00\u4e2a\u5f00\u53d1\u5de5\u5177\uff0c\u5141\u8bb8\u7f16\u5199\u901a\u7528\u7684 Vue \u5e93\uff0c\u4f7f\u5176\u540c\u65f6\u517c\u5bb9 Vue 2 \u548c Vue 3 \u3002

     \n
\n
143. \n

     @vueuse/shared\n* \u4f5c\u7528: VueUse \u5e93\u5171\u4eab\u7684\u5de5\u5177\u51fd\u6570\u3002

     \n
\n
144. \n

     plist\n* \u4f5c\u7528: Apple \u7684\u5c5e\u6027\u5217\u8868 (Property List, .plist) \u6587\u4ef6\u89e3\u6790\u5668\u548c\u6784\u5efa\u5668\u3002

     \n
\n
145. \n

     fs-extra\n* \u4f5c\u7528: \u6269\u5c55\u4e86 Node.js \u5185\u7f6e fs \u6a21\u5757\u7684\u529f\u80fd\uff0c\u6dfb\u52a0\u4e86\u66f4\u591a\u6587\u4ef6\u7cfb\u7edf\u64cd\u4f5c\u65b9\u6cd5\uff0c\u5e76\u4e3a fs \u65b9\u6cd5\u589e\u52a0\u4e86 Promise \u652f\u6301\u3002

     \n
\n
146. \n

     xmlbuilder\n* \u4f5c\u7528: \u4e00\u4e2a\u7528\u4e8e Node.js \u7684 XML \u6784\u5efa\u5668\u3002

     \n
\n
147. \n

     graceful-fs\n* \u4f5c\u7528: fs \u6a21\u5757\u7684\u66ff\u4ee3\u54c1\uff0c\u8fdb\u884c\u4e86\u4e00\u4e9b\u6539\u8fdb\uff0c\u4f8b\u5982\u66f4\u597d\u5730\u5904\u7406\u6587\u4ef6\u7cfb\u7edf\u9519\u8bef\u548c\u8d44\u6e90\u9650\u5236\u3002

     \n
\n
148. \n

     universalify\n* \u4f5c\u7528: \u5c06\u56de\u8c03\u98ce\u683c\u7684\u51fd\u6570\u8f6c\u6362\u4e3a Promise \u98ce\u683c\u7684\u51fd\u6570\uff0c\u53cd\u4e4b\u4ea6\u7136\u3002

     \n
\n
149. \n

     jsonfile\n* \u4f5c\u7528: \u65b9\u4fbf\u5730\u8bfb\u53d6\u548c\u5199\u5165 JSON \u6587\u4ef6\u3002

     \n
\n
150. \n

     lodash.template\n* \u4f5c\u7528: Lodash \u5e93\u4e2d\u7684 _.template \u65b9\u6cd5\uff0c\u7528\u4e8e\u521b\u5efa\u7f16\u8bd1\u6a21\u677f\u51fd\u6570\u3002

     \n
\n
151. \n

     temp\n* \u4f5c\u7528: Node.js \u7684\u4e34\u65f6\u6587\u4ef6\u548c\u76ee\u5f55\u521b\u5efa\u5de5\u5177 (\u4e0e tmp \u7c7b\u4f3c\uff0c\u53ef\u80fd\u7531\u4e0d\u540c\u4f9d\u8d56\u4f7f\u7528)\u3002

     \n
\n
152. \n

     lodash.templatesettings\n* \u4f5c\u7528: Lodash \u5e93\u4e2d\u7684 _.templateSettings \u65b9\u6cd5\uff0c\u7528\u4e8e\u914d\u7f6e _.template \u7684\u884c\u4e3a\u3002

     \n
\n
153. \n

     commander\n* \u4f5c\u7528: Node.js \u547d\u4ee4\u884c\u754c\u9762\u89e3\u51b3\u65b9\u6848\uff0c\u4f7f\u521b\u5efa\u547d\u4ee4\u884c\u5de5\u5177\u66f4\u7b80\u5355\u3002

     \n
\n
154. \n

     minimatch\n* \u4f5c\u7528: \u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684 glob \u6a21\u5f0f\u5339\u914d\u5de5\u5177\u3002

     \n
\n
155. \n

     glob\n* \u4f5c\u7528: \u4e3a Node.js \u63d0\u4f9b glob \u529f\u80fd\uff08\u6587\u4ef6\u540d\u6a21\u5f0f\u5339\u914d\uff09\u3002

     \n
\n
156. \n

     brace-expansion\n* \u4f5c\u7528: \u5b9e\u73b0\u7c7b\u4f3c Bash \u7684\u82b1\u62ec\u53f7\u6269\u5c55\u529f\u80fd\uff08\u5df2\u5728 braces \u4e2d\u5217\u51fa\uff0c\u529f\u80fd\u76f8\u540c\uff09\u3002

     \n
\n
157. \n

     concat-map\n* \u4f5c\u7528: \u4e00\u4e2a map \u51fd\u6570\uff0c\u5176\u56de\u8c03\u53ef\u4ee5\u8fd4\u56de\u4e00\u4e2a\u6570\u7ec4\u6216\u5355\u4e2a\u503c\uff0c\u7ed3\u679c\u4f1a\u88ab\u5c55\u5e73\u3002

     \n
\n
158. \n

     fs.realpath\n* \u4f5c\u7528: Node.js fs.realpath \u65b9\u6cd5\u7684\u5b9e\u73b0\u6216 ponyfill \uff0c\u7528\u4e8e\u89e3\u6790\u7b26\u53f7\u94fe\u63a5\u5e76\u8fd4\u56de\u89c4\u8303\u5316\u7684\u7edd\u5bf9\u8def\u5f84\u3002

     \n
\n
159. \n

     path-is-absolute\n* \u4f5c\u7528: Node.js path.isAbsolute() \u65b9\u6cd5\u7684 ponyfill \uff0c\u5224\u65ad\u8def\u5f84\u662f\u5426\u4e3a\u7edd\u5bf9\u8def\u5f84\u3002

     \n
\n
160. \n

     inflight\n* \u4f5c\u7528: \u9632\u6b62\u5bf9\u540c\u4e00\u8d44\u6e90\u53d1\u8d77\u91cd\u590d\u7684\u5f02\u6b65\u8bf7\u6c42\uff0c\u800c\u662f\u5c06\u56de\u8c03\u6dfb\u52a0\u5230\u6b63\u5728\u8fdb\u884c\u7684\u8bf7\u6c42\u4e0a\u3002

     \n
\n
161. \n

     mkdirp\n* \u4f5c\u7528: \u9012\u5f52\u5730\u521b\u5efa\u76ee\u5f55\uff0c\u7c7b\u4f3c Unix \u547d\u4ee4 mkdir -p\u3002

     \n
\n
162. \n

     rimraf\n* \u4f5c\u7528: Node.js \u5b9e\u73b0\u7684 rm -rf \u547d\u4ee4\uff0c\u7528\u4e8e\u9012\u5f52\u5730\u5220\u9664\u6587\u4ef6\u548c\u76ee\u5f55\u3002

     \n
\n

\u6bcf\u4e00\u5e74\u7684 VueConf \uff0c\u90fd\u662f Vue \u5f00\u53d1\u8005\u4eec\u7684\u72c2\u6b22\uff01

\u4eca\u5e74\uff0c\u6211\u4eec\u5c06\u518d\u6b21\u76f8\u805a\u5728\u6df1\u5733\uff08\u8001\u5730\u65b9\uff09\uff0c\u5171\u540c\u8fce\u6765 VueConf 2025 \uff01

\ud83d\udc68\u200d\ud83d\udcbb\ud83d\udc69\u200d\ud83d\udcbb \u672c\u6b21\u5927\u4f1a\u5c06\u6709 11 \u4f4d\u6f14\u8bb2\u5609\u5bbe \u767b\u573a\u2014\u2014\u65e2\u6709\u5927\u5bb6\u719f\u6089\u7684\u8001\u670b\u53cb\uff0c\u4e5f\u6709\u9996\u6b21\u4eae\u76f8\u7684\u65b0\u9762\u5b54\u3002\u65e0\u8bba\u4f60\u662f Vue \u7684\u8d44\u6df1\u7231\u597d\u8005\uff0c\u8fd8\u662f\u521a\u5165\u95e8\u7684\u65b0\u624b\uff0c\u8fd9\u91cc\u90fd\u80fd\u627e\u5230\u5c5e\u4e8e\u4f60\u7684\u6280\u672f\u5e72\u8d27\u4e0e\u7075\u611f\u706b\u82b1\uff01

\ud83d\udd25 \u4e3a\u4ec0\u4e48\u4e0d\u80fd\u9519\u8fc7 VueConf 2025 \uff1f

\n
• \u7b2c\u4e00\u65f6\u95f4\u4e86\u89e3 Vue \u7684\u524d\u6cbf\u52a8\u6001
\n
• \u4e0e\u793e\u533a\u5927\u795e\u9762\u5bf9\u9762\u4ea4\u6d41
\n
• \u6536\u83b7\u5b9e\u6218\u7ecf\u9a8c\u4e0e\u843d\u5730\u6848\u4f8b
\n
• \u611f\u53d7\u6d53\u6d53\u7684\u793e\u533a\u6c1b\u56f4\u4e0e\u70ed\u60c5
\n
• \ud83c\udfab \u95e8\u7968\u6b63\u5728\u70ed\u552e\u4e2d\uff0c\u6570\u91cf\u6709\u9650\uff0c\u5148\u5230\u5148\u5f97\uff01
\n

\u7acb\u5373\u62a2\u7968 \ud83d\udc49 https://vueconf.cn/

\u8ba9\u6211\u4eec\u4e00\u8d77\u5728\u6df1\u5733\uff0c\u611f\u53d7 Vue \u7684\u9b45\u529b\uff01

VueConf 2025 \uff0c\u4e0d\u89c1\u4e0d\u6563\uff01

\u5982\u9898\uff0c\u5199\u4e86\u4e24\u4e2a\u7b80\u5355\u7684 vue demo \uff0c\u5b9e\u9645\u4e1a\u52a1\u4ee3\u7801\u6bd4\u8fd9\u4e2a\u590d\u6742\u5f88\u591a

\u5355\u5411\u6570\u636e\u6d41\u7248\u7b80\u5355 demo
\nlayouts.vue\n\nAComponent.vue\n\nBComponent.vue\n

\u72b6\u6001\u7ba1\u7406\u6d41\u7248\u7b80\u5355 demo
\nlayouts.vue\n\nAComponent.vue\n\nBComponent.vue\n

\u73af\u5883\uff1aWindows 11 \u4e13\u4e1a\u5de5\u4f5c\u7ad9\u7248 \u7248\u672c\u53f7 24H2 / 23H2

WSL \u7248\u672c\uff1a2.4.12.0
\n\u5185\u6838\u7248\u672c\uff1a5.15.167.4-1
\n\u7f51\u7edc\u6a21\u5f0f\uff1aMirrored

WSL2 \u5b89\u88c5\u7684\u662f Ubuntu 22.04.5 LTS

\u76ee\u524d\u9047\u5230\u7684\u95ee\u9898\u662f \u5f00\u542f\u7cfb\u7edf\u4ee3\u7406\uff08\u65e0\u8bba\u662f Fiddler Everywhere \u6216\u8005 Clash Verge \uff09\u540e\uff0c\u4f1a\u51fa\u73b0\u4e00\u4e9b\u8bf7\u6c42\u7279\u522b\u7279\u522b\u6162\u7684\u60c5\u51b5\u3002

\u6211\u662f\u4f7f\u7528 Cursor +WSL2 \u5f00\u53d1\u7684\u6a21\u5f0f\uff0c\u542f\u52a8\u4e00\u4e2a vue3 \u7684\u9879\u76ee\uff0c\u53d1\u73b0\u6bcf\u6b21\u53ea\u8981\u6253\u5f00\u7cfb\u7edf\u4ee3\u7406\uff0c\u5237\u65b0\u9875\u9762\u603b\u4f1a\u6709\u51e0\u4e2a\u8bf7\u6c42\u9700\u8981\u52a0\u8f7d\u51e0\u5341\u79d2\u751a\u81f3 1 \u5206\u949f\u4ee5\u4e0a\u624d\u80fd\u8bf7\u6c42\u5b8c\u6210\uff0c\u800c\u4e14 vue \u7684 hot reload \u4e5f\u5b8c\u5168\u6ca1\u529e\u6cd5\u7528\uff0c\u5361\u4f4f\u7684\u8bf7\u6c42\u5e76\u4e0d\u662f\u56fa\u5b9a\u7684\uff0c\u4f46\u6bcf\u6b21\u90fd\u4f1a\u968f\u673a\u5361\u4f4f\u51e0\u4e2a\u3002

\u76ee\u524d\u6000\u7591\u7684\u70b9\uff0c\u5f3a\u5236\u5237\u65b0\u9875\u9762\u540e\uff0c\u5728\u5f00\u53d1\u6a21\u5f0f\u4e0b\uff0c\u53ef\u80fd\u9700\u8981\u52a0\u8f7d\u51e0\u5341\u4e0a\u767e\u4e2a\u6587\u4ef6\uff0c\u662f\u4e0d\u662f\u5927\u91cf\u6587\u4ef6\u52a0\u8f7d\u5bfc\u81f4\u7684\u8fd9\u4e2a\u95ee\u9898\uff1f

\u6211\u5e94\u8be5\u5982\u4f55\u6392\u67e5\u548c\u89e3\u51b3\u95ee\u9898\uff1f\u6c42\u5927\u4f6c\u6307\u70b9\u3002

\u4f1a\u5728\u4e00\u4e9b\u8001\u7248\u672c\u7684 android tv \u4e0a\u767d\u5c4f\uff0c\u5404\u4f4d\u6709\u77e5\u9053\u89e3\u51b3\u529e\u6cd5\u5417

\u9879\u76ee\u5730\u5740 https://github.com/am32-firmware/am32-configurator

\u6211\u5728 Ubuntu 20.04 \u548c Ubuntu 24.04 \u4e0a\uff0c\u7528 nodejs 18-23 \u90fd\u65e0\u6cd5\u6210\u529f build \uff0c\u5747\u62a5 typescript \u8bed\u6cd5\u9519\u8bef\u3002\u53ef\u89c1 https://github.com/am32-firmware/am32-configurator/issues/29

\u6211\u5e76\u4e0d\u60f3\u6539\u4ed6\u7684\u6e90\u7801\uff0c\u6211\u89c9\u5f97\u8fd9\u80af\u5b9a\u662f\u73af\u5883\u95ee\u9898\u3002

\u6709\u8c01\u80fd\u5e2e\u5fd9\u89e3\u51b3\u73af\u5883\u95ee\u9898\uff0c\u544a\u8bc9\u6211\u4f60\u7684\u5404\u79cd\u5de5\u5177\u7248\u672c\u53f7\uff0c\u4ee5\u53ca\u652f\u4ed8\u5b9d / Paypal \u8d26\u53f7\uff0c\u6211\u53d1 88 \u5143\u7ea2\u5305\uff08\u4e0d\u591a\uff0c\u5e0c\u671b\u4e13\u4e1a\u7684 V \u53cb\u80fd\u5e2e\u4e2a\u5fd9\uff09

\u5982\u9898\uff0c\u6211\u611f\u89c9 nuxt.js \u52a0\u5165 app route \u53ef\u4ee5\u5f88\u5927\u7a0b\u5ea6\u7684\u6539\u5584 vue sfc \u7684\u95ee\u9898

\u65e7\u7684 page route \u7ed3\u6784\uff0c\u7ecf\u5e38 page \u548c component \u4e24\u4e2a\u76ee\u5f55\u6765\u56de\u8df3

- page\n - about.tsx\n- component # \u7eaf\u7ec4\u4ef6\n - componentA.tsx\n - componentB.tsx\n- container # \u548c\u4e1a\u52a1\u8026\u5408\u7684\u7ec4\u4ef6\n - componentC.tsx\n

app route \u6587\u4ef6\u7ed3\u6784\u7c7b\u4f3c\u8fd9\u6837\uff0c\u53ea\u5728 about \u9875\u9762\u4f7f\u7528\u7684\u7ec4\u4ef6\u5b8c\u5168\u53ef\u4ee5\u653e\u5728 about \u4e0b\uff0c\u5982\u679c\u51fa\u73b0\u591a\u9875\u9762\u590d\u7528\u7ec4\u4ef6\u518d\u5347\u7ea7\u5230 component \u6216\u8005 container \u76ee\u5f55

- page\n - about\n - page.tsx\n - componentA.tsx\n - componentB.tsx\n - componentC.tsx\n

\u662f\u8fd9\u6837\u7684\uff0c\u6211\u6bd5\u8bbe\u641e\u4e86\u4e00\u4e2a AI \u5bf9\u8bdd\uff0c\u4f46\u662f\u5462\uff0c\u8fd9\u4e2a AI \u5bf9\u8bdd\u8fd4\u56de\u7684\u5b57\u7b26\u4e32\u662f markdown \u683c\u5f0f\uff0c\u4f46\u662f\u6211\u524d\u7aef\u65e0\u6cd5\u6b63\u786e\u89e3\u6790\uff0c\u6700\u540e\u5b57\u7b26\u4e32\u683c\u5f0f\u5c31\u4f1a\u53d8\u6210\u4e0b\u9762\u8fd9\u6837

\u8fd9\u91cc\u663e\u7136\u6ca1\u6709\u6b63\u786e\u89e3\u6790\u51fa\u6837\u5f0f\u6765\uff0c\u6211\u8bd5\u4e86\u5f88\u591a\u65b9\u6cd5\u90fd\u6ca1\u80fd\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u5404\u4e2a ai \u95ee\u4e86\u4e2a\u904d\u4e86\uff0c\u7136\u540e\u53bb\u7f51\u4e0a\u627e\u4e86\u597d\u591a\u65b9\u6cd5\uff0c\u8fd8\u662f\u6ca1\u641e\u5b9a\uff0c\u4e0b\u9762\u662f\u6211\u8fd9\u4e2a\u9875\u9762\u7684\u6e90\u7801\uff0c\u6709\u6ca1\u6709\u5927\u4f6c\u5e2e\u6211\u770b\u770b\u5230\u5e95\u8be5\u600e\u4e48\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u554a\uff1f\u5c0f\u5f1f\u6211\u611f\u6fc0\u4e0d\u5c3d\u554a

<template>\n <div class=\"layout\">\n <div class=\"menu\">\n <RouterLink to=\"/\" class=\"re-home\">\u8fd4\u56de\u9996\u9875</RouterLink>\n <!-- Logo -->\n <div class=\"logo\">\n <img :src=\"logo\" draggable=\"false\" alt=\"logo\" class=\"logo-img\" />\n <span class=\"logo-span\">\u67d1\u6a58\u667a\u80fd\u95ee\u7b54</span>\n </div>\n </div>\n <div class=\"chat\">\n <!-- \u6d88\u606f\u5217\u8868 -->\n <Bubble.List\n :items=\"messages\"\n class=\"messages\"\n style=\"flex: 1\"\n :messageRender=\"renderMarkdown\"\n :roles=\"{\n ai: {\n placement: 'start',\n typing: { step: 5, interval: 20 },\n styles: {\n content: {\n borderRadius: '16px'\n }\n }\n },\n local: {\n placement: 'end',\n variant: 'shadow'\n }\n }\"\n />\n\n <!-- \u8f93\u5165\u6846 -->\n <Sender\n :value=\"content\"\n class=\"sender\"\n @submit=\"onSubmit\"\n @update:value=\"(val) => (cOntent= val)\"\n />\n </div>\n </div>\n</template>\n\n<script setup>\nimport { ref, h } from 'vue'\nimport { Conversations, Prompts, Sender, Bubble } from 'ant-design-x-vue'\nimport { Edit, Delete } from '@element-plus/icons-vue'\nimport reqAIChat from '@/api/chat/index'\nimport { message } from 'ant-design-vue'\nimport { ElMessage } from 'element-plus'\nimport logo from '@/assets/images/logo.png'\nimport { marked } from 'marked'\nimport hljs from 'highlight.js'\nimport 'highlight.js/styles/github.css'\nmarked.setOptions({\n highlight: (code) => hljs.highlightAuto(code).value,\n breaks: true,\n gfm: true\n})\n\nmarked.use({\n renderer: {\n link(href, title, text) {\n return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener\">${text}</a>`\n }\n }\n})\nconst renderMarkdown = (content, item) => {\n if (item?.isMarkdown) {\n return h('Typography', { class: 'markdown-container' }, [\n h('div', {\n innerHTML: marked.parse(content), // Vue 3 \u76f4\u63a5\u6ce8\u5165 HTML\n class: 'markdown-body'\n })\n ])\n }\n return content // \u666e\u901a\u6587\u672c\u76f4\u63a5\u8fd4\u56de\n}\nconst cOntent= ref('')\n\nconst messages = ref([\n {\n key: '1',\n content:\n '## Markdown \u6d4b\u8bd5\\n[\u94fe\u63a5]( https://x.ant.design)1. **\u6a59\uff08 Orange \uff09**\uff1a\u5305\u62ec\u751c\u6a59\u548c\u9178\u6a59\uff0c\u751c\u6a59\u4e2d\u53c8\u5206\u4e3a\u8110\u6a59\u3001\u74e6\u4f26\u897f\u4e9a\u6a59\u7b49\u30022. **\u67d1\u6a58\uff08 Mandarin \uff09**\uff1a\u4e5f\u79f0\u4e3a\u871c\u6a58\uff0c\u5305\u62ec\u5404\u79cd\u5c0f\u578b\u3001\u6613\u5265\u76ae\u7684\u67d1\u6a58\u30023. **\u67da\u5b50\uff08 Pomelo \uff09**\uff1a\u4e5f\u79f0\u4e3a\u6587\u65e6\uff0c\u662f\u67d1\u6a58\u7c7b\u4e2d\u6700\u5927\u7684\u4e00\u79cd\u30024. **\u67e0\u6aac\uff08 Lemon \uff09**\uff1a\u4ee5\u5176\u9178\u5473\u548c\u9999\u6c14\u95fb\u540d\u30025. **\u9752\u67e0\uff08 Lime \uff09**\uff1a\u6bd4\u67e0\u6aac\u5c0f\uff0c\u9178\u5473\u8f83\u8f7b\u30026. **\u8461\u8404\u67da\uff08 Grapefruit \uff09**\uff1a\u5927\u5c0f\u548c\u5f62\u72b6\u7c7b\u4f3c\u8461\u8404\uff0c\u5473\u9053\u53ef\u4ee5\u662f\u751c\u7684\u4e5f\u53ef\u4ee5\u662f\u9178\u7684\u3002',\n role: 'ai',\n variant: 'primary',\n isMarkdown: true\n }\n])\nconst activeKey = ref('0')\nconst cOnversationsItems= ref(\n Array.from({ length: 2 }).map((_, index) => ({\n key: `item${index + 1}`,\n label: `\u672a\u547d\u540d\u5bf9\u8bdd ${index + 1}`\n }))\n)\nconst OnSubmit= async (nextContent) => {\n if (!nextContent) return\n messages.value.push({\n key: `${messages.value.length + 1}`,\n content: nextContent,\n role: 'local',\n variant: 'shadow'\n })\n content.value = ''\n try {\n const res = await reqAIChat({ message: nextContent })\n if (!res) {\n ElMessage({\n message: '\u8bf7\u6c42\u5931\u8d25',\n type: 'error'\n })\n return\n }\n\n messages.value.push({\n key: `${messages.value.length + 1}`,\n content: res,\n role: 'ai',\n variant: 'primary',\n isMarkdown: true\n })\n } catch (error) {\n ElMessage({\n message: '\u8bf7\u6c42\u51fa\u9519',\n type: 'error'\n })\n }\n}\nconst OnAddConversation= () => {\n conversationsItems.value.push({\n key: `${conversationsItems.value.length + 1}`,\n label: `\u672a\u547d\u540d\u5bf9\u8bdd${conversationsItems.value.length + 1}`\n })\n activeKey.value = `${conversationsItems.value.length + 1}`\n}\n\nconst menuCOnfig= (conversation) => {\n return {\n items: [\n {\n label: '\u7f16\u8f91',\n key: 'edit',\n icon: () => h(Edit)\n },\n {\n label: '\u5220\u9664',\n key: 'delete',\n icon: () => h(Delete),\n danger: true\n }\n ],\n onClick: (menuInfo) => {\n message.info(`\u70b9\u51fb ${conversation.key} - ${menuInfo.key}`)\n }\n }\n}\n</script>\n\n<style scoped>\n.markdown-body {\n padding: 12px 16px;\n line-height: 1.7;\n\n /* \u5fc5\u987b\u7ee7\u627f\u5b57\u4f53 */\n font-family: inherit;\n\n /* \u4ee3\u7801\u5757\u6837\u5f0f */\n pre {\n padding: 12px;\n border-radius: 8px;\n background: #f6f8fa !important;\n }\n\n code {\n font-family: 'SFMono-Regular', Consolas, monospace;\n }\n}\n.markdown-body {\n line-height: 1.6;\n color: #333;\n}\n\n.re-home {\n display: inline-block;\n padding: 10px 20px;\n margin: 12px;\n background: #ffa500;\n color: white;\n text-decoration: none;\n border-radius: 4px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n transition: background-color 0.3s ease;\n}\n.layout {\n width: 100%;\n min-width: 1000px;\n height: 722px;\n display: flex;\n background: #fff;\n font-family: AlibabaPuHuiTi, sans-serif;\n}\n\n.menu {\n padding: 24px 0;\n /* background: #fff; */\n width: 280px;\n height: 100%;\n display: flex;\n flex-direction: column;\n background: rgba(245, 245, 245, 0.5);\n}\n\n.logo {\n display: flex;\n height: 72px;\n align-items: center;\n justify-content: start;\n padding: 0 24px;\n}\n\n.logo-img {\n width: 24px;\n height: 24px;\n}\n\n.logo-span {\n margin: 0 8px;\n font-weight: bold;\n color: #333;\n font-size: 16px;\n}\n\n.add-btn {\n background: #1677ff0f;\n border: 1px solid #1677ff34;\n width: calc(100% - 24px);\n cursor: pointer;\n margin: 0 12px 24px 12px;\n font-size: 14px;\n height: 32px;\n padding: 4px 15px;\n border-radius: 6px;\n}\n.add-btn:hover {\n color: #69b1ff;\n}\n\n.chat {\n height: 100%;\n width: 100%;\n max-width: 700px;\n margin: 0 auto;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n padding: 24px;\n gap: 16px;\n}\n</style>\n\n

\u8fd9\u91cc content \u91cc\u5df2\u7ecf\u6709\u4e00\u4e9b\u5199\u6b7b\u7684\u5185\u5bb9\u4e86\uff0c\u90a3\u662f\u6211\u7528\u6765\u6d4b\u8bd5\u7684\uff0c\u5c31\u662f\u60f3\u7740\u5982\u679c\u53ef\u4ee5\u89e3\u6790\u4e86\u90a3\u4e48\u8fd9\u4e9b\u5199\u6b7b\u7684\u5185\u5bb9\u662f\u4f1a\u88ab\u6b63\u786e\u89e3\u6790\u4e0a\u53bb\u7684\uff0c\u4f46\u662f\u6211\u770b\u4e86\u597d\u4e45\u90fd\u6ca1\u641e\u61c2\u8be5\u600e\u4e48\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u6240\u4ee5\u8fd9\u4e2a\u5199\u6b7b\u7684\u5185\u5bb9\u4e5f\u4e00\u76f4\u7559\u7740\u4e86

\u622a\u6b62\u76ee\u524d vue3 \u5df2\u7ecf\u53d1\u5e03 4 \u5e74\u591a\u4e86\uff0c\u7528\u4e86\u51e0\u4e2a\u6708 vue3 \uff0ctemplate \u7684 typescript \u652f\u6301\u771f\u7684\u7a00\u70c2\u3002

\u4e0d\u5439\u4e0d\u9ed1\uff0c\u5982\u679c\u8bf4 tsx \u7684 typescript \u652f\u6301\u8ddf vue3 \u7684 template \u652f\u6301\u5dee\u8ddd\u4e0d\u5927\uff0c\u4e5f\u5c31\u4e0d\u8bf4\u4e86\uff0ctsc \u68c0\u67e5 template \u65e0\u6cd5\u63d0\u793a\u7ec4\u4ef6\u4e0d\u5b58\u5728\u7684\u5c5e\u6027\uff0c\u5b98\u65b9 vscode \u63d2\u4ef6 vue official 2.2.8 \u7248\u672c \u7528\u8d77\u6765\u66f4\u662f\u8ba9\u4eba\u86cb\u75bc\uff0c\u7ec4\u4ef6\u81ea\u52a8\u8bc6\u522b\u98d8\u5ffd\u4e0d\u5b9a\uff0c\u9ad8\u4eae\u4e5f\u662f\u98d8\u5ffd\u4e0d\u5b9a\uff0c\u5c31\u8fde script \u90e8\u5206\u63d0\u793a\u4e5f\u4f1a\u51fa\u9519\u3002

\u4e5f\u8bb8\u4f60\u4f1a\u8bf4\u91cd\u542f\u8bd5\u8bd5\uff0c\u65e0\u6cd5\u81ea\u52a8\u5bfc\u5165\uff0c\u624b\u52a8\u5bfc\u5165\u5440\uff0ctemplate \u652f\u6301\u4e0d\u884c\uff0c\u4f60\u4e5f\u53ef\u4ee5\u7528 tsx \u5199\u5440

\u4e5f\u6709\u4eba\u8bf4\uff0c\u6211\u5199\u4ee3\u7801\u5c31\u662f\u4e00\u628a\u68ad\uff0c\u590d\u5236\u7c98\u8d34\uff0c\u4ec0\u4e48 typescript \uff0c\u76f4\u63a5 anyscript \u548c unkonwscript \u8d70\u8d77

\u6211\u53ea\u80fd\u8bf4\u5bf9\u5bf9\u5bf9

\u672c\u4eba\u4e4b\u524d\u7531\u4e8e\u957f\u671f\u5199 react \uff0c\u66f4\u503e\u5411\u4e8e props \u6a21\u5f0f\u4e5f\u5c31\u662f\u76f4\u63a5\u628a onChange \u4f5c\u4e3a\u53c2\u6570\uff0c\u4f46\u5e73\u65f6\u8fd8\u662f\u8001\u8001\u5b9e\u5b9e\u9047\u5230\u4e8b\u4ef6\u51fd\u6570\u5c31\u7528 emit \u4f20\u9012

\u6700\u8fd1 ai \u544a\u8bc9\u6211 props \u4e0d\u662f\u6700\u4f73\u5b9e\u8df5\uff0cemit \u662f\u6700\u4f73\u5b9e\u8df5\uff0c\u53ef\u6211\u7528 cursor \u7ed9\u6211\u751f\u6210\u7684\u4ee3\u7801\u6e05\u4e00\u8272\u90fd\u662f props \u6a21\u5f0f\uff0c\u7ed9\u6211\u6574\u4e0d\u4f1a\u4e86

\u5176\u5b9e\u6211\u611f\u89c9\u7528 Vue3 tsx \u7684\u8bdd\uff0c\u4ec0\u4e48 v-model \u548c emit \u8fd9\u4e9b\u90fd\u6ca1\u5fc5\u8981\u4e86\uff0c\u548c react \u4e00\u6837 props \u5230\u5e95\u5c31\u597d\u4e86

\u54ea\u4f4d\u5927\u4f6c\u7ed9\u6211\u8bb2\u8bb2\uff0c\u8fd9\u91cc\u9762\u7684\u539f\u7406

 <Hello :title=\"\" :item=\"\" />\n

\u8fd9\u4e2a T \u662f\u6839\u636e\u7b2c\u4e00\u4e2a Prop \u53c2\u6570\u63a8\u5012\u7684\uff1f

\u6839\u636e\u987a\u5e8f\u6765\u7684\uff1f\u8fd8\u662f\u600e\u6837\uff1f\u5f53\u6709\u591a\u4e2a Prop \u65f6\uff0c

\u662f\u6839\u636e\u8c03\u7528\u7ec4\u4ef6\u5199\u7684 Prop \u987a\u5e8f\uff0c\u8fd8\u662f\u5b9a\u4e49 Prop \u987a\u5e8f\uff0c\u8fd8\u662f\u600e\u6837\uff1f

\u5b8c\u5168\u61f5\u903c\u4e2d\uff1f

\u5982\u9898\uff0c\u6211\u53d1\u73b0 vscode \u4e0b\u4f7f\u7528 vue \u5b98\u65b9\u63d2\u4ef6\uff0c\u4f7f\u7528 vue3+typescript \u53bb\u5f00\u53d1\uff0c\u6211\u53d1\u73b0\u5728 template \u4e0a typescript \u662f\u6ca1\u6548\u679c\u3002\n\u6bd4\u5982

\n
1. \u7b2c\u4e09\u65b9\u6269\u5c55\u81ea\u52a8\u5f15\u5165
\n
2. \u5c5e\u6027\u81ea\u52a8\u8bc6\u522b [\u770b\u60c5\u51b5]
\n
3. \u4e0d\u5b58\u5728\u5c5e\u6027\u6216\u65b9\u6cd5\u65e0\u6cd5\u63d0\u793a\u9519\u8bef\uff0c\u603b\u4e4b typescript \u4e0d\u751f\u6548
\n
4. \u5b98\u65b9\u63d2\u4ef6\u5076\u5c14\u98d8
\n

\u5982\u9898\uff0c\u6211\u73b0\u5728\u5728\u505a\u4e00\u4e2a\u9879\u76ee\uff0c\u6211\u662f Windows \uff0c\u6280\u672f\u6808\u662f VITE+VUE3+TS \uff0c\u4e0a\u4f20\u4e5f\u6ca1\u7528\u540e\u7aef\uff0c\u76f4\u63a5\u751f\u6210 blob \u683c\u5f0f\u94fe\u63a5\uff0c\uff08\u53ea\u8ba9\u4e0a\u4f20 svg \u683c\u5f0f\u56fe\u7247\uff09\u5982\uff1ablob:http://localhost:5173/0c4ef255-bec5-4377-9596-45a5a4d5501e\n

\n \u6211\u73b0\u5728\u5df2\u7ecf\u5b9e\u73b0\u4e86\u8f6c\u6362 png \u548c ico \u683c\u5f0f\u56fe\u7247\uff0c\u4f46\u8f6c\u6362 icns \u4e00\u76f4\u6ca1\u627e\u5230\u5982\u4f55\u5b9e\u73b0\uff0c\u627e\u5230\u4e00\u4e2a png2icons \uff0c\u4f46\u4e00\u76f4\u6709\u83ab\u540d\u5176\u5999\u7684\u62a5\u9519\uff0c\u6211\u8bd5\u4e86\u597d\u4e45\u4e5f\u4e0d\u884c\uff0c\u7279\u6765\u6c42\u52a9\u4e86

\n \u7b80\u5355\u9644\u4e00\u4e0b\u6211\u8f6c\u6362\u7684\u4ee3\u7801

console.log(\"Processing images...:\", props.uploadedImage);\n // blob:http://localhost:5173/0c4ef255-bec5-4377-9596-45a5a4d5501e\n const image = await loadImage(props.uploadedImage);\n const smallImage: any = await resizeImage(image, 32, 32, \"png\"); // \u8c03\u6574\u4e3a\u8f93\u51fa png \u683c\u5f0f\n

\u6ca1\u5199\u8fc7\u524d\u7aef\u7684\u540e\u7aef\u4eba,\n\u4eca\u5929\u521d\u5c1d vue \u6ca1\u60f3\u5230\u8fd9\u4e48\u65b9\u4fbf\n\u76f4\u63a5 npm create vue@latest \u5c31\u53ef\u4ee5\u521b\u5efa\u597d\u76ee\u5f55\u7ed3\u6784\n\u90a3\u5c82\u4e0d\u662f\u5c31\u5f97\u6309\u5b98\u65b9\u7684\u6765\u4e86?

\u5982\u9898\uff0cdemo \u4ee3\u7801\u5982\u4e0b\uff0c\u6a21\u62df\u8bfb\u53d6\u540e\u7aef api \u8fd4\u56de\uff1a\n\n\n\u4f7f\u7528 data.value \u53ef\u4ee5\u83b7\u53d6\u5230\u6570\u636e\uff0c\u4f46\u662f\u4f7f\u7528 list?.value \u83b7\u53d6\u4e0d\u5230\u6570\u636e\uff0c\u95ee\u4e86 gpt \u4e5f\u95ee\u4e0d\u51fa\u5982\u4f55\u4f7f\u7528 const {data:list} \u5f00\u5934\u7684\u4ee3\u7801\u8fdb\u884c\u89e3\u6784\uff0c\u96be\u9053 ref \u5c31\u6ca1\u6cd5\u89e3\u6784\u5417

const pagination = reactive({\npage: 1,\ntotal: 9,\npage_size: 3\n})\nconst showChart = computed(() => (i: number) => {\nlet offset = (pagination.page-1)*pagination.page_size\nconsole.log(i, i > offset && i <= offset+pagination.page_size)\nreturn i > offset && i <= offset+pagination.page_size\n})

\u9996\u6b21\u5c55\u793a\u6b63\u786e\uff0c\u70b9\u51fb\u5206\u9875\u6309\u94ae\u540e\u4e0d\u5207\u6362\uff0c\u8fd9\u4e2a\u600e\u4e48\u5b9e\u73b0?