基于Vite構建工具,用Strve.js開發一個簡版TodoList(真香!)
發布Strve已經有三個月了,今天就給大家做一個小項目。看一看這個小框架到底好不好用。
我們今天就做一個簡版的TodoList,項目雖小,但是五臟俱全。包含了對文本的增刪改,非常值得上手。
開發項目之前,我需要打開官方文檔,查閱Strve項目構建工具Create Strve App是怎么使用的。操作(具體操作大家可以根據文檔)一番后,我們會看到下面這些。
文件目錄是不是覺得特別清爽,然后又是基于Vite搭建的,所以開發體驗也是不錯的。Strve底層是全面擁抱Es Modules,使用Vite搭建項目是不二之選。
下面,我們要實現一款簡版的TodoList應用。它是一個單頁面應用,所以我們僅需要在一個JS文件中開發,HTML與JS可以在一起寫,從另一種角度上跟JSX思想差不多。邏輯代碼如下圖所示,大家可以參照一下,另外,我在項目中使用了CSS Modules。雖然,現在只有一個頁面。
我們會看到邏輯區域與顯示區域都很一目了然,我們僅僅去關心數據,操作數據就可以了。相比于JQ那種命令式API,拿來DOM就是干的方式,這種聲明式API就非常優雅高效。
我們接下來就是發布部署了,下面是打包之后的文件目錄。
然后,我們發布到云端,并且進行測試跑分。居然,可以跑到99分,其實我有信心可以跑到100分的(
)。
這篇文章很簡短,大體介紹了Strve開發一個小項目的流程。