iT邦幫忙

2024 iThome 鐵人賽

DAY 1
0

今天,我們正式開始建置專案,這是登山的第一步!

Well begun is half done.
好的開始是成功的一半!

主要架構
前端框架:Vue.js
語言:TypeScript
UI 套件:PrimeVue

建立 Nuxt+Vue3 專案
我們將採用 Nuxt 結合 Vue3 來搭建專案。
首先,使用以下指令初始化專案:

npx nuxi@latest init nuxt-ts-primevue(project-name)

在建置過程中,提示選擇使用哪一種套件管理工具。
https://ithelp.ithome.com.tw/upload/images/20240907/20169148K8H6qru40V.png

接著,進行初始化:
https://ithelp.ithome.com.tw/upload/images/20240907/201691482R9nm3VEkU.png

套件管理工具 (npm、Yarn、pnpm)

  • npm、Yarn 和pnpm 都是JavaScript 套件管理工具
  • 速度對比:pnpm > Yarn > npm。
  • pnpm 不僅速度更快,還能更有效地節省磁碟空間。

Nuxt框架

  • 基於 Vue.js 的框架,幫助開發人員構建伺服器端渲染 (SSR)、靜態生成 (SSG) 和單頁應用 (SPA)。
  • 集成了 Vite,提供更快、更輕量的開發體驗,適合 JavaScript 框架。

Nuxt 的主要特點:

  • 伺服器端渲染 (SSR):提升加載速度和 SEO 。
  • 靜態網站生成 (SSG):編譯為靜態文件,方便部署。
  • 文件系統路由:基於文件系統自動生成路由,簡化路由管理。
  • 豐富的模組與插件系統:Nuxt 支援許多模組和插件,方便整合認證、API 調用等功能。

這個月,我將紀錄 Nuxt 框架的學習歷程,並探索如何使用 PrimeVue 套件。

我已經踏出了第一步,充滿鬥志!繼續加油!
明天見~


上一篇
Day01 - PrimeVue 簡介
下一篇
Day03 - 註冊PrimeVue
系列文
深入探索PrimeVue 套件及元件寫法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言