<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          基于Vite構(gòu)建工具,用Strve.js開發(fā)一個簡版TodoList(真香!)

          共 847字,需瀏覽 2分鐘

           ·

          2022-04-20 21:21

          發(fā)布Strve已經(jīng)有三個月了,今天就給大家做一個小項(xiàng)目??匆豢催@個小框架到底好不好用。


          我們今天就做一個簡版的TodoList,項(xiàng)目雖小,但是五臟俱全。包含了對文本的增刪改,非常值得上手。


          開發(fā)項(xiàng)目之前,我需要打開官方文檔,查閱Strve項(xiàng)目構(gòu)建工具Create Strve App是怎么使用的。操作(具體操作大家可以根據(jù)文檔)一番后,我們會看到下面這些。



          文件目錄是不是覺得特別清爽,然后又是基于Vite搭建的,所以開發(fā)體驗(yàn)也是不錯的。Strve底層是全面擁抱Es Modules,使用Vite搭建項(xiàng)目是不二之選。

          下面,我們要實(shí)現(xiàn)一款簡版的TodoList應(yīng)用。它是一個單頁面應(yīng)用,所以我們僅需要在一個JS文件中開發(fā),HTML與JS可以在一起寫,從另一種角度上跟JSX思想差不多。邏輯代碼如下圖所示,大家可以參照一下,另外,我在項(xiàng)目中使用了CSS Modules。雖然,現(xiàn)在只有一個頁面。


          我們會看到邏輯區(qū)域與顯示區(qū)域都很一目了然,我們僅僅去關(guān)心數(shù)據(jù),操作數(shù)據(jù)就可以了。相比于JQ那種命令式API,拿來DOM就是干的方式,這種聲明式API就非常優(yōu)雅高效。


          我們接下來就是發(fā)布部署了,下面是打包之后的文件目錄。


          然后,我們發(fā)布到云端,并且進(jìn)行測試跑分。居然,可以跑到99分,其實(shí)我有信心可以跑到100分的()。


          這篇文章很簡短,大體介紹了Strve開發(fā)一個小項(xiàng)目的流程。如果感興趣的朋友可以互相交流下。



          項(xiàng)目云端地址
          https://www.maomin.club/site/todolist

          Strve源代碼地址
          https://github.com/maomincoding/strve


          往期推薦


          覺得自己的前端頁面不夠花里胡哨?試試clip-path!
          對話Svelte未來,Rust 編譯器?構(gòu)建大型應(yīng)用?
          收藏!史上最全 Vue 前端代碼風(fēng)格指南

          最后


          • 歡迎加我微信,拉你進(jìn)技術(shù)群,長期交流學(xué)習(xí)...

          • 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端,做個專業(yè)的技術(shù)人...

          點(diǎn)個在看支持我吧
          瀏覽 27
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評論
          圖片
          表情
          推薦
          點(diǎn)贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  亚洲大几吧色色91视频 | 亚洲午夜成人天堂精品 | 黄色片勉费视频网站 | 午夜黄色毛片 | 人人操人人干在线观看 |