iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
Vue.js

新手學Nuxt.js系列 第 4

DAY4:自定義 Nuxt.js 配置

  • 分享至 

  • xImage
  •  

管理資料如吃小火鍋

在網站開發中,我們常常要處理各種資料,有時候就像是在吃小火鍋一樣,需要將不同的食材放入湯底,並在適當的時候取出。這時候,Vuex Store就像是湯底,讓我們可以統一管理資料,方便取用。

// 在 store/index.js 中,我們可以設定一個狀態管理器
export const state = () => ({
  count: 0
})

// 透過 mutations 定義操作狀態的方法
export const mutations = {
  increment(state) {
    state.count++
  }
}

插件系統就像添湯底料

Nuxt.js的插件系統讓我們可以輕鬆地擴展功能,就像是在小火鍋中添湯底料,為網站增加新的風味。

// 在 nuxt.config.js 中配置插件
export default {
  plugins: [
    '~/plugins/axios',
    '~/plugins/moment'
  ]
}

自定義配置如調味料

透過配置文件,我們可以像調味料一樣,為Nuxt.js的各項功能添加特色,讓網站更加順口。

// 在 nuxt.config.js 中進行配置
export default {
  buildModules: ['@nuxtjs/tailwindcss'],
  axios: {
    baseURL: 'https://api.example.com'
  }
}

不要害怕探索,不斷學習,因為只有通過實際動手,我們才能真正掌握這個強大的框架。


上一篇
DAY3:Nuxt.js的核心魅力
下一篇
DAY5:航向Nuxt.js的寶藏 - 資料串接與API利用
系列文
新手學Nuxt.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言