D18 - 整合後端 API:在 Nuxt 中使用 Axios 實現資料動態渲染

更新於 2024/11/03閱讀時間約 26 分鐘

哈囉,大家好!在前面的文章中,我們已經成功地建立了 Nuxt 的開發環境,並且深入了解了 Nuxt 的前端結構,特別是 app.vue 和 layouts/default.vue 的作用。現在,是時候讓我們的應用程式真正「活」起來,與後端進行互動了。

今天,我們將探討如何在 Nuxt 中使用 Axios 來整合 Laravel 後端 API,實現資料的動態渲染。透過這個過程,我們的個人財務管理系統將能夠真正地為使用者提供服務,從後端獲取資料,並在前端呈現。


一、為什麼要使用 Axios?

在現代的前端開發中,與後端進行 HTTP 請求已經是不可或缺的一部分。Axios 是一個基於 Promise 的 HTTP 客戶端,可以用在瀏覽器和 Node.js 中。相比於原生的 fetch API,Axios 提供了更直觀的語法和更豐富的功能,例如自動轉換 JSON、攔截請求和回應、取消請求等。

使用 Axios,我們可以:

  • 簡化 HTTP 請求的撰寫:直觀的語法讓程式碼更易讀。
  • 處理攔截器:可以在請求或回應被處理前攔截它們,方便我們添加全域的錯誤處理或身份驗證。
  • 自動轉換資料格式:自動將回應轉換為 JSON,減少手動解析的麻煩。

二、在 Nuxt 中設定 Axios

在 Nuxt 中,我們可以輕鬆地整合 Axios。有兩種主要的方式:

  1. 使用官方的 @nuxtjs/axios 模組:這個模組為 Axios 提供了 Nuxt 的封裝,讓我們可以更方便地在 Nuxt 中使用 Axios。
  2. 直接安裝 Axios:如果你想要更輕量化或客製化的設定,可以直接安裝 Axios 並在需要的地方自行引入。
    在這裡,我們將採用第一種方式,使用 @nuxtjs/axios 模組。

1. 安裝 @nuxtjs/axios

首先,我們需要在 Nuxt 專案中安裝 @nuxtjs/axios 模組。

步驟:

確保你在 Nuxt 容器內(如果不確定,請執行 docker-compose exec frontend sh 進入容器)。

npm install @nuxtjs/axios

2. 設定 nuxt.config.js

在安裝完畢後,我們需要在 nuxt.config.js 中添加 Axios 模組的設定。

編輯 nuxt.config.js:

export default {
// 其他設定...
modules: [
'@nuxtjs/axios',
],
axios: {
baseURL: 'http://api.localhost', // 後端 API 的基礎 URL
},
// 其他設定...
}

這樣,我們就可以在 Nuxt 中使用 Axios,並且所有的請求都會以 baseURL 作為基礎。

3. 使用環境變數管理 baseURL

為了方便在不同環境(如開發、測試、正式)中切換,我們可以使用環境變數來管理 baseURL。

步驟:

在專案根目錄下建立一個 .env 檔案(如果尚未建立):

API_BASE_URL=http://api.localhost

修改 nuxt.config.js:

export default {
// 其他設定...
publicRuntimeConfig: {
axios: {
browserBaseURL: process.env.API_BASE_URL,
},
},
privateRuntimeConfig: {
axios: {
baseURL: process.env.API_BASE_URL,
},
},
// 其他設定...
}

這樣,我們就可以在不同的環境中,透過設定環境變數來調整 baseURL。

三、在 Nuxt 中使用 Axios 獲取資料

現在,我們已經設定好了 Axios,接下來,我們將在頁面或元件中使用 Axios 來從後端獲取資料。

1. 在 pages/transactions.vue 中獲取交易紀錄

我們以交易紀錄頁面為例,實現從後端獲取交易資料並在前端渲染。

步驟:

(1)編輯 pages/transactions.vue:

