簡易 Vue 專案

📢 本文由 gemini-2.5-flash 翻譯

早期前後端混合開發，溝通成本高，分工不明確，不便管理，也不便維護與擴展。

目前主流的開發模式為前後端分離，透過介面文件進行溝通。

前後端分離開發

前端根據介面文件傳輸參數並解析回應資料，後端則根據介面文件接收參數並給予回應。

開發流程：需求分析 -> 介面定義 (API 介面文件) -> 前後端平行開發 (遵守規範) -> 測試 -> 前後端聯調測試

在介面開發完成前，可以使用 YApi 進行測試。

前端工程化

指的是在企業級的前端專案開發中，將前端開發所需的工具、技術、流程、經驗等進行規範化、標準化。

模組化：JS、CSS
元件化：UI 結構、樣式、行為
規範化：目錄結構、編碼、介面
自動化：建構、部署、測試

Vue 腳手架

Vue-cli 是 Vue 官方提供的一個腳手架，用於快速生成一個 Vue 專案模板，需要 NodeJS。

Vue-cli 提供了以下功能：

統一的目錄結構
本機偵錯
熱部署：修改程式碼後無需重新執行，即可載入最新程式。
單元測試
整合打包上線

NodeJS

前往官方網站安裝，並配置 npm 套件位置。

1
2
3
npm config set prefix "path"
# 取得位置
npm config get prefix

切換 npm 的淘寶鏡像站

1
npm config set registry https://registry.npm.taobao.org

安裝 Vue-cli

1
npm install -g @vue/cli

確認是否安裝成功

1
vue --version

Vue 專案

有命令列和圖形化介面兩種方式。

1
2
3
4
# 命令列
vue create project-name
# 圖形化介面
vue ui

目錄結構

根目錄：

node_modules：存放整個專案的依賴套件
public：專案靜態檔案
src：專案原始碼
package.json：模組基本資訊、專案開發所需的模組、版本資訊
vue.config.js：儲存 Vue 配置的檔案，如代理、連接埠的配置等。

src 資料夾目錄

assets：靜態資源
components：可重複使用的元件
router：路由配置
views：檢視元件 (頁面)
App.vue：入口頁面 (根元件)
main.js：入口 JS 檔案

執行專案

使用 VS Code 可以直接在下方執行。

命令列執行

1
npm run serve

更改連接埠

在 vue.config.js 檔案中：

1
2
3
4
5
6
7
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7589 // 連接埠號碼
  }
})

開發流程

入口檔案為 src/main.js，以下為預設內容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App) // 將匯入的 App 建立虛擬元素
}).$mount('#app') // 掛載到 #app

上述有 import 關鍵字代表匯入元件，與之相對的 export 代表匯出元件。

上述 Vue 物件程式碼類似：

1
2
3
4
5
6
new Vue({
    el: "#app",
    // router: router,
    router, // 當值與鍵相同可省略
    render: h => h(App)
})

Vue 的元件檔案以 .vue 結尾，每個元件由三個部分組成：<template、script、<style>。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <div>
        <!-- HTML 標籤 -->
    </div>
</template>

<script>
    // JS
    export default{
        data(){
            return{
                // 資料模型
            }
        },
        methods:{
            // 方法
        }
    }
</script>

<style>
    /* CSS */
</style>