package.json
、package-lock.json
、node_modules
@
取代 ./src
vite.config.js
index.html
npm init vue@latest
| npm init vue@3
透過 npm init vue@latest
後,按照內建提示進行,在選擇週邊工具時,額外選擇了 Vue Router、Pinia、ESLint 和 Prettier,最後建置出來的 Vue 專案資料夾如下:
hello-vite/
├── index.html
├── node_modules
├── package.json
├── package-lock.json
├── public
│ └── favicon.ico
├── README.md
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── base.css
│ │ ├── logo.svg
│ │ └── main.css
│ ├── components
│ │ ├── HelloWorld.vue
│ │ ├── icons (略 - 放所有 icon 的 svg 檔)
│ │ ├── TheWelcome.vue
│ │ └── WelcomeItem.vue
│ ├── main.js
│ ├── router
│ │ └── index.js
│ ├── stores
│ │ └── counter.js
│ └── views
│ ├── AboutView.vue
│ └── HomeView.vue
└── vite.config.js
vite.config.js
npm run dev
),Vite 會自動解析專案根目錄內的 vite.config.js
,根據設定來打包專案import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
'@'
取代 './src'
。用 vite
指令進行打包時,會進行預處理。index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<body>
裡面已經有一個 div
,id 為 app
<script>
指向 📂 src 下的 main.js
主要的檔案和程式碼都會放在這裡。
App.vue
.vue
檔是 Vue 特有的檔案類型main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
App.vue
,傳入 createApp()
中創建一個 Vue 實體,透過 .mount(#app)
將內容渲染到 HTML 上的 div#app
內favicon.ico
public/favicon.ico
應寫成 /favicon.ico
package.json
& package-lock.json
package.json
裡面會有 3 個預先寫好的 script 腳本,用來執行 Vite 相關指令 (指令作用後面會提到)"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
.gitignore
:node_modules
寫在裡面package.json
安裝的所有套件(及套件相依套件)都會在這個資料夾下npm install
就可以根據 package.json
進行安裝所需套件vite.config.js
是 vite 的設定檔,可以用來客製化打包的需求;以官網建立的 Vue 專案為例,對路徑設定了別名,所以在專案路徑可以用 @
取代 ./src
main.js
程式碼進入點,會在這裡創建 Vue 實例,並掛載到 DOM 上App.vue
網頁的根元件