<template>
<div>
<h2 class="text-2xl font-bold mb-4">交易紀錄</h2>
<ul>
<li v-for="transaction in transactions" :key="transaction.id">
<p>{{ transaction.description }} - {{ transaction.amount }}</p>
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
transactions: [],
}
},
async mounted() {
try {
const response = await this.$axios.get('/api/transactions')
this.transactions = response.data
} catch (error) {
console.error('Error fetching transactions:', error)
}
},
}
</script>

<style scoped>
/* 頁面專屬的樣式 */
</style>

解釋:

  • 我們在 data 中定義了一個空的 transactions 陣列,用於存放從後端獲取的交易資料。
  • 在 mounted 生命週期鉤子中,我們使用 this.$axios.get('/api/transactions') 發送 GET 請求到後端。
  • 請求成功後,我們將回應的資料賦值給 transactions,然後在模板中使用 v-for 迭代渲染。

2. 處理 API 回應格式

在前一篇文章中,我們提到應該統一 API 的回應格式,方便前後端協作。假設後端的回應格式為:

{
"status": "success",
"data": [
{
"id": 1,
"description": "購買書籍",
"amount": 500,
// 其他欄位...
},
// 更多交易...
]
}

那麼,我們需要在前端提取 data 中的資料。

修改 transactions.vue:

async mounted() {
try {
const response = await this.$axios.get('/api/transactions')
if (response.data.status === 'success') {
this.transactions = response.data.data
} else {
console.error('API returned an error:', response.data.message)
}
} catch (error) {
console.error('Error fetching transactions:', error)
}
}

3. 改進錯誤處理

為了提升使用者體驗,我們應該在發生錯誤時,向使用者顯示友好的提示。

修改 transactions.vue:

<template>
<div>
<h2 class="text-2xl font-bold mb-4">交易紀錄</h2>
<div v-if="error" class="text-red-500">
{{ error }}
</div>
<ul v-else>
<li v-for="transaction in transactions" :key="transaction.id">
<p>{{ transaction.description }} - {{ transaction.amount }}</p>
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
transactions: [],
error: null,
}
},
async mounted() {
try {
const response = await this.$axios.get('/api/transactions')
if (response.data.status === 'success') {
this.transactions = response.data.data
} else {
this.error = response.data.message || '無法獲取交易資料。'
}
} catch (error) {
this.error = '伺服器發生錯誤,請稍後再試。'
console.error('Error fetching transactions:', error)
}
},
}
</script>

<style scoped>
/* 頁面專屬的樣式 */
</style>

現在,如果發生錯誤,使用者將看到友好的錯誤訊息。

四、在元件中使用 Axios

除了在頁面中,我們也可以在元件中使用 Axios。為了提高程式碼的重用性和可維護性,我們可以將交易列表提取為一個元件。

1. 建立 components/TransactionList.vue

編輯 components/TransactionList.vue:

<template>
<div>
<div v-if="error" class="text-red-500">
{{ error }}
</div>
<ul v-else>
<li v-for="transaction in transactions" :key="transaction.id">
<p>{{ transaction.description }} - {{ transaction.amount }}</p>
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
transactions: [],
error: null,
}
},
async mounted() {
try {
const response = await this.$axios.get('/api/transactions')
if (response.data.status === 'success') {
this.transactions = response.data.data
} else {
this.error = response.data.message || '無法獲取交易資料。'
}
} catch (error) {
this.error = '伺服器發生錯誤,請稍後再試。'
console.error('Error fetching transactions:', error)
}
},
}
</script>

<style scoped>
/* 元件專屬的樣式 */
</style>

2. 在頁面中使用元件

修改 pages/transactions.vue:

<template>
<div>
<h2 class="text-2xl font-bold mb-4">交易紀錄</h2>
<TransactionList />
</div>
</template>

<script>
import TransactionList from '~/components/TransactionList.vue'

export default {
components: {
TransactionList,
},
}
</script>

<style scoped>
/* 頁面專屬的樣式 */
</style>

這樣,我們就成功地將交易列表提取為可重用的元件,未來在其他頁面中也可以使用。

