Mike @ Laravel X Vue Conf Taiwan 2023
去年也有出現
Developer Experience
開發者體驗最直接影響的就是我們的工作效率,相同的時間可以做更多工作...
by Anthony Fu
現實情況
Client HMR (熱更新)
Server HMR (熱更新)
後端 API 更新
套件與模組整合
提供開發上你會用到的 Composables
Composables | description |
---|---|
useAsyncData | page、components 和 plugins 中可以在server端獲取非同步的資料。 |
useFetch | 簡化 useAsyncData 跟 $fetch 的組合。 |
useCookie | 可在 Client 跟 Server 讀取寫入cookie。 |
useHead | 用來管理 html head 所有的標籤。 |
useSeoMeta | 更好管理 SEO tag 的使用,避免低級錯誤。 |
useRoute & useRouter | vue-router 相關的操作。 |
useRuntimeConfig | 讀取環境變數。 |
useError | 在 Client 跟 Server 攔截 Global Error。 |
useNuxtApp | 可以讀取 Vue 實體,調用其各種方法。 |
提供開發的實用工具
Utils | description |
---|---|
$fetch | 整合 ofetch 以便在開發中取得API資料。 |
clearError | 使用它來清除所有錯誤並重定向用戶。 |
createError | 新建有Status Code及錯誤訊息的錯誤。 |
preloadComponents | 可以預先載入 Component 。 |
preloadRouteComponents | 可以手動預先載入頁面的內容。 |
refreshNuxtData | 重新刷新 server端獲取的資料。 |
reloadNuxtApp | 重新載入整個Nuxt應用程式。 |
showError | 提供一個直接在畫面上顯示錯誤的工具。 |
onBeforeRouteUpdate | router更新前會觸發 |
setPageLayout | 可以動態去改變頁面的 Layout |
按照你的需求建立架構
單頁式網站
形象官網
平台服務
nuxt 利用 Vue <Transition> 組件來達成 pages 跟 layout 之間的過場
可以讀取 .md .yml .csv .json 產生靜態頁面渲染
nuxt 提供了 useState 來處理跨組件的狀態管理
讓 Nuxt3 的開發者體驗有感提升的特性
https://thecodingpro.com/
https://thecodingpro.com/about
https://thecodingpro.com/social/web-side
https://thecodingpro.com/courses/123
https://thecodingpro.com/courses/456
https://thecodingpro.com/user-mike
https://thecodingpro.com/user-kuro
server/
|-- /api
|-- hello.js
http://localhost:3000/api/people
http://localhost:3000/api/people/create
http://localhost:3000/api/people/remove
http://localhost:3000/api/people/update
components/
|-- Hello.client.vue
|-- Hello.server.vue
plugins/
|-- test.client.js
|-- test.server.js
middleware/
|-- test.global.js
<LazyHelloWorld />
框架給你的,你可以不用
但是框架完全不給絕對超麻煩
最極致的開發者體驗
當你不喜歡一個東西的時候優點都會變成缺點
你不相信的話可以去 twitter 看看
X
vue 也有 DevTools 喔~
https://github.com/webfansplz/vite-plugin-vue-devtools
限時優惠折扣碼 1200 元 : vueconf
https://thecodingpro.com/courses/nuxt3
https://reurl.cc/p6GqQZ