切版技術再升級！一課覆蓋 TailwindCSS + Vue3｜打造後台管理頁面 UI

課後你將能運用 Tailwind CSS + Vue3 獨立切版常見的後台管理頁面

# 結合應用兩大業界常用前端框架，培養職場即戰力

想要學習近期火紅的 Tailwind CSS，卻遇到了許多問題？

💡A : 帶同學透過一步步講解以及實作，學會整合Tailwind CSS 和 Vue 3 來完成後台 UI。

💡A : 將會推薦多種實用的組件，學習如何安裝並熟悉套件使用，讓你在開發時能直接套用，省下大量撰寫樣式的時間。

💡A : 帶大家接觸了解現在最快、最潮的前端開發工具 Vite 以及相關套件，輕鬆入門 Vite。

實戰級課程！幫助你更有效率的切版，提升開發網頁的速度

# 講師多年開發經驗全盤托出，就是要幫助你少走彎路

用 Vite 代替 Webpack 開發，擁有閃電般的絕佳開發體驗

課程中除了 Tailwind CSS 與 Vue 3 外，也會帶你接觸現代前端開發不可錯過 Vite，一個提供基本專案腳手架和開發伺服器的構建工具 ! Vite 是 Vue.js 的作者所做的一個新的 bundler，最特別的部份是在開發時不會打包全部程式碼，若要打包的話，webpack 就必須要在一開始走訪所有的檔案來取得相依性，會使得啟動的時間會加長。而 Vite 使用現代瀏覽器原生支持 ES Module 的特性，同時使用 Go 編寫的 esbuild 來預編譯依賴套件，在開發時僅會載入需要的模塊，因而有極短的啟動時間及快速的熱重載，是現代前端開發不可錯過好用工具！

Tailwind  CSS 結合 Vue3，入門前端開發的最佳選擇！

這次的前端架構課程選用 Tailwind CSS 搭配 Vue，Tailwind CSS 靈活的刻板方式和設計系統，搭配上 Vue 的組件功能和優秀的生態圈，讓你可以更舒適的開發前端網頁！

有效優化程式碼架構！優化 Tailwind CSS 的 12 個小技巧搶先知

# 打造效能快、好維護的程式碼

課程提供多種實用套件，讓你不用再造輪子，開發效率 UP！

# 近年來火紅的搜尋工具，還能與多項技術結合應用

在進入實作前，課程除了教你如何啟用安裝軟體順利執行外，還會再推薦你幾種款實用套件，像是 有大量 Vue Composition API 常用工具的 VueUse、快速使用 100 套以上常用 icon 的套件、Headless 無樣式組件庫 等等實用套件，讓你可以不用從零開始寫程式碼，配合套件的組合應用，開發更加順暢無阻。

從大量實作帶你步步培養切版實力

# 開始切版之路的第一步，學會頁面布局與應用組件

使用套件：Headless UI、VueUse、mitt、@kyvg/vue3-notification

# 大數據時代必學！資訊圖表化，各項數據一目了然

使用套件：@hennge/vue3-pagination、chart.js

# 實作發布文章必備的「內容編輯器」

使用套件：@tailwindcss/aspect-ratio、@tailwindcss/forms、@tailwindcss/typography、tiptap、@sipec/vue3-tags-input

# 網頁常見個人資料、登入頁面實作