每次前端構建工具發大版本，圈子里總免不了一陣討論。最近 Vite 8 正式發布，很多人的第一反應估計是：“怎么又雙叒叕發版了？” 拋開官方那些華麗的宣傳詞，作為技術愛好者，我們更關心的是：這次是常規的擠牙膏，還是底層的真革命？ 為了探個究竟，我沒有盲信更新日志，直接在本地跑了一組最樸素的
applek
2026-03-18
Vue中使用路由。在切換的時候，由于頁面重新渲染，會先移除原來的路由，再顯示新路由，首次加載的時候，就會閃動。 可以使用動畫，設置淡入淡出。這樣就可以避免閃動了。 Vue自帶一個動畫組件 <Transition> 是一個內置組件，無需注冊。它可以將進入和離開動畫應用到通
applek
2024-01-26
前端開發的時候，有些列表或比較長的頁面會存在有很多圖片需要加載。一次加載太多圖片，會占用很大的帶寬，影響網頁的加載速度。為提升用戶體驗，希望視覺窗口外的圖像不會加載，讓用戶瀏覽到什么地方，就加載該處的圖片。這樣能明顯減少了服務器的壓力和流量，也能夠減小瀏覽器的負擔，降低卡頓現象發生。 網頁中如
applek
2023-12-15
網頁加載的時候先顯示一個動畫，等加載完成后，再顯示網頁，這樣做過度比較自然。用戶體驗感比較好。 原理 原理是，給網頁頂部放一個元素，元素占滿全屏，加載完成后，再通過JS移除這個元素即可。 簡單在網頁頂部寫個代碼，一個div，作為容器，然后設置樣式，給占滿全屏。 <style>
applek
2023-12-09
"我正準備點那里！為什么移走了？?" 布局偏移可能會分散用戶的注意力。想象一下，您已經開始閱讀一篇文章，可是頁面上的元素突然位移，讓您措手不及，于是您不得不再次找到先前閱讀的位置。這在網絡上十分常見，包括在閱讀新聞或嘗試單擊"搜索"或"添加到購物車"按鈕時。這種體驗在視覺上十分扎眼且令人郁悶。
applek
2023-04-16
vite如果把全部的文件都給本地打包的話，體積就很大，所以把公共庫給打包出來，就能減少很多體積。 使用vite插件vite-plugin-cdn-import，很方便的打包。下面以vue和element-plus為例。 安裝插件 npm install vite-plugin-cdn-im
applek
2023-01-27
flex布局匯總，如果子元素如果文字長度超出，并不會按預期“文字超出部分顯示為用省略號代替”顯示，文字超出部分會撐開容器顯示。 已經給超出文字的div設置了如下css overflow:hidden; text-overflow: ellipsis; white-space: nowra
applek
2022-05-05
JavaScript 中的?this，因其靈活的指向、復雜的使用場景一直是面試中的熱點，不論是初級還是中高級開發者，這都是一道必考題。這個概念雖然基礎，但是非常重要，是否能深刻理解?this，是前端 JavaScript 中進階的重要一環。this?指向多變，很多隱蔽的 bug 都緣于它。與此同時，
applek
2022-01-01
靜態資源 CDN 公共庫是指一些服務商將我們常用的 JavaScript 庫存放到網上，方便開發者直接調用，并且還對其提供 CDN 加速，這樣一來可以讓用戶加速訪問這些資源，二來還可節約自己服務器的流量。 目前國內的CDN，主要同步的資源來源于：https://cdnjs.com/ 也就
applek
2021-12-27
Fancybox是圖片燈箱插件，lazyload是延遲加載插件。如果兩個插件一起使用，由于圖片延遲加載，所以在只加載了第一張圖片的時候，點擊第一張圖片，彈出燈箱，在燈箱中切換下一張圖片，會獲取不到延遲加載的圖片，可能會獲取到站位圖片。 解決方法，為延遲加載的圖片，添加data-src 屬性，屬
applek
2021-11-23
網頁頭部加一個網頁加載進度條，看起來還是挺有意思的。其實制作很簡單，只需要用JS監聽網頁加載進度即可。 使用jQuery $({property: 0}).animate({property: 100}, { duration: 5000,//進度條加載進度的速度
applek
2021-03-10
?一般來說，開發者對網頁字體使用會相對接觸比較少一些，使用最多也無非是 font-family ，以及可能會加載幾個網絡字體。 加載字體可能會遇到些問題，在字體加載完成之前，網頁文字會變成空白，直到字體加載完成，字體文件不大還好說，但是文件一大，就要等很久才能顯示。 可以使用如下方法來解
applek
2021-03-06
雖然說Bootstrap已經對外觀進行很大的改進了，但是Bootstrap的默認界面還是很非主流，并不太時候我們的審美。MDB 5 UI KIT則是基于Bootstrap 5的一款前端UI框架，改進了Bootstrap的樣式，讓組件變得很好看。 默認界面好看太多了，如下： 同時，
applek
2021-03-05
在做網頁開發中,前端頁面顯示時經常會用到字體庫圖標,如 iconfont, fontawesome, glyphicons, lonicons等 其中最著名的就是fontawesome了，現在版本已經更新到了5.x 一.fontawesome本質原理 fontawesome本質上是把圖標做
applek
2021-02-21
Vue3已經出來有這么一段時間了，現在項目可以遷移到vue3上面去了，vue3大升級，性能更強，體積更小，值得使用。 環境安裝 安裝vue-cli腳手架，幫助我們快速搭建vue項目 項目地址：https://cli.vuejs.org/zh/ 安裝命令，以npm為準，其他的環境請見官
applek
2020-11-02