前端專案基礎指南 Vue 3｜一些官網可能沒有提到的事情和那些建置初期可以注意的事項。

初學Vue 3 學習重點整理、專案結構設計、前端開發VSCode 套件推薦、Open Source 推薦等。

Molly Chi

12 min readJan 14, 2025

✨前言

由於最近公司內部前端需求大增，我被指派到各處去協助初期的專案建置，本文針對 Vue3 的重點學習項目做整理，不會手把手建立專案，只會列一些我覺得可以特別注意的點，官網上面有的基本上我不會列入(請詳讀完官網!)，包含一些經驗分享。

話說工作量變多但薪水沒有多是不是該離開了 🥺🥺🥸🥸

✨ 目錄

1. Vue 3 學習重點整理
2. 專案環境配置
  －.gitignore 
  －專案資料夾結構
  －使用 @ 簡化 Vue 專案中的路徑引入
3. 安裝套件小知識
4. Vue 重點套件
5. 開發工具與資源
  －VSCode 套件推薦
  －入門專案 Open Source 推薦
  －AI 繪製相關
6. 開發技巧與建議
  －用 VGC 建立元件
  －使用 vscode snippets 建立vue模板(2025/01/23新增)
  －Tips

🎉 本篇最好的應用方式是，你已經從官網找到建立專案的指令，然後成功啟動它，接下來你可以參考以下內容，把學習重點放在這些項目上。🎉

✨ Vue 3 學習重點整理

1. 基礎知識

Vue 3 核心概念：reactive 和 ref 的響應式設計。
組件基礎：props、emit 和組件通信。
Composition API 運用。
模板語法：插值（{{ }}）、條件渲染（v-if）、列表渲染（v-for）。
事件處理：v-on、v-bind 等。
環境搭建：使用 Vue CLI 或 Vite 創建 Vue 專案。
推薦閱讀：Vue 3 官方文檔 https://vuejs.org/guide/introduction.html

2. 組件與應用設計

組件通信：父子組件通信（props 傳值與 emit 事件）。
插槽（Slots）：普通插槽與具名插槽。
全局狀態管理：使用 Pinia（取代 Vuex 的簡單狀態管理工具）。
路由：使用 Vue Router，學習路由配置和動態路由。
樣式與動畫：Scoped CSS、Vue 內建動畫系統（<transition> 和 <transition-group>）。
推薦閱讀：Learn Vue 3 in 2023 (freeCodeCamp)

我覺得以上兩個大項目學習完，就可以說自己會使用vue框架了~~~~ 🎉

✨專案環境配置

1. .gitignore

.gitignore 用於 Git 的配置檔案，專門指定應該被 忽略追蹤 的檔案或目錄，這些內容不會被加入版本控制中。通常用於排除以下類型的檔案：

作業系統檔案：如 .DS_Store（macOS）或 Thumbs.db（Windows）。
建置檔案：如 node_modules/、dist/ 等編譯或打包後的檔案。
個人設定：如 IDE 的設定檔（.vscode/ 或 .idea/）。
敏感資料：如 API 金鑰或密碼的檔案（.env）。

2. 常見的 .gitignore 內容

# Node modules 所有的第三方套件
node_modules/
# Build outputs 打包工具
dist/
build/
# Environment variables 環境變數
.env
.env.local
.env.*.local
# Logs 開發過程中可能產生的暫存檔案
npm-debug.log*
yarn-debug.log*
pnpm-debug.log*
# IDE-specific IDE 的配置檔案
.vscode/
.idea/
# OS-specific 系統的資源檔案和暫存檔
.DS_Store
Thumbs.db
# Cache 打包工具的暫存目錄
.cache/
.vite/
# Custom 開發過程中產生的中間文件或備份文件
*.bak
*.tmp
*.swp
# Vue 3 Vue CLI 預設會產生的檔案
*.local

3. 專案資料夾結構

