[{"data":1,"prerenderedAt":383},["ShallowReactive",2],{"blog:\u002Fblog\u002Fvue\u002Fcreate-project":3},{"id":4,"title":5,"author":6,"body":7,"category":368,"date":369,"description":370,"draft":371,"extension":372,"image":373,"meta":374,"navigation":375,"path":376,"seo":377,"series":373,"seriesOrder":373,"seriesTitle":373,"stem":378,"tags":379,"updatedAt":373,"__hash__":382},"blog\u002Fblog\u002Fvue\u002Fcreate-project\u002Findex.md","以 Vite 創建一個 Vue.js 專案","charles",{"type":8,"value":9,"toc":358},"minimark",[10,14,38,41,65,91,171,174,182,186,213,216,354],[11,12,13],"h2",{"id":13},"準備環境",[15,16,17,26,32],"ul",{},[18,19,20,21],"li",{},"Node.js 環境 ",[22,23,25],"a",{"href":24},"\u002Fblog\u002Fnodejs\u002Fnvm","🔗參考",[18,27,28,29],{},"pnpm 套件管理器 ",[22,30,25],{"href":31},"\u002Fblog\u002Fnodejs\u002Fpackage-manager",[18,33,34,35],{},"VS Code 編輯器 ",[22,36,25],{"href":37},"\u002Fblog\u002Fvscode\u002Fintro",[11,39,40],{"id":40},"建立專案",[42,43,44,54,62],"ol",{},[18,45,46,47],{},"開啟資料夾到你想要建立專案的位置。\n",[48,49,50],"blockquote",{},[51,52,53],"p",{},"可以使用 Ctrl + K Ctrl + O 快捷鍵開啟資料夾。",[18,55,56,57],{},"在 VS Code 開啟終端機\n",[48,58,59],{},[51,60,61],{},"可以使用 Ctrl + J 或 Ctrl + ` 快捷鍵開啟終端機。",[18,63,64],{},"執行以下指令建立專案",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","pnpm create vite\n","bash","",[73,74,75],"code",{"__ignoreMap":71},[76,77,80,84,88],"span",{"class":78,"line":79},"line",1,[76,81,83],{"class":82},"sbgvK","pnpm",[76,85,87],{"class":86},"s_sjI"," create",[76,89,90],{"class":86}," vite\n",[15,92,93,100,107,113,125,145,165],{},[18,94,95,96],{},"輸入專案名稱\n",[97,98],"img",{"alt":71,"src":99},"\u002Fimages\u002Fblog\u002Fvue\u002Fcreate-project\u002Fimage.png",[18,101,102,103],{},"按上下鍵選擇 Vue，按 Enter 鍵確認\n",[97,104],{"alt":105,"src":106},"alt text","\u002Fimages\u002Fblog\u002Fvue\u002Fcreate-project\u002Fimage-1.png",[18,108,109,110],{},"選擇 TypeScript 或 JavaScript\n",[97,111],{"alt":105,"src":112},"\u002Fimages\u002Fblog\u002Fvue\u002Fcreate-project\u002Fimage-2.png",[18,114,115,116,119,122],{},"重新選擇專案資料夾，進入剛才建立的專案資料夾\n",[97,117],{"alt":105,"src":118},"\u002Fimages\u002Fblog\u002Fvue\u002Fcreate-project\u002Fimage-4.png",[120,121],"br",{},[97,123],{"alt":105,"src":124},"\u002Fimages\u002Fblog\u002Fvue\u002Fcreate-project\u002Fimage-3.png",[18,126,127,128,140,142],{},"安裝專案相依套件",[66,129,131],{"className":68,"code":130,"language":70,"meta":71,"style":71},"pnpm install\n",[73,132,133],{"__ignoreMap":71},[76,134,135,137],{"class":78,"line":79},[76,136,83],{"class":82},[76,138,139],{"class":86}," install\n",[120,141],{},[97,143],{"alt":105,"src":144},"\u002Fimages\u002Fblog\u002Fvue\u002Fcreate-project\u002Fimage-5.png",[18,146,147,148,160,162],{},"啟動開發伺服器",[66,149,151],{"className":68,"code":150,"language":70,"meta":71,"style":71},"pnpm dev\n",[73,152,153],{"__ignoreMap":71},[76,154,155,157],{"class":78,"line":79},[76,156,83],{"class":82},[76,158,159],{"class":86}," dev\n",[120,161],{},[97,163],{"alt":105,"src":164},"\u002Fimages\u002Fblog\u002Fvue\u002Fcreate-project\u002Fimage-6.png",[18,166,167,168],{},"按住 Ctrl + 滑鼠點擊網址，即可在瀏覽器開啟專案\n",[97,169],{"alt":105,"src":170},"\u002Fimages\u002Fblog\u002Fvue\u002Fcreate-project\u002Fimage-7.png",[11,172,173],{"id":173},"專案架構說明",[66,175,180],{"className":176,"code":178,"language":179},[177],"language-text",".\n├── README.md\n├── index.html\n├── node*modules\n│ ├── @vitejs\n│ │ └── plugin-vue -> ..\u002F.pnpm\u002F@vitejs+plugin-vue@5.1.4_vite@5.4.8_vue@3.5.12_typescript@5.6.3*\u002Fnode_modules\u002F@vitejs\u002Fplugin-vue\n│ ├── typescript -> .pnpm\u002Ftypescript@5.6.3\u002Fnode_modules\u002Ftypescript\n│ ├── vite -> .pnpm\u002Fvite@5.4.8\u002Fnode_modules\u002Fvite\n│ ├── vue -> .pnpm\u002Fvue@3.5.12_typescript@5.6.3\u002Fnode_modules\u002Fvue\n│ └── vue-tsc -> .pnpm\u002Fvue-tsc@2.1.6_typescript@5.6.3\u002Fnode_modules\u002Fvue-tsc\n├── package.json\n├── pnpm-lock.yaml\n├── public\n│ └── vite.svg\n├── src\n│ ├── App.vue\n│ ├── assets\n│ │ └── vue.svg\n│ ├── components\n│ │ └── HelloWorld.vue\n│ ├── main.ts\n│ ├── style.css\n│ └── vite-env.d.ts\n├── tsconfig.app.json\n├── tsconfig.json\n├── tsconfig.node.json\n└── vite.config.ts\n","text",[73,181,178],{"__ignoreMap":71},[183,184,185],"h3",{"id":185},"根目錄",[15,187,188,195,201,207],{},[18,189,190,194],{},[191,192,193],"strong",{},"README.md",": 專案的說明文件，包含專案的概述、安裝指引以及使用說明等資訊。",[18,196,197,200],{},[191,198,199],{},"index.html",": 專案的入口 HTML 文件，Vite 會將 JavaScript 文件自動引入到這裡。",[18,202,203,206],{},[191,204,205],{},"package.json",": 專案的配置文件，包含了專案的名稱、版本、依賴、指令等。",[18,208,209,212],{},[191,210,211],{},"pnpm-lock.yaml",": pnpm 的版本鎖定文件，用來確保專案的依賴版本一致。",[183,214,215],{"id":215},"資料夾",[15,217,218,256,270,330,336,342,348],{},[18,219,220,223,224],{},[191,221,222],{},"node_modules\u002F",": 這是專案的依賴目錄，所有的第三方依賴都會被安裝到這裡。\n",[15,225,226,232,238,244,250],{},[18,227,228,231],{},[191,229,230],{},"@vitejs\u002Fplugin-vue",": Vite 的 Vue 插件，用來處理 Vue 單文件元件。",[18,233,234,237],{},[191,235,236],{},"typescript",": TypeScript 編譯器，用來編譯 TypeScript 文件。",[18,239,240,243],{},[191,241,242],{},"vite",": Vite 的核心框架，用來啟動開發伺服器、打包應用等。",[18,245,246,249],{},[191,247,248],{},"vue",": Vue.js 框架，用來構建 Vue 應用。",[18,251,252,255],{},[191,253,254],{},"vue-tsc",": Vue 的 TypeScript 編譯器，用來編譯 Vue 單文件元件中的 TypeScript。",[18,257,258,261,262],{},[191,259,260],{},"public\u002F",": 這是公共資源目錄，裡面的資源會被直接複製到打包後的目錄中。\n",[15,263,264],{},[18,265,266,269],{},[191,267,268],{},"vite.svg",": 這是一個範例 SVG 圖片，會被複製到打包後的目錄中。",[18,271,272,275,276],{},[191,273,274],{},"src\u002F",": 這是專案的來源代碼目錄，包含了所有的 Vue 元件、樣式表、佈局、服務、模組、入口文件等。\n",[15,277,278,284,298,312,318,324],{},[18,279,280,283],{},[191,281,282],{},"App.vue",": 這是 Vue 專案的根元件，集成了所有的子元件跟頁面。",[18,285,286,289,290],{},[191,287,288],{},"assets\u002F",": 儲存各種靜態資源，像是圖片、字體等。\n",[15,291,292],{},[18,293,294,297],{},[191,295,296],{},"vue.svg",": 範例 SVG 圖片，用來展示如何在 Vue 元件中引入靜態資源。",[18,299,300,303,304],{},[191,301,302],{},"components\u002F",": 這是 Vue 元件目錄，用來存放所有的 Vue 元件。\n",[15,305,306],{},[18,307,308,311],{},[191,309,310],{},"HelloWorld.vue",": 這是一個範例 Vue 元件，用來展示如何創建一個 Vue 元件。",[18,313,314,317],{},[191,315,316],{},"main.ts",": 應用的入口文件，用來初始化 Vue 應用。",[18,319,320,323],{},[191,321,322],{},"style.css",": 全域樣式表，用來定義全域的樣式規則。",[18,325,326,329],{},[191,327,328],{},"vite-env.d.ts",": Vite 的 TypeScript 宣告文件，提供一些全域的型別支援。",[18,331,332,335],{},[191,333,334],{},"tsconfig.app.json",": 對於應用程式的 TypeScript 配置文件，主要針對專案的編譯選項進行設定。",[18,337,338,341],{},[191,339,340],{},"tsconfig.json",": 通用的 TypeScript 配置文件，整體專案的型別檢查、編譯等規則。",[18,343,344,347],{},[191,345,346],{},"tsconfig.node.json",": 針對 Node.js 環境的 TypeScript 配置。",[18,349,350,353],{},[191,351,352],{},"vite.config.ts",": Vite 的配置文件，用來設定專案的各種打包與開發伺服器的行為。可以在這裡定義例如路徑別名、插件等等。",[355,356,357],"style",{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":71,"searchDepth":359,"depth":359,"links":360},3,[361,363,364],{"id":13,"depth":362,"text":13},2,{"id":40,"depth":362,"text":40},{"id":173,"depth":362,"text":173,"children":365},[366,367],{"id":185,"depth":359,"text":185},{"id":215,"depth":359,"text":215},"Vue.js","2024-10-13","本篇將介紹如何使用 Vite 快速建立一個 Vue.js 專案，從安裝、啟動及基本設置的操作步驟。",false,"md",null,{},true,"\u002Fblog\u002Fvue\u002Fcreate-project",{"title":5,"description":370},"blog\u002Fvue\u002Fcreate-project\u002Findex",[368,380,381],"Frontend","Vite","xSc_c42NRUKavVCQimck_QEEl1iSfPDbp9G6_yn0-Rs",1780512500794]