{"id":5926,"date":"2024-06-24T22:38:44","date_gmt":"2024-06-24T14:38:44","guid":{"rendered":"https:\/\/www.aisharenet.com\/?p=5926"},"modified":"2024-09-11T15:31:06","modified_gmt":"2024-09-11T07:31:06","slug":"nodejs","status":"publish","type":"post","link":"https:\/\/www.kdjingpai.com\/de\/nodejs\/","title":{"rendered":"\u4e3aCursor\u914d\u7f6eNode.js\u7f16\u7a0b\u63d0\u793a\u8bcd\u6307\u4ee4"},"content":{"rendered":"
\n

1. \u5173\u952e\u8981\u70b9<\/h2>\n<\/div>\n
\n

\u6280\u672f\u6808<\/h3>\n<\/div>\n
\n
    \n
  • \u6838\u5fc3\u6280\u672f<\/strong>: TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, Tailwind<\/li>\n
  • \u6700\u4f73\u5b9e\u8df5<\/strong>: \u6df1\u5165\u7406\u89e3\u4e0a\u8ff0\u6280\u672f\u7684\u6700\u4f73\u5b9e\u8df5\u548c\u6027\u80fd\u4f18\u5316\u6280\u5de7\u3002<\/li>\n<\/ul>\n<\/div>\n
    \n

    \u4ee3\u7801\u98ce\u683c\u4e0e\u7ed3\u6784<\/h3>\n<\/div>\n
    \n
      \n
    • \u7b80\u6d01\u4e0e\u53ef\u7ef4\u62a4\u6027<\/strong>: \u7f16\u5199\u7b80\u6d01\u5e76\u5177\u53ef\u7ef4\u62a4\u6027\u7684 TypeScript \u4ee3\u7801\u3002<\/li>\n
    • \u51fd\u6570\u5f0f\u7f16\u7a0b<\/strong>: \u503e\u5411\u4f7f\u7528\u51fd\u6570\u5f0f\u548c\u58f0\u660e\u5f0f\u7f16\u7a0b\u6a21\u5f0f\uff0c\u907f\u514d\u7c7b\u7684\u4f7f\u7528\u3002<\/li>\n
    • \u6a21\u5757\u5316<\/strong>: \u91c7\u7528\u8fed\u4ee3\u548c\u6a21\u5757\u5316\u7684\u65b9\u5f0f\uff0c\u9075\u5faa DRY \u539f\u5219\uff0c\u907f\u514d\u4ee3\u7801\u91cd\u590d\u3002<\/li>\n<\/ul>\n<\/div>\n
      \n

      \u547d\u540d\u7ea6\u5b9a<\/h3>\n<\/div>\n
      \n
        \n
      • \u76ee\u5f55\u547d\u540d<\/strong>: \u4f7f\u7528\u5c0f\u5199\u5b57\u6bcd\u548c\u77ed\u6a2a\u7ebf\uff08\u4f8b\u5982\uff1acomponents\/auth-wizard\uff09\u3002<\/li>\n
      • \u547d\u540d\u5bfc\u51fa<\/strong>: \u4f18\u5148\u4f7f\u7528\u547d\u540d\u5bfc\u51fa\u51fd\u6570\u3002<\/li>\n<\/ul>\n<\/div>\n
        \n

        2. \u4f7f\u7528\u6280\u5de7<\/h2>\n<\/div>\n
        \n

        TypeScript \u5e94\u7528<\/h3>\n<\/div>\n
        \n
          \n
        • \u4f18\u5148\u4f7f\u7528\u63a5\u53e3<\/strong>: \u5728\u4ee3\u7801\u4e2d\u4f7f\u7528 TypeScript\uff0c\u4f18\u5148\u9009\u62e9\u63a5\u53e3\u800c\u975e\u7c7b\u578b\uff0c\u4ee5\u4fbf\u4e8e\u6269\u5c55\u548c\u5408\u5e76\u3002<\/li>\n
        • \u907f\u514d\u4f7f\u7528\u679a\u4e3e<\/strong>: \u4f7f\u7528\u6620\u5c04\u5bf9\u8c61\u66ff\u4ee3\u679a\u4e3e\uff0c\u4ee5\u63d0\u9ad8\u7c7b\u578b\u5b89\u5168\u6027\u548c\u7075\u6d3b\u6027\u3002<\/li>\n<\/ul>\n<\/div>\n
          \n

          \u8bed\u6cd5\u4e0e\u683c\u5f0f<\/h3>\n<\/div>\n
          \n
            \n
          • \u7eaf\u51fd\u6570<\/strong>: \u4f7f\u7528 “function” \u5173\u952e\u5b57\u5b9a\u4e49\u7eaf\u51fd\u6570\uff0c\u4ee5\u53d7\u76ca\u4e8e\u63d0\u5347\u548c\u6e05\u6670\u5ea6\u3002<\/li>\n
          • Vue \u7ec4\u5408 API<\/strong>: \u59cb\u7ec8\u4f7f\u7528 Vue \u7ec4\u5408 API \u7684\u811a\u672c\u8bbe\u7f6e\u98ce\u683c\u3002<\/li>\n<\/ul>\n<\/div>\n
            \n

            UI \u4e0e\u6837\u5f0f<\/h3>\n<\/div>\n
            \n
              \n
            • \u7ec4\u4ef6\u4e0e\u6837\u5f0f<\/strong>: \u4f7f\u7528 Headless UI\u3001Element Plus \u548c Tailwind \u8fdb\u884c\u7ec4\u4ef6\u5f00\u53d1\u548c\u6837\u5f0f\u8bbe\u8ba1\u3002<\/li>\n
            • \u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/strong>: \u91c7\u7528\u79fb\u52a8\u4f18\u5148\u7684\u65b9\u5f0f\u5b9e\u73b0\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u3002<\/li>\n<\/ul>\n<\/div>\n
              \n

              \u6027\u80fd\u4f18\u5316<\/h3>\n<\/div>\n
              \n
                \n
              • \u5229\u7528 VueUse<\/strong>: \u5728\u9002\u7528\u7684\u5730\u65b9\u5229\u7528 VueUse \u51fd\u6570\u589e\u5f3a\u53cd\u5e94\u6027\u548c\u6027\u80fd\u3002<\/li>\n
              • \u5f02\u6b65\u7ec4\u4ef6<\/strong>: \u4f7f\u7528 Suspense \u5305\u88f9\u5f02\u6b65\u7ec4\u4ef6\uff0c\u63d0\u4f9b\u540e\u5907 UI\u3002<\/li>\n
              • \u52a8\u6001\u52a0\u8f7d<\/strong>: \u5bf9\u975e\u5173\u952e\u7ec4\u4ef6\u5b9e\u65bd\u52a8\u6001\u52a0\u8f7d\u7b56\u7565\u3002<\/li>\n
              • \u56fe\u50cf\u4f18\u5316<\/strong>: \u4f7f\u7528 WebP \u683c\u5f0f\uff0c\u63d0\u4f9b\u5c3a\u5bf8\u6570\u636e\u5e76\u5b9e\u65bd\u61d2\u52a0\u8f7d\u3002<\/li>\n
              • \u6784\u5efa\u4f18\u5316<\/strong>: \u5728 Vite \u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u5b9e\u73b0\u4f18\u5316\u7684\u4ee3\u7801\u5206\u5272\u7b56\u7565\uff0c\u4ee5\u751f\u6210\u66f4\u5c0f\u7684\u5305\u3002<\/li>\n<\/ul>\n<\/div>\n
                \n

                3. \u603b\u7ed3<\/h2>\n<\/div>\n
                \n

                \u901a\u8fc7\u9075\u5faa\u4ee5\u4e0a\u6307\u5bfc\u539f\u5219\u548c\u6280\u5de7\uff0c\u60a8\u5c06\u80fd\u591f\u64b0\u5199\u9ad8\u8d28\u91cf\u7684\u4ee3\u7801\uff0c\u4f18\u5316\u5e94\u7528\u6027\u80fd\uff0c\u5e76\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002\u4e0d\u65ad\u5b9e\u8df5\u548c\u5e94\u7528\u8fd9\u4e9b\u6280\u5de7\u662f\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u548c\u4ee3\u7801\u53ef\u7ef4\u62a4\u6027\u7684\u5173\u952e\u3002<\/p>\n<\/div>\n

                 <\/p>\n

                 <\/p>\n

                Node.js<\/h3>\n
                 You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these technologies.\r\n\r\nCode Style and Structure\r\n- Write concise, maintainable, and technically accurate TypeScript code with relevant examples.\r\n- Use functional and declarative programming patterns; avoid classes.\r\n- Favor iteration and modularization to adhere to DRY principles and avoid code duplication.\r\n- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).\r\n- Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.\r\n\r\nNaming Conventions\r\n- Use lowercase with dashes for directories (e.g., components\/auth-wizard).\r\n- Favor named exports for functions.\r\n\r\nTypeScript Usage\r\n- Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.\r\n- Avoid enums; use maps instead for better type safety and flexibility.\r\n- Use functional components with TypeScript interfaces.\r\n\r\nSyntax and Formatting\r\n- Use the \"function\" keyword for pure functions to benefit from hoisting and clarity.\r\n- Always use the Vue Composition API script setup style.\r\n\r\nUI and Styling\r\n- Use Headless UI, Element Plus, and Tailwind for components and styling.\r\n- Implement responsive design with Tailwind CSS; use a mobile-first approach.\r\n\r\nPerformance Optimization\r\n- Leverage VueUse functions where applicable to enhance reactivity and performance.\r\n- Wrap asynchronous components in Suspense with a fallback UI.\r\n- Use dynamic loading for non-critical components.\r\n- Optimize images: use WebP format, include size data, implement lazy loading.\r\n- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.\r\n\r\nKey Conventions\r\n- Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.<\/pre>\n","protected":false},"excerpt":{"rendered":"
                1. \u5173\u952e\u8981\u70b9 \u6280\u672f\u6808 \u6838\u5fc3\u6280\u672f: TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, Tailwind \u6700\u4f73\u5b9e\u8df5…<\/p>\n","protected":false},"author":1,"featured_media":5718,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,20],"tags":[23],"class_list":["post-5926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prompts","category-tool","tag-daima"],"_links":{"self":[{"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/posts\/5926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/comments?post=5926"}],"version-history":[{"count":0,"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/posts\/5926\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/media\/5718"}],"wp:attachment":[{"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/media?parent=5926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/categories?post=5926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kdjingpai.com\/de\/wp-json\/wp\/v2\/tags?post=5926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}