iT邦幫忙

2022 iThome 鐵人賽

DAY 3
3
Modern Web

真的好想離開 Vue 3 新手村 feat. CompositionAPI系列 第 3

真的好想離開 Vue 3 新手村 - Day 3: 細看 Vue + Vite 專案資料夾結構

  • 分享至 

  • xImage
  •  

誰適合看這篇

  • 已經初步了解 npm、package.jsonpackage-lock.jsonnode_modules
  • 建立 Vue 專案後,沒有仔細看過整個資料夾內容,不了解各個資料夾的意義
  • 不知道為什麼在 Vue 專案寫路徑時,可以用 @ 取代 ./src

Outline

  • 認識專案資料夾結構
    • vite.config.js
    • index.html
    • 📂 src
    • 📂 public
    • 專案設定與套件相關檔案

Vite 資料夾結構

  • 使用指令:npm init vue@latestnpm init vue@3
  • 加點工具:Vue Router、Pinia、ESLint 和 Prettier

透過 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

1. vite.config.js

  • Vite 的設定檔,在每次執行 vite 時 (如: 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 指令進行打包時,會進行預處理。
  • 可以在這裡對打包、本地啟動伺服器等,做更多設定。

2. 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

3. 📂 src

主要的檔案和程式碼都會放在這裡。

  • 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')
    
    • 內容快速解析:
      1. 引用根元件 App.vue,傳入 createApp() 中創建一個 Vue 實體,透過 .mount(#app) 將內容渲染到 HTML 上的 div#app
      2. 通常會在這裡引入其他插件、工具,如:Pinia 和 Vue Router
  • 資料夾說明
    • 📂 assets:放靜態資源,如:圖片、CSS
    • 📂 components:放元件檔
    • 其他週邊工具相關資料夾
      • 📂 stores:與 Pinia 狀態管理器有關
      • 📂 router:與 Vue Router 路由管理有關
      • 📂 views:放路由元件(通常為畫面/頁面)

4. 📂 public

  • 裡面的東西不會經過編譯和打包,所以放在 📂 public 內的東西不能被 Javascript 引用
  • 通常會放置 ( 不被 JavaScript ) 引用的靜態資源,例如:網頁標題欄 icon,即資料夾中的 favicon.ico
  • 在整份專案進行打包的時候,📂裡面的檔案會直接被複製一份,放在根目錄內,所以要引用 📂 public 內的資源時,要使用根目錄絕對路徑,舉例:要拿 public/favicon.ico 應寫成 /favicon.ico

5. 專案設定與套件相關

- package.json & package-lock.json

  • 是整個專案的設定檔
  • 會紀錄所使用到的套件與版本
  • package.json 裡面會有 3 個預先寫好的 script 腳本,用來執行 Vite 相關指令 (指令作用後面會提到)
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
},

- .gitignore:

  • git 版本控制下,想要排除的檔案,如: 📂 node_modules 等等
  • 建立專案時已經將 node_modules 寫在裡面

- 📂 node_modules

  • npm 根據 package.json 安裝的所有套件(及套件相依套件)都會在這個資料夾下
  • 檔案體積大,通常會被排除在 git 版控外,共同開發者只要執行 npm install 就可以根據 package.json 進行安裝所需套件
  • 專案依賴的套件則透過打包工具進行打包

總結

  1. vite.config.js 是 vite 的設定檔,可以用來客製化打包的需求;以官網建立的 Vue 專案為例,對路徑設定了別名,所以在專案路徑可以用 取代 ./src
  2. 📂 src 資料夾是主要程式碼的存放位置,裡面會有
    • main.js 程式碼進入點,會在這裡創建 Vue 實例,並掛載到 DOM 上
    • App.vue 網頁的根元件
  3. 📂 public 資料夾不會經過編譯和打包,會直接複製一份到根目錄
    • 不能放會被 Javascript 引入的東西
    • 取資料夾內的檔案路徑為根目錄絕對路徑

參考資料:


上一篇
真的好想離開 Vue 3 新手村 - Day 2: 建立 Vue 專案開發環境 feat. Vite
下一篇
真的好想離開 Vue 3 新手村 - Day 4: 從 npm run build (vite build) 簡單認識打包
系列文
真的好想離開 Vue 3 新手村 feat. CompositionAPI31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言