五、處理身份驗證和保護路由

在實際的應用中,交易紀錄應該只允許已登入的使用者訪問。因此,我們需要實作身份驗證機制,並在前端進行保護。

1. 後端實作身份驗證 API

為了不讓本文過於冗長,我們假設後端已經實作了登入和註冊的 API,並使用 JWT(JSON Web Token)進行身份驗證。

  • POST /api/login:登入,回傳 JWT Token。
  • POST /api/register:註冊。
  • 受保護的路由需要在 Header 中附帶 Authorization: Bearer {token}。

2. 在前端設定 Axios 攔截器

我們可以使用 Axios 攔截器,在請求發送前自動在 Header 中添加 Token。

步驟:

在 plugins/ 目錄下建立 axios.js:

export default function ({ $axios, store }) {
$axios.onRequest((config) => {
const token = store.state.auth.token
if (token) {
config.headers.common.Authorization = `Bearer ${token}`
}
})
}

修改 nuxt.config.js:

export default {
// 其他設定...
plugins: [
'~/plugins/axios.js',
],
// 其他設定...
}

3. 建立登入和註冊頁面

建立 pages/login.vue:

<template>
<div class="max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-4">登入</h2>
<form @submit.prevent="login">
<div class="mb-4">
<label class="block">電子郵件</label>
<input v-model="email" type="email" class="border p-2 w-full" required />
</div>
<div class="mb-4">
<label class="block">密碼</label>
<input v-model="password" type="password" class="border p-2 w-full" required />
</div>
<div v-if="error" class="text-red-500 mb-4">
{{ error }}
</div>
<button type="submit" class="bg-blue-600 text-white p-2">登入</button>
</form>
</div>
</template>

<script>
export default {
data() {
return {
email: '',
password: '',
error: null,
}
},
methods: {
async login() {
try {
const response = await this.$axios.post('/api/login', {
email: this.email,
password: this.password,
})
if (response.data.status === 'success') {
this.$store.commit('auth/setToken', response.data.token)
this.$router.push('/')
} else {
this.error = response.data.message || '登入失敗。'
}
} catch (error) {
this.error = '伺服器發生錯誤,請稍後再試。'
console.error('Error during login:', error)
}
},
},
}
</script>

<style scoped>
/* 頁面專屬的樣式 */
</style>

4. 設定 Vuex 進行狀態管理

我們需要使用 Vuex(或 Pinia)來管理使用者的身份驗證狀態。

步驟:

在 store/ 目錄下建立 auth.js:

export const state = () => ({
token: null,
})

export const mutations = {
setToken(state, token) {
state.token = token
},
clearToken(state) {
state.token = null
},
}

export const getters = {
isAuthenticated(state) {
return !!state.token
},
}

5. 保護受限的頁面

我們可以使用 Nuxt 的中介層(middleware)來保護需要身份驗證的頁面。

步驟:

在 middleware/ 目錄下建立 auth.js:

export default function ({ store, redirect }) {
if (!store.getters['auth/isAuthenticated']) {
return redirect('/login')
}
}

修改需要保護的頁面

例如,在 pages/transactions.vue 中:

export default {
middleware: 'auth',
// 其他設定...
}

這樣,未登入的使用者將被自動導向登入頁面。

六、測試與驗證

現在,我們已經整合了後端 API,並實作了基本的身份驗證功能。讓我們來測試一下:

  1. 啟動後端與前端服務:確保後端 Laravel API 和前端 Nuxt 應用都在運行。
  2. 註冊新帳號:訪問 /register 頁面,建立新帳號。
  3. 登入:使用新帳號登入,確認是否成功取得 Token,並被導向首頁。
  4. 訪問受保護的頁面:嘗試訪問 /transactions,應該能夠正常獲取並顯示交易紀錄。
  5. 測試錯誤處理:嘗試輸入錯誤的登入資訊,確認錯誤訊息是否正常顯示。

七、優化與進階

1. 使用 asyncData 或 fetch 方法