src/
├── api/                  # API 請求 (抽象化 API)
│   ├── auth.js
│   └── user.js
├── assets/               # 靜態資源 (圖片、字型、全域 CSS 等)
│   ├── images/
│   ├── fonts/
│   └── styles/
│       ├── base.css
│       └── variables.scss
├── components/           # 共用元件/通用組件
│   ├── BaseButton.vue
│   ├── BaseInput.vue
│   └── Header.vue
├── composables/          # 自定義 Hook (Composition API 的可重用邏輯)
│   ├── useAuth.js
│   └── useFetch.js
├── directives/           # 自定義指令
│   └── vFocus.js
├── layouts/              # 頁面布局組件
│   ├── DefaultLayout.vue
│   └── AdminLayout.vue
├── router/               # 路由配置
│   ├── index.js
│   └── guards.js         # 路由守衛
├── store/                # 狀態管理 (例如 Pinia)
│   ├── auth.js
│   └── user.js
├── utils/                # 工具函數
│   ├── helpers.js
│   └── validators.js
├── views/                # 頁面級組件
│   ├── Home.vue
│   ├── Login.vue
│   └── Dashboard/
│       ├── Overview.vue
│       └── Settings.vue
├── App.vue               # 主應用程式入口
├── main.js              # 程式進入點 (掛載 Vue 應用)
└── vite.config.js       # Vite 配置檔 (或 webpack.config.js)

資料夾用途說明：

api/：集中處理所有的後端 API 請求，方便維護與擴展。
composables/：放置使用 Composition API 實現的可重用邏輯，例如資料請求、狀態共享、事件處理等。
layouts/：定義頁面外層 (例如後台管理系統的主框架與導航欄)。
router/：集中管理路由配置與守衛邏輯，例如登入驗證、權限檢查等。
store/：使用 Pinia 或 Vuex 進行全局狀態管理，按照功能模組化。
views/：每個頁面一個組件，並可細分子頁面 (例如 Dashboard)。
utils/：寫通用工具函數，例如格式化日期、驗證數據等。
assets/：所有靜態資源 (CSS、圖片、字型等) 統一管理，便於版本控制和引用。

✨ 使用 @ 簡化 Vue 專案中的路徑引入

@ 是一個縮短路徑的快捷方式，通常用來代表專案中的 src 目錄，
在 Vue CLI 項目中，Webpack 已經內建 @ 別名指向 src 目錄，使用預設的就可以。

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

// 使用 @ 縮短路徑
import MyComponent from '@/components/MyComponent.vue';
import { helperFunction } from '@/utils/helpers';

// 如果不使用 @，可能需要這樣寫
import MyComponent from '../../components/MyComponent.vue';
import { helperFunction } from '../../utils/helpers';

✨ 安裝套件小知識

在安裝套件時，需根據用途選擇是 開發環境使用（devDependencies） 還是 生產環境使用（dependencies）。

1. 開發環境（devDependencies）

用途

僅在開發環境中使用，對於應用程式的執行（生產環境）並不必要。
包括測試、編譯、打包、格式化、代碼檢查等工具。

指令

npm instal <package> --save-dev
# 或
yarn add <package> --dev
# 或
pnpm add <package> -D

常見套件

編譯/打包工具：將原始碼轉換為可執行的生產版本。

Webpack、Vite、Parcel
Babel（用於將 ES6+ 語法轉換為舊版語法）
Rollup、Esbuild

2. 代碼檢查工具：靜態代碼檢查和風格控制。

ESLint、Prettier、Stylelint

3. 測試工具：單元測試和端對端測試框架。

Jest、Mocha、Chai、Cypress、Playwright

4. 開發服務器：提供開發環境下的模擬伺服器或工具。

live-server、nodemon（監控文件變化，重新啟動應用）

5. 型別檢查：提供型別檢查或支援。

