\u672c\u8bb2\u662fM1\u91cc\u7a0b\u7891\u7684\u7b2c\u4e00\u5757\u7816\u3002\u8dd1\u5b8c\u4f60\u4f1a\u770b\u5230\u6d4f\u89c8\u5668\u91cc\u51fa\u73b0\u300cHello ShopX\u300d，\u70ed\u66f4\u65b0\u751f\u6548，\u76ee\u5f55\u7ed3\u6784\u6e05\u695a\u3002\u8fd9\u662f\u540e\u7eed\u524d\u7aef\u5b66\u4e60\u7684\u5730\u57fa\u3002
\n\u5efa\u8bae\u5148 \u70b9\u8d5e + \u6536\u85cf + \u5173\u6ce8，\u914d\u73af\u5883\u65f6\u968f\u65f6\u56de\u67e5\u3002<\/p>\n
\u5f88\u591a Vue \u6559\u7a0b\u8fd8\u5728\u6559vue-cli init，\u90a3\u662f2018\u5e74\u7684\u5de5\u5177\u3002Vite\u662f2026\u5e74\u7684\u6807\u51c6\u9009\u62e9，\u539f\u56e0\u6709\u56db\u4e2a\u3002<\/p>\n
Vue CLI\u7528webpack\u6253\u5305，\u7b2c\u4e00\u6b21\u542f\u52a8\u898130-60\u79d2，\u4f9d\u8d56\u8d8a\u591a\u8d8a\u6162\u3002Vite\u7528esbuild\u9884\u6784\u5efa\u4f9d\u8d56，\u51b7\u542f\u52a8\u7a33\u5b9a\u57281\u79d2\u4ee5\u5185，\u65e0\u8bba\u9879\u76ee\u591a\u5927\u3002<\/p>\n
\u6539\u4e00\u884c\u4ee3\u7801，\u6d4f\u89c8\u5668\u6beb\u79d2\u7ea7\u770b\u5230\u53d8\u5316\u3002Vue CLI\u7684HMR\u6539\u5927\u6587\u4ef6\u89813-5\u79d2，Vite\u662f50ms\u91cf\u7ea7\u2014\u2014\u6162\u7684HMR\u8ba9\u4eba\u5931\u53bb\u5373\u6539\u5373\u770b\u7684\u8282\u594f\u3002<\/p>\n
Vue\u56e2\u961f\u5df2\u6b63\u5f0f\u516c\u544aVue CLI\u8fdb\u5165\u7ef4\u62a4\u6a21\u5f0f，\u4e0d\u518d\u65b0\u589e\u5927\u529f\u80fd\u3002Vite\u662f\u5b98\u65b9\u63a8\u8350\u7684\u4e0b\u4e00\u4ee3\u5de5\u5177\u3002<\/p>\n
Vite\u540c\u65f6\u652f\u6301Vue3 \/ React \/ Svelte \/ Solid \/ Vanilla JS\u3002\u4e00\u4e2a\u9879\u76ee\u91cc\u8981\u6df7\u5408\u6280\u672f\u6808\u4e5f\u65b9\u4fbf\u3002<\/p>\n
💡 \u552f\u4e00\u6ce8\u610f\u70b9：Vite\u5bf9Node\u7248\u672c\u6709\u8981\u6c42\u3002\u6211\u4eec\u88c5\u7684\u662fNode22，\u5b8c\u5168\u6ee1\u8db3\u3002<\/p>\n
\u8fdb\u5165\u9879\u76ee\u76ee\u5f55（\u6cbf\u7528\u7b2c 3 \u8bb2\u7684\u7279\u6027\u5206\u652f）：<\/p>\n
cd<\/span> ~\/workspace\/shopx \u5728\u9879\u76ee\u6839\u76ee\u5f55\u7528 pnpm \u521b\u5efa\u524d\u7aef\u5de5\u7a0b：<\/p>\n pnpm<\/span> create vite frontend –template<\/span> vue-ts<\/p>\n –template vue-ts\u662f\u5173\u952e，\u6307\u5b9aVue 3 + TypeScript\u6a21\u677f\u3002frontend\u662f\u76ee\u5f55\u540d，\u672c\u4e13\u680f\u7528monorepo\u5e03\u5c40，\u524d\u7aef\u4ee3\u7801\u90fd\u653e\u8fd9\u91cc\u3002<\/p>\n \u547d\u4ee4\u4f1a\u95ee\u51e0\u4e2a\u4ea4\u4e92\u95ee\u9898，\u6309\u56de\u8f66\u786e\u8ba4\u9ed8\u8ba4\u5373\u53ef\u3002\u51e0\u79d2\u540e，\u76ee\u5f55frontend\/\u51fa\u73b0\u3002<\/p>\n cd<\/span> frontend pnpm install\u4f1a\u6309package.json\u88c5\u9f50\u6240\u6709\u4f9d\u8d56\u3002\u88c5\u5b8c\u540e\u76ee\u5f55\u91cc\u6709node_modules\/\u3001pnpm-lock.yaml\u3002<\/p>\n pnpm<\/span> dev<\/p>\n \u7ec8\u7aef\u8f93\u51fa：<\/p>\n VITE v7.x.x ready in xxx ms<\/p>\n \u279c Local: http:\/\/127.0.0.1:5173\/ \u6253\u5f00\u6d4f\u89c8\u5668\u8bbf\u95ee http:\/\/127.0.0.1:5173\/，\u770b\u5230 Vite + Vue 3\u7684\u6b22\u8fce\u9875\u3002<\/p>\n \u2705 \u4f60\u7684\u524d\u7aef\u5de5\u7a0b\u8dd1\u8d77\u6765\u4e86\u3002\u8fd9\u662fM1\u91cc\u7a0b\u7891\u7684\u7b2c\u4e00\u5757\u7816\u3002<\/p>\n Vite \u9ed8\u8ba4\u751f\u6210\u4e00\u4e2a\u6700\u5c0f\u53ef\u8fd0\u884c\u7ed3\u6784，\u4f46\u672c\u4e13\u680f\u4f1a\u505a\u6269\u5c55\u3002\u5b8c\u6574\u76ee\u5f55\u7ea6\u5b9a\u5982\u4e0b：<\/p>\n frontend\/ \u73b0\u5728\u53ea\u5efa components\/ views\/ assets\/ \u8fd9\u4e09\u4e2a，\u5176\u4ed6\u76ee\u5f55\u7b49\u8bb2\u5230\u65f6\u518d\u5efa\u3002<\/p>\n mkdir<\/span> -p<\/span> src\/{<\/span>api,assets,components,composables,layouts,router,stores,styles,types,utils,views}<\/span> .gitkeep\u662f\u7a7a\u76ee\u5f55\u5360\u4f4d\u6587\u4ef6\u2014\u2014Git\u4e0d\u8ddf\u8e2a\u7a7a\u76ee\u5f55，\u4f46\u6709\u4e86\u8fd9\u4e2a\u6587\u4ef6\u76ee\u5f55\u5c31\u8ddf\u7740\u4ed3\u5e93\u8d70\u3002<\/p>\n Vite\u521b\u5efa\u7684App.vue\u9ed8\u8ba4\u5c31\u662f<script setup>\u5199\u6cd5\u3002\u8fd9\u662fVue 3\u63a8\u8350\u7684\u5199\u6cd5，\u6bd4Options API\u7b80\u6d0150%\u4ee5\u4e0a\u3002<\/p>\n <script setup lang="ts"> const count = ref(0) function increment() { <template> <style scoped> \u7b2c\u4e00，lang="ts"\u542f\u7528TypeScript\u3002\u6ca1\u6709\u5b83，<script>\u91cc\u5199TS\u4ee3\u7801\u4f1a\u62a5\u9519\u3002<\/p>\n \u7b2c\u4e8c，ref\u548creactive\u662f\u54cd\u5e94\u5f0fAPI\u3002ref(0)\u8fd4\u56de\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5f15\u7528，\u6a21\u677f\u91cc\u76f4\u63a5{{ count }}\u5c31\u80fd\u53d6\u5230\u503c（Vue\u81ea\u52a8\u89e3\u5305），\u811a\u672c\u91cc\u8981count.value\u53d6\u503c\u3002\u540e\u9762\u4f1a\u4e13\u95e8\u8bb2\u54cd\u5e94\u5f0f\u539f\u7406\u3002<\/p>\n \u7b2c\u4e09，<style scoped>\u9650\u5b9a\u6837\u5f0f\u53ea\u4f5c\u7528\u4e8e\u5f53\u524d\u7ec4\u4ef6\u3002.counter\u4e0d\u4f1a\u6cc4\u6f0f\u5230\u5176\u4ed6\u7ec4\u4ef6\u7684.counter\u4e0a\u3002\u8fd9\u662f\u6a21\u5757\u5316CSS\u7684\u57fa\u7840\u3002<\/p>\n \u8001\u5f0fVue 2\u5199\u6cd5：<\/p>\n <script> \u65b0\u5199\u6cd5（\u540c\u7b49\u529f\u80fd）：<\/p>\n <script setup> ref \/ computed\u79fb\u5230\u9876\u90e8\u3001\u53d8\u91cf\u76f4\u63a5\u5b9a\u4e49\u3001\u65b9\u6cd5\u76f4\u63a5\u5199\u51fd\u6570\u2014\u2014\u6837\u677f\u4ee3\u7801\u51cf\u5c11\u4e00\u534a\u3002<\/p>\n \u6700\u65b0\u7248\u7684Vite\u7684vue-ts\u5c06 TypeScript \u914d\u7f6e\u62c6\u5206\u4e3a\u4e09\u4e2a\u6587\u4ef6，\u8fd9\u662f TypeScript \u9879\u76ee\u5f15\u7528（Project References） \u529f\u80fd\u7684\u4f53\u73b0\u3002<\/p>\n Vite \u56e2\u961f\u91c7\u7528\u8fd9\u79cd\u7ed3\u6784，\u4e3b\u8981\u662f\u4e3a\u4e86\u5c06\u524d\u7aef\u4ee3\u7801（\u8fd0\u884c\u5728\u6d4f\u89c8\u5668\u4e2d）\u548c Vite \u914d\u7f6e\u6587\u4ef6（\u8fd0\u884c\u5728 Node.js \u4e2d）\u7684 TypeScript \u914d\u7f6e\u5206\u79bb，\u5b9e\u73b0\u66f4\u6e05\u6670\u3001\u66f4\u7cbe\u786e\u7684\u7c7b\u578b\u68c0\u67e5\u3002<\/p>\n {<\/span> {<\/span> \/* Bundler mode *\/<\/span> \/* Linting *\/<\/span> "paths"<\/span>:<\/span> {<\/span> tsconfig.node.json \u4e13\u95e8\u7528\u4e8e vite.config.ts \u7684\u7f16\u8bd1\u89c4\u5219，\u6a21\u677f\u9ed8\u8ba4\u751f\u6210\u7684\u5185\u5bb9\u5df2\u7ecf\u53ef\u7528，\u4e00\u822c\u4e0d\u9700\u8981\u4fee\u6539：<\/p>\n {<\/span> \u8fd9\u4e2a\u6587\u4ef6\u544a\u8bc9TS：\u300c\u7f16\u8bd1vite.config.ts\u65f6，\u628atypes\u8bbe\u4e3a["node"]\u800c\u4e0d\u662f["vite\/client"]\u300d\u3002<\/p>\n \/\/\/ <reference types="vite\/client" \/><\/span><\/p>\n interface<\/span> ImportMetaEnv<\/span> {<\/span> interface<\/span> ImportMeta<\/span> {<\/span> VITE_ \u524d\u7f00\u7684\u73af\u5883\u53d8\u91cf\u624d\u80fd\u88ab\u5ba2\u6237\u7aef\u4ee3\u7801\u8bbf\u95ee（import.meta.env.VITE_API_BASE_URL）\u3002<\/p>\n \u5199import Hello from '@\/components\/Hello.vue'\u6bd4\u5199import Hello from '..\/..\/components\/Hello.vue' \u4f18\u96c5\u592a\u591a\u3002\u914d\u7f6e\u5206\u4e24\u6b65，\u4e24\u4e2a\u6587\u4ef6\u5fc5\u987b\u540c\u65f6\u6539，\u7f3a\u4e00\u4e2aTS\u4f1a\u7ea2\u3002<\/p>\n \u7f16\u8f91vite.config.ts：<\/p>\n import<\/span> {<\/span> defineConfig }<\/span> from<\/span> 'vite'<\/span>
\ngit<\/span> switch develop
\ngit<\/span> pull
\ngit<\/span> switch -c<\/span> feature\/lecture-004-frontend-scaffold<\/p>\n\u8fdb\u5165\u5e76\u5b89\u88c5\u4f9d\u8d56<\/h4>\n
\npnpm<\/span> install<\/span><\/p>\n\u542f\u52a8 dev server<\/h4>\n
\n \u279c press h + enter to show help<\/p>\n
\n\u4e09\u3001\u76ee\u5f55\u7ea6\u5b9a<\/h3>\n
\n\u251c\u2500\u2500 public\/ # \u9759\u6001\u8d44\u6e90（\u4e0d\u8fdb\u6253\u5305，\u539f\u6837\u8f93\u51fa）
\n\u251c\u2500\u2500 src\/
\n\u2502 \u251c\u2500\u2500 api\/ # \u63a5\u53e3\u8bf7\u6c42\u5c42
\n\u2502 \u251c\u2500\u2500 assets\/ # \u8d44\u6e90（\u56fe\u7247\u3001\u5b57\u4f53\u3001SVG）
\n\u2502 \u251c\u2500\u2500 components\/ # \u516c\u5171\u7ec4\u4ef6
\n\u2502 \u2502 \u2514\u2500\u2500 HelloShopX.vue # \u7b2c\u4e00\u4e2a\u7ec4\u4ef6
\n\u2502 \u251c\u2500\u2500 composables\/ # \u7ec4\u5408\u5f0f\u51fd\u6570（useXxx）
\n\u2502 \u251c\u2500\u2500 layouts\/ # \u5e03\u5c40\u7ec4\u4ef6
\n\u2502 \u251c\u2500\u2500 router\/ # \u8def\u7531
\n\u2502 \u251c\u2500\u2500 stores\/ # Pinia stores
\n\u2502 \u251c\u2500\u2500 styles\/ # \u5168\u5c40\u6837\u5f0f
\n\u2502 \u2502 \u251c\u2500\u2500 reset.css # \u6d4f\u89c8\u5668\u6837\u5f0f\u91cd\u7f6e
\n\u2502 \u2502 \u2514\u2500\u2500 variables.css # CSS \u53d8\u91cf（\u989c\u8272\u3001\u95f4\u8ddd）
\n\u2502 \u251c\u2500\u2500 types\/ # TS \u7c7b\u578b\u5b9a\u4e49
\n\u2502 \u2502 \u2514\u2500\u2500 goods.ts # \u5546\u54c1\u7c7b\u578b
\n\u2502 \u251c\u2500\u2500 utils\/ # \u5de5\u5177\u51fd\u6570
\n\u2502 \u2502 \u2514\u2500\u2500 format.ts # \u683c\u5f0f\u5316\u51fd\u6570
\n\u2502 \u251c\u2500\u2500 views\/ # \u9875\u9762\u7ec4\u4ef6
\n\u2502 \u2502 \u2514\u2500\u2500 HomeView.vue
\n\u2502 \u251c\u2500\u2500 App.vue # \u6839\u7ec4\u4ef6
\n\u2502 \u251c\u2500\u2500 main.ts # \u5165\u53e3\u6587\u4ef6
\n\u2502 \u2514\u2500\u2500 env.d.ts # Vite\u73af\u5883\u53d8\u91cf\u7c7b\u578b
\n\u251c\u2500\u2500 eslint.config.js # ESLint\u914d\u7f6e（ESLint9+ flat config）
\n\u251c\u2500\u2500 .prettierrc.json # Prettier\u914d\u7f6e
\n\u251c\u2500\u2500 index.html # HTML \u5165\u53e3
\n\u251c\u2500\u2500 package.json
\n\u251c\u2500\u2500 pnpm-lock.yaml
\n\u251c\u2500\u2500 tsconfig.json
\n\u251c\u2500\u2500 tsconfig.app.json
\n\u251c\u2500\u2500 tsconfig.node.json
\n\u251c\u2500\u2500 vite.config.ts
\n\u2514\u2500\u2500 README.md<\/p>\n\u51e0\u4e2a\u76ee\u5f55\u7684\u63d0\u524d\u8bf4\u660e<\/h4>\n
\n
\u547d\u4ee4\u4e00\u6b21\u6027\u5efa\u597d\u7a7a\u76ee\u5f55<\/h4>\n
\ntouch<\/span> src\/{<\/span>api,composables,layouts,router,stores,types,utils}<\/span>\/.gitkeep<\/p>\n
\n\u56db\u3001<script setup>\u8bed\u6cd5\u7cd6<\/h3>\n
\u4e00\u4e2a\u6700\u5c0f\u793a\u4f8b<\/h4>\n
\nimport { ref, computed } from 'vue'<\/p>\n
\nconst double = computed(() => count.value * 2)<\/p>\n
\n count.value++
\n}
\n<\/script><\/p>\n
\n <div class="counter">
\n <p>count is {{ count }}<\/p>
\n <p>double is {{ double }}<\/p>
\n <button @click="increment">click<\/button>
\n <\/div>
\n<\/template><\/p>\n
\n.counter {
\n padding: 20px;
\n text-align: center;
\n}
\n<\/style><\/p>\n\u4e09\u4ef6\u4f60\u9700\u8981\u77e5\u9053\u7684\u4e8b<\/h4>\n
\u4e0eOptions API\u5bf9\u6bd4<\/h4>\n
\nexport default {
\n data() {
\n return { count: 0 }
\n },
\n computed: {
\n double() { return this.count * 2 }
\n },
\n methods: {
\n increment() { this.count++ }
\n }
\n}
\n<\/script><\/p>\n
\nimport { ref, computed } from 'vue'
\nconst count = ref(0)
\nconst double = computed(() => count.value * 2)
\nfunction increment() { count.value++ }
\n<\/script><\/p>\n
\n\u4e94\u3001TypeScript\u914d\u7f6e\u8981\u70b9（Vite\u4e09\u6587\u4ef6\u7ed3\u6784）<\/h3>\n
\u4e09\u4e2a\u6587\u4ef6\u7684\u5206\u5de5<\/h4>\n
\n
\u6587\u4ef6\u4f5c\u7528\u8d1f\u8d23\u8303\u56f4<\/tr>\n \n\n tsconfig.json<\/td>\n \u6839\u914d\u7f6e，\u901a\u8fc7references\u5f15\u7528\u53e6\u5916\u4e24\u4e2a\u6587\u4ef6<\/td>\n \u9879\u76ee\u7ba1\u7406\u5165\u53e3<\/td>\n<\/tr>\n \n tsconfig.app.json<\/td>\n \u4f60\u9700\u8981\u91cd\u70b9\u4fee\u6539\u7684\u6587\u4ef6<\/td>\n src\/\u4e0b\u6240\u6709\u5e94\u7528\u4ee3\u7801<\/td>\n<\/tr>\n \n tsconfig.node.json<\/td>\n \u6784\u5efa\u5de5\u5177\u914d\u7f6e<\/td>\n vite.config.ts\u7b49 Node \u73af\u5883\u6587\u4ef6<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n tsconfig.json\u9ed8\u8ba4\u5185\u5bb9<\/h4>\n
\n "files"<\/span>:<\/span> [<\/span>]<\/span>,<\/span>
\n "references"<\/span>:<\/span> [<\/span>
\n {<\/span> "path"<\/span>:<\/span> ".\/tsconfig.node.json"<\/span> }<\/span>,<\/span>
\n {<\/span> "path"<\/span>:<\/span> ".\/tsconfig.app.json"<\/span> }<\/span>
\n ]<\/span>
\n}<\/span><\/p>\ntsconfig.app.json（\u6838\u5fc3\u4fee\u6539\u6587\u4ef6）<\/h4>\n
\n "compilerOptions"<\/span>:<\/span> {<\/span>
\n "tsBuildInfoFile"<\/span>:<\/span> ".\/node_modules\/.tmp\/tsconfig.app.tsbuildinfo"<\/span>,<\/span>
\n "target"<\/span>:<\/span> "ES2022"<\/span>,<\/span>
\n "useDefineForClassFields"<\/span>:<\/span> true<\/span>,<\/span>
\n "module"<\/span>:<\/span> "ESNext"<\/span>,<\/span>
\n "lib"<\/span>:<\/span> [<\/span>"ES2022"<\/span>,<\/span> "DOM"<\/span>,<\/span> "DOM.Iterable"<\/span>]<\/span>,<\/span>
\n "skipLibCheck"<\/span>:<\/span> true<\/span>,<\/span><\/p>\n
\n "moduleResolution"<\/span>:<\/span> "Bundler"<\/span>,<\/span>
\n "allowImportingTsExtensions"<\/span>:<\/span> true<\/span>,<\/span>
\n "isolatedModules"<\/span>:<\/span> true<\/span>,<\/span>
\n "moduleDetection"<\/span>:<\/span> "force"<\/span>,<\/span>
\n "noEmit"<\/span>:<\/span> true<\/span>,<\/span>
\n "jsx"<\/span>:<\/span> "preserve"<\/span>,<\/span><\/p>\n
\n "strict"<\/span>:<\/span> true<\/span>,<\/span>
\n "noUnusedLocals"<\/span>:<\/span> true<\/span>,<\/span>
\n "noUnusedParameters"<\/span>:<\/span> true<\/span>,<\/span>
\n "noFallthroughCasesInSwitch"<\/span>:<\/span> true<\/span>,<\/span><\/p>\n
\n "@\/*"<\/span>:<\/span> [<\/span>".\/src\/*"<\/span>]<\/span>
\n }<\/span>
\n }<\/span>,<\/span>
\n "include"<\/span>:<\/span> [<\/span>"src\/**\/*.ts"<\/span>,<\/span> "src\/**\/*.tsx"<\/span>,<\/span> "src\/**\/*.vue"<\/span>]<\/span>
\n}<\/span><\/p>\n\u51e0\u4e2a\u5173\u952e\u9879\u89e3\u91ca<\/h4>\n
\n
tsconfig.node.json（\u4fdd\u6301\u9ed8\u8ba4\u5373\u53ef）<\/h4>\n
\n "compilerOptions"<\/span>:<\/span> {<\/span>
\n "tsBuildInfoFile"<\/span>:<\/span> ".\/node_modules\/.tmp\/tsconfig.node.tsbuildinfo"<\/span>,<\/span>
\n "target"<\/span>:<\/span> "ES2023"<\/span>,<\/span>
\n "lib"<\/span>:<\/span> [<\/span>"ES2023"<\/span>]<\/span>,<\/span>
\n "module"<\/span>:<\/span> "ESNext"<\/span>,<\/span>
\n "skipLibCheck"<\/span>:<\/span> true<\/span>,<\/span>
\n "moduleResolution"<\/span>:<\/span> "Bundler"<\/span>,<\/span>
\n "allowImportingTsExtensions"<\/span>:<\/span> true<\/span>,<\/span>
\n "isolatedModules"<\/span>:<\/span> true<\/span>,<\/span>
\n "moduleDetection"<\/span>:<\/span> "force"<\/span>,<\/span>
\n "noEmit"<\/span>:<\/span> true<\/span>,<\/span>
\n "strict"<\/span>:<\/span> true<\/span>,<\/span>
\n "types"<\/span>:<\/span> [<\/span>"node"<\/span>]<\/span>
\n }<\/span>,<\/span>
\n "include"<\/span>:<\/span> [<\/span>"vite.config.ts"<\/span>]<\/span>
\n}<\/span><\/p>\nenv.d.ts\u58f0\u660eVite\u5168\u5c40\u7c7b\u578b<\/h4>\n
\n readonly<\/span> VITE_API_BASE_URL<\/span>:<\/span> string<\/span>
\n}<\/span><\/p>\n
\n readonly<\/span> env:<\/span> ImportMetaEnv
\n}<\/span><\/p>\n
\n\u516d\u3001\u8def\u5f84\u522b\u540d @<\/h3>\n
\u6b65\u9aa4 1：Vite \u914d\u7f6e<\/h4>\n
\nimport<\/span> vue from<\/span> '@vitejs\/plugin-vue'<\/span>
\nimport<\/span> {<\/span> fileURLToPath,<\/span> URL<\/span> }<\/span> from<\/span>