在 Nuxt 中,我們可以使用 asyncData 或 fetch 方法來在頁面渲染之前獲取資料,這對於需要 SSR(伺服器端渲染)的頁面特別有用。

範例:

export default {
async asyncData({ $axios }) {
try {
const response = await $axios.get('/api/transactions')
if (response.data.status === 'success') {
return {
transactions: response.data.data,
}
} else {
return {
error: response.data.message || '無法獲取交易資料。',
}
}
} catch (error) {
return {
error: '伺服器發生錯誤,請稍後再試。',
}
}
},
data() {
return {
transactions: [],
error: null,
}
},
}

2. 建立全域的錯誤處理機制

為了避免在每個請求中都重複處理錯誤,我們可以在 Axios 攔截器中統一處理。

修改 plugins/axios.js:

export default function ({ $axios, store, redirect }) {
$axios.onRequest((config) => {
const token = store.state.auth.token
if (token) {
config.headers.common.Authorization = `Bearer ${token}`
}
})

$axios.onError((error) => {
const code = parseInt(error.response && error.response.status)
if (code === 401) {
store.commit('auth/clearToken')
redirect('/login')
}
})
}

這樣,當遇到 401 未授權錯誤時,將自動清除 Token 並導向登入頁面。

小結

今天,我們成功地整合了後端 API,並在 Nuxt 中使用 Axios 實現了資料的動態渲染。同時,我們也實作了基本的身份驗證功能,並學習了如何保護受限的頁面。


透過這些步驟,我們的個人財務管理系統已經初具規模,使用者可以登入系統,查看自己的交易紀錄,並享受良好的使用者體驗。


Next

接下來,我們可以:

  • 繼續完善功能:實作交易的新增、編輯、刪除功能,以及其他需要的功能。
  • 優化使用者介面:使用 Tailwind CSS 或其他 UI 庫,提升介面的美觀和易用性。
  • 增加測試覆蓋率:為前端撰寫測試,確保功能的穩定性。
  • 部署應用程式:將應用部署到線上,讓更多人可以使用。

希望這篇文章能夠對你有所幫助,讓我們一起繼續學習和進步,打造出更加優秀的應用程式!

感謝你的閱讀,如果你有任何問題或建議,歡迎在下方留言討論。我們下篇見!


