hiskio

    2 小時上手 Tailwind CSS x Vue 3，手把手帶你實作 To-do list

    2021 必學的超夯 CSS 框架－Tailwind CSS！實戰級課程，帶你學會 Vite + Vue 3 + Tailwind 的開發方式，課後你將能活用 Tailwind，做出 To-do list！

    79
    4.3

    • 使用 Vite 前端開發工具

    • Vite + Vue 3 + Tailwind 的開發方式

    • 使用 Vue 套件 - VueUse

    • Tailwind CSS 刻介面時的小技巧

    • 課後活用 Tailwind，獨立實作 To-do list

    US$30.91

    想學習 2021 必學的超夯框架 Tailwind CSS，卻困難重重？

    ❓ 每次有靈感時想要開始實作時，用 Webpack 啟動新專案卻開啟很久，或被複雜的配置折騰半天？


    💡A：課程將會教如何使用 Vite 前端開發工具，極短的server啟動時間和快速的熱重載，CSS、打包生產版本 等常見功能開箱即用，讓你擁有比 Webpack 更舒服的開發體驗！


    ❓ 想在 Vite 中使用 Tailwind CSS 和 JIT 模式，但卻因不熟悉安裝方式而導致導入失敗？


    💡A：課程將會帶大家完成安裝 Tailwind CSS 並開啟 JIT 模式，讓你盡情享受 Vite + Tailwind 的絕佳開發體驗。


    ❓ 雖然入門了 Tailwind CSS，但總感覺介面做得不漂亮？


    💡A：課程將會教到用 Tailwind CSS 刻介面時的一些小技巧，讓你刻出來的畫面更漂亮、更有質感。


    掌握 Tailwind CSS 核心語法，課後獨立做出 To-Do List


    用 Vite 代替 Webpack 開發，擁有 Vite + Tailwind 的絕佳開發體驗

    Vite 使用現代瀏覽器原生支持 ES Module 的特性，同時使用 Go 編寫的 esbuild 來預編譯依賴套件，因而有極短的啟動時間及快速的熱重載。同時搭配 Tailwind 更是如虎添翼，可以說是現代前端開發不可錯過的兩套工具！



    你將學到什麼？

    • 使用 Vite 前端開發工具
    • Vite + Vue 3 + Tailwind 的開發方式
    • 使用 Vue 套件 - VueUse
    • Tailwind CSS 刻介面時的小技巧
    • 課後活用 Tailwind，獨立實作 To-do list



    講師資訊


    Lucas

    哈囉！我是 Lucas！喜歡研究和分享有趣的技術。2年網頁接案經驗，包含極緻空間設計官網、3D 模型購物網等。擅長使用的框架為 Laravel、Vue.js、Tailwind CSS。另外建有部落格「星星的筆記」，同時也是臉書社群 Tailwind CSS 台灣 的版主。

    章節目錄

    • 1-1
      直播簡報 & To-do list 範例
    • 1-2
      介紹和建立 Vite 專案
    • 1-3
      安裝 Tailwind CSS
    • 1-4
      安裝 Tailwind CSS Forms
    • 1-5
      基本 To-Do List 版面
    • 1-6
      新增項目
    • 1-7
      顯示項目列表
    • 1-8
      勾選項目
    • 1-9
      刪除項目
    • 1-10
      編輯項目
    • 1-11
      切換顯示模式
    • 1-12
      列表項目過渡
    • 1-13
      同步資料至 localStorage
    • 1-14
      抽離邏輯
    • 1-15
      補充抽離邏輯
    • 1-16
      結語
    • 1-17
      補充直播略過的功能

    試閱影片

    常見問答

    如果您購買的是募資課程，請在課程的【簡介】中查看開課時間，募資課程將於開課時間所述日期開放同學上課。

     

    若您購買的是一般課程（開放上課課程），則在購買完成後可以立即開始觀看。

     

    所有線上課程皆不受時間限制，享無限次永久觀看！

    猜你喜歡

    購買前問答

    謝山姆
    謝山姆

    請問老師，如果我是使用

    還是您有

    謝謝

    Lucas 洛可
    Lucas 洛可

    當然適合喔~ 這堂課就是使用 Vue 3 的 Composition API 來教學的~

    不過如果有寫過 Composition API 上課會更容易吸收~

     

    只是差別在於是這是直播課程，當時錄製的時候還不是使用現在最新的 <script setup> + Composition API 的寫法，還是使用包在 setup() 方法裡面寫 Composition API 的方式，只有這個替換過來就可以了。

     

    (如果怕會混亂，上課時還是可以依照教學的內容來練習，可以熟悉之後再來替換)

     

    而轉換方式以很簡單：

    1. 在 <script> 標籤裡將 setup() 方法內的程式提升至最上層，但刪除 return { ... } 返回的物件

    2. <script> 標籤修改成 <script setup>

    3. props 和 emits 的定義分別移至 defineProps(...) 和 defineEmits(...)

     

    以下給您轉換 setup() 方法成 <script setup> 的參考：

     

    課程中使用的 setup() 方法：

    <script>import{ ref }from'vue'exportdefault{emits:['addTodo'],setup(props,{ emit }){const newTodo =ref('')constaddTodo=()=>{// ...}return{ newTodo, addTodo }},}</script>

     

    現在最新的 <script setup> 寫法：

    <scriptsetup>import{ ref }from'vue'defineEmits(['addTodo'])const newTodo =ref('')constaddTodo=()=>{// ...}</script>

     

    當然如果還不確定的話，可以先觀看免費的試看教學，等確定之後歡迎購買學習喔~

    謝山姆
    謝山姆

    謝謝老師的回覆

    銷售方案