前言

      很多同學在拿到項目的前端源碼後，不理解項目每個模塊的作用，不知道每個模塊之間是怎麼相互調用和關聯的，不知道從哪裏入手分析。處在一個比較尷尬的局面，本篇文章將從系統框架、項目結構、模塊間作用説明。同時結合實際項目進行深入的解答分析。讓你快速瞭解掌握你的項目，並能上手開發。

  什麼是前端？

    前端，簡單來説，就是用户直接能看到和操作的部分，比如網頁、App、小程序裏的界面。前端負責做的事情：1、搭建網頁或App的頁面（比如按鈕、表單、圖片、商品列表）；2、處理用户的交互操作（比如點擊、滑動、提交表單）；3跟後端溝通接口（比如拿商品數據，顯示到頁面上）；4、美化和優化界面體驗（比如動畫效果、加載速度）。

   舉例説明：你打開淘寶，看到首頁有商品推薦，能點進商品詳情頁，這整個“能看到、能操作的部分”就是前端做出來的。而你在點擊“購買”之後，背後查庫存、生成訂單，就是後端在處理。

前端項目結構及介紹

     在 Vue 項目中，代碼大致分成三大部分（也叫三層），主要目的是便於開發和維護，主要分為頁面佈局部分、頁面數據部分、頁面數據交互處理部分：

【其它模塊等下會講明，先講解最為重要的頁面開發部分】

1. 視圖層（View）

• 主要內容：就是頁面上能看到的內容，比如按鈕、輸入框、列表、圖片等等。
• 寫在哪裏？：HTML 模板裏（Vue的 <template> 部分）
• 作用是什麼？：

• 把數據展示出來
• 負責和用户進行交互（比如點擊、輸入）

• 簡單理解：就像前台窗口小姐姐，負責“面對用户”，把後台準備好的數據，漂漂亮亮地展示出來。

例子：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="changeTitle">點我換標題</button>
  </div>
</template>

2. 數據層（Model）

• 主要內容：就是頁面上展示的數據本體，比如用户名字、商品價格、新聞列表等。
• 寫在哪裏？：data() 函數中
• 作用是什麼？：

• 保存數據
• 數據變化了，頁面會自動同步更新（Vue的核心特性：響應式）

• 簡單理解：就像“後台倉庫”，負責存放所有重要數據，用户操作改變數據後，前台馬上刷新。

例子：

<script>
export default {
  data() {
    return {
      title: '歡迎來到我的網站'
    }
  }
}
</script>

3. 邏輯層（ViewModel）

• 主要內容：是處理頁面上各種動作和邏輯，比如：

• 點擊按鈕以後要做什麼？
• 提交表單要發請求？
• 切換主題、跳轉頁面？

• 寫在哪裏？ methods 方法裏，一部分是處理邏輯操作，一部分是和後台接口數據交互的邏輯，有時也用到 computed、watch等鈎子，預先加載一些數據。或者動態監聽數據變化。
• 作用是什麼？

• 負責“指揮”數據怎麼變化
• 負責“響應”用户的操作

• 簡單理解 像中間協調員（ViewModel），連接用户操作（View）和數據變化（Model）。

例子：

<script>

export default {
  data() {
    return {
      title: '歡迎來到我的網站'
    }
  },
  methods: {
    changeTitle() {
      this.title = '謝謝你的點擊！'
    }
  }
}
</script>

整體圖理解一下

用户操作（點擊按鈕）
   ↓
View 視圖層（模板）
   ↓
ViewModel 邏輯層（methods 處理）
   ↓
Model 數據層（data 改變）
   ↓
View 視圖層（頁面自動刷新）

       首先，Vue 腳手架（比如用 vite 或 vue-cli 創建的項目），其實就是幫我們搭建好了一個完整的開發環境+項目結構，讓你不用從零配置，開箱即用。前端項目基本上都是腳手架搭建好基礎框架，然後在這個基礎上進行開發：

vue2-project/
├── build/                # webpack打包配置
├── config/               # 開發環境/生產環境配置
├── node_modules/         # 依賴庫
├── static/               # 靜態文件(不會被webpack打包)
├── src/                  # 核心開發目錄
│   ├── api/              # 後端接口管理
│   ├── assets/           # 圖片、字體、樣式
│   ├── components/       # 複用小組件
│   ├── router/           # 路由配置（vue-router）
│   ├── store/            # 狀態管理（vuex）
│   ├── utils/            # 工具函數
│   ├── views/            # 頁面組件（對應路由）
│   ├── App.vue           # 根組件
│   └── main.js           # 入口文件
├── .babelrc              # babel配置文件
├── .eslintrc.js          # eslint代碼檢查規則
├── package.json          # 項目描述/依賴管理
├── README.md             # 項目介紹
└── index.html            # 主html頁面

各個模塊作用大致如下：

項目結構模塊詳細説明

       這個截圖是我開發的一個前端Vue2 項目目錄結構，基本上 前端Vue2 項目都包含如下相關模塊，我會對每個模塊都進行詳細的説明：

1.接口類（src/api/）幹啥的？

   這裏專門放和後端服務器交互的代碼。比如：想要獲取用户列表、提交註冊信息、獲取文章內容等，都需要發請求，這些請求接口集中放這裏。簡單理解：接口類就是前端和後端溝通的橋樑，統一管理所有“拿數據、發數據”的地方。

2. 靜態資源模塊（src/assets/ 或 static/）

    放項目用到的圖片、圖標、背景圖、字體文件、CSS全局樣式等。這些文件基本不會動態變化，就是靜靜地放在那裏，隨時可以拿來用。簡單理解：靜態資源模塊就是:項目的美術倉庫，圖片、樣式、字體，啥好看、啥固定，啥就放這裏。

小例子：

• assets/logo.png → 項目Logo
• assets/global.css → 通用樣式表

頁面裏引用時直接用，比如：

3. 組件模塊（src/components/）

    把項目裏能重複用的小模塊單獨封裝成組件。比如：按鈕、分頁器、彈窗、表格，這些地方多次使用的話，不用每次都重新寫。簡單理解：組件模塊就是把常用功能打包成樂高積木，要用時直接拿過來拼裝。

小例子：

• Button.vue 👉通用按鈕
• Modal.vue 👉彈窗組件
• Pagination.vue 👉翻頁器組件

在頁面中直接引用，比如：

4. 路由跳轉（src/router/）

   管理不同頁面之間怎麼跳轉，用户點不同的菜單/鏈接，對應打開不同的頁面。簡單理解：路由就是給項目畫好地圖，告訴瀏覽器："點擊這裏，跳到哪裏。"

小例子：

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
Vue.use(Router)
export default new Router({
  routes: [
    { path:   '/', component: Home },
    { path:   '/about', component: () => import('@/views/About.vue') }
  ]
})

👉訪問/about，就打開 About 頁面！

5. 頁面部分（src/views/）

  放每一個完整功能的大頁面，比如：首頁、登錄頁、註冊頁、個人中心頁等等。頁面通常會組合很多小組件（從 components 裏拿的）來組成一個完整的佈局。簡單理解：頁面部分就是每一個完整的大模塊，是用户真正看到的內容界面。

小例子：

• Home.vue 👉首頁內容
• Login.vue 👉登錄界面
• UserProfile.vue 👉用户個人中心
• 
  

前端（Vue2）項目，就像搭積木蓋房子

用接口類拿數據，

用靜態資源美化外觀，

用組件模塊封裝小部件，

用路由跳轉組織導航，

用頁面部分展現大場面！