這是一系列以軟體開發為主題的輕鬆分享,內容涵蓋了技術選擇、開發經驗、實戰應用等多方面的議題。無論是如何在眾多框架中做出選擇,還是如何應對技術轉移的挑戰,作者都用幽默、有趣的對話風格,將複雜的技術問題轉化為易懂的故事。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
哈囉,大家好!我們將探討 Nuxt 開發環境的建立與應用介面規劃,通過使用 Nuxt 的約定式結構和全域佈局,我們更高效地管理前端界面,並設計了首頁、交易紀錄、銀行帳戶等頁面。未來計畫包括整合後端 API、身份驗證及介面優化。
完成後端基本功能並通過驗收後,我們開始使用 Nuxt 架設個人財務管理系統的前端。Nuxt 基於 Vue,學習曲線平緩且配置簡單,適合不同程度的開發者。透過 Docker,我們快速建立了 Nuxt 開發環境,並搭建首頁和交易紀錄頁面,整合 Tailwind CSS 提供美觀的 UI。
我們已完成個人財務管理系統的後端核心功能,並進行了中期驗收,確認API的正確性和需求的達成。通過Postman測試各個API並檢查資料驗證,確保後續的前端整合能順利進行。接下來,將實作身份驗證機制並開始Nuxt.js前端開發,提升系統的整體品質與安全性。
單元測試為重構提供了安全防線,確保程式碼在修改後仍能正常運作。透過撰寫測試,我們能夠提高程式碼品質、預防回歸錯誤,並在重構過程中更具信心。測試的過程不僅幫助找出錯誤,也促使我們深入思考系統設計,從而優化整體架構。
單元測試不僅能發現錯誤,更是提升開發技能的關鍵工具。Laravel 提供強大的測試框架,讓我們可以輕鬆撰寫測試。建立測試資料庫、撰寫測試方法、使用 Factory 生成測試資料,能確保程式碼穩定,並幫助開發者在修改與重構中更有信心。持續撰寫測試能提高程式碼品質,並讓開發過程更有條理與安全感。
本文介紹了如何在 Laravel 中實作控制器,為個人財務管理系統建立完整的 CRUD API。我們實現了資料的建立、查詢、更新和刪除,並使用資料驗證提升應用安全性。未來將進行程式碼重構及 API 測試,持續優化應用程式。
哈囉,大家好!我們將探討 Nuxt 開發環境的建立與應用介面規劃,通過使用 Nuxt 的約定式結構和全域佈局,我們更高效地管理前端界面,並設計了首頁、交易紀錄、銀行帳戶等頁面。未來計畫包括整合後端 API、身份驗證及介面優化。
完成後端基本功能並通過驗收後,我們開始使用 Nuxt 架設個人財務管理系統的前端。Nuxt 基於 Vue,學習曲線平緩且配置簡單,適合不同程度的開發者。透過 Docker,我們快速建立了 Nuxt 開發環境,並搭建首頁和交易紀錄頁面,整合 Tailwind CSS 提供美觀的 UI。
我們已完成個人財務管理系統的後端核心功能,並進行了中期驗收,確認API的正確性和需求的達成。通過Postman測試各個API並檢查資料驗證,確保後續的前端整合能順利進行。接下來,將實作身份驗證機制並開始Nuxt.js前端開發,提升系統的整體品質與安全性。
單元測試為重構提供了安全防線,確保程式碼在修改後仍能正常運作。透過撰寫測試,我們能夠提高程式碼品質、預防回歸錯誤,並在重構過程中更具信心。測試的過程不僅幫助找出錯誤,也促使我們深入思考系統設計,從而優化整體架構。
單元測試不僅能發現錯誤,更是提升開發技能的關鍵工具。Laravel 提供強大的測試框架,讓我們可以輕鬆撰寫測試。建立測試資料庫、撰寫測試方法、使用 Factory 生成測試資料,能確保程式碼穩定,並幫助開發者在修改與重構中更有信心。持續撰寫測試能提高程式碼品質,並讓開發過程更有條理與安全感。
本文介紹了如何在 Laravel 中實作控制器,為個人財務管理系統建立完整的 CRUD API。我們實現了資料的建立、查詢、更新和刪除,並使用資料驗證提升應用安全性。未來將進行程式碼重構及 API 測試,持續優化應用程式。
你可能也想看
Google News 追蹤
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
投資新手大多從身邊市場開始著手,選擇台股市場入門,單筆投資或台股定期定額投資,隨著經驗累積,進入美股市場也是好選擇,這篇文章帶你前進美股投資,證券開戶選擇國內券商複委託,使用美股定期定額投資,並以國泰 CUBE App為例說明。 內容目錄: 1.一站式開戶:以國泰世華 CUBE App 為例
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
投資新手大多從身邊市場開始著手,選擇台股市場入門,單筆投資或台股定期定額投資,隨著經驗累積,進入美股市場也是好選擇,這篇文章帶你前進美股投資,證券開戶選擇國內券商複委託,使用美股定期定額投資,並以國泰 CUBE App為例說明。 內容目錄: 1.一站式開戶:以國泰世華 CUBE App 為例
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
※ 補充說明: ※ npm 常用指令: ◦ npm init–y:快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。 ◦ npm info 套件名稱 version:快速查詢指定 npm 套件的最新版本號。 ◦ npm install套件名稱:用來安裝
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
env 環境變數的設定,通常是為為了 server 而設定的,能快速的切換狀態,但現在的網頁開始,前端的範圍逐漸往後端靠近,所以在設定,也會有 client 的變數會想要在 .env 的情況。此篇就是以 nuxt 為實作,分享此內容 前端架構 最常見的 front 架構,就是把專案 buil