TypeScript、@types/*（例如：@types/node）

6. CSS 預處理器：

Sass、Less

2. 生產環境（dependencies）

用途

在應用的生產環境中運行所必需的套件。

指令

npm install <package>
# 或
yarn add <package>
# 或
pnpm add <package>

常見套件

應用框架：提供核心應用功能的框架。

Vue
Express（Node.js 的後端框架）
Next.js、Nuxt.js

2. UI 工具：前端 UI 組件或樣式相關工具。

Bootstrap、Tailwind CSS、Material-UI

3. 數據處理與 API：與數據處理或後端溝通的工具。

Axios（HTTP 請求工具）
Lodash（實用工具函數庫）
Moment.js、Day.js（處理日期和時間）

4. 數據庫與 ORM：與數據庫交互的工具。

Sequelize、Mongoose

✨ Vue 重點套件

Pinia：推薦用於全局狀態管理。
Vue Router：配置路由。https://router.vuejs.org/
Axios：用於處理 HTTP 請求。
vgc（不一定）

AI 繪製相關

Fabric.js
Konva.js

✨ 開發工具與資源

VSCode 套件推薦

Import Cost：顯示匯入套件的大小。
Indent Rainbow：讓縮排更易讀。
JavaScript (ES6) Code Snippets：ES6 快捷代碼。
Path Intellisense：文件路徑自動完成。
SVG Preview：SVG 文件預覽。
Vue — Official：Vue 官方插件。
Tailwind CSS IntelliSense：Tailwind CSS 智能提示。
Color Highlight：顏色代碼高亮。
Git Graph：圖形化 Git 操作。
Material Icon Theme：美化檔案圖示（不一定要～～讓 icon 可可愛愛的）。

✨ 入門專案 Open Source 推薦

可以直接看別人寫的專案，從模仿開始學習：

https://github.com/xdlumia/vue3-video-play/tree/main
https://github.com/ismail9k/vue3-carousel
https://github.com/buqiyuan/vue3-antdv-admin（Vite 5.x + Vue 3.x + Ant Design Vue 4.x + TypeScript Hooks）

✨ 開發技巧與建議

用 VGC 建立元件

VGC（Vue Generate Component）會將 Vue 組件拆分為邏輯、UI、樣式三個檔案，便於後續維護。

<template src="./footer.component.html"></template>
<script src="./footer.component.js"></script>
<style src="./footer.component.scss" scoped lang="scss"></style>

但他 2020 後沒有再更新，所以可能要考慮是否要引入
不過我們也可以手動建立檔案，我還是覺得拆分開來比較好~~~~

使用 vscode snippets 建立vue模板

建立 .vue 檔案的 template 可以在 VScode 內建的 snippets -> 輸入 vue -> 會到 vue.json，在這裡設定快捷指令

使用方式就是在 .vue 檔案中，輸入 vue，就會跳出建立好的模板~~~

我的話基礎內容是這樣寫

{
 "vue模板": {
    "prefix": "vue",
    "body": [
   "<template>",
   "  <div class=''>",
   "  </div>",
   "</template>",
   "",
   "<script setup lang=\"ts\">",
   "import { ref, reactive, onMounted } from 'vue'",
   "",
   "// 狀態與邏輯",
   "const state = reactive({})", 
   "const someRef = ref(null)",
   "",
   "onMounted(() => {",
   "  console.log('Component mounted')",
   "  // await API",
   "})",
   "</script>",
   "",
   "<style scoped>",
   "</style>"
    ],
    "description": "Vue 3 Composition API 模板"
  }
}

(他可以設定很多個模板複雜一點就是會再加上基本的 function 跟 props)

✨ Tips

在專案一開就需要先確認路徑(router)設計跟是否要引入多語系(Vue I18n)，會影響後續的專案維護。
Vite 的讀音是 /veet/。

✨ 碎碎念

如果有空的話再來出進階指南… (目前無限期延後🥺
好想寫 React 或 App 阿～～～～～～

前端專案基礎指南 Vue 3｜一些官網可能沒有提到的事情和那些建置初期可以注意的事項。

初學Vue 3 學習重點整理、專案結構設計、前端開發VSCode 套件推薦、Open Source 推薦等。

✨前言

✨ 目錄

✨ Vue 3 學習重點整理

1. 基礎知識

2. 組件與應用設計

✨專案環境配置

1. .gitignore

2. 常見的 .gitignore 內容

3. 專案資料夾結構

✨ 使用 @ 簡化 Vue 專案中的路徑引入

✨ 安裝套件小知識

1. 開發環境（devDependencies）

用途

指令

常見套件

2. 生產環境（dependencies）

用途

指令

常見套件

✨ Vue 重點套件

✨ 開發工具與資源

VSCode 套件推薦

✨ 入門專案 Open Source 推薦

✨ 開發技巧與建議

用 VGC 建立元件

使用 vscode snippets 建立vue模板

✨ Tips

✨ 碎碎念

Written by Molly Chi

No responses yet