vue項目部署後提示用户有新版本
你可能在瀏覽器見到過上面這種UI，這是在vue項目重新build在服務端部署後，瀏覽器刷新頁面彈出的提示，這時如果用户點擊更新就會重載頁面，清除之前的緩存獲取最新內容。 這是怎樣發生的呢？你可能會想到下面的方式： 服務端編譯重新部署維護一個版本號，客户端通過輪詢檢測和本地存儲的是否相同，發現更新的版本就彈框提示（缺點 耗電。尤其是在移動端） 通過在html中做版本標記... websoc
昵稱 來了老弟
@vue.js
貢獻者142
粉絲0
貢獻者
@vue.js
動態 列表
使用wxt開發跨瀏覽器插件
一、背景 在使用@crxjs/vite-plugin一段時間後，開發發了welibrary等圖書館插件，為了進一步推廣插件計劃支持Chrome、Edge瀏覽器之外的Firefox，為此耗費了不少時間用於調整配置，初步結論如下， 1）Firefox對mv2版本支持更多，mv3版本有諸多限制，@crxjs/vite-plugin等工具打包後的產物可能無法運行 2）雖然Firefox支持chrome全局
昵稱 Honwhy
vue2 devtools導致頁面卡頓，解決方案
背景 項目升級為vue@2.7.16 vue@2老項目很難升級為vue@3 vue.js devtools@5.3.4不再維護 vue.js devtools@5.3.4不支持新的setup state等常用功能 vue.js devtools@6.6.3對vue@2一進入頁面卡死 項目由於歷史以及業務原因頁面性能很差，導致vue.js devtools@5.3.4會在一些場景卡死
昵稱 defghy
算法的應用場景之尋找最近數&時間線組件錨點跳轉對應位置
需求描述 前兩天和以前公司的同事聊天，他提到在刷leetcode，並提到算法感覺不接地氣 似乎也沒有什麼應用場景 於是乎，筆者翻出一個案例需求給到他 看完以後，他感嘆道： 還是自己見得少了... 需求：假設有一個時間線組件，按照時間順序展示對應內容，如下圖 這個時間線可能很長，能有好幾個月 為了提高用户體驗，當用户進入這個頁面的時候 我們需要看看當天是哪一天，同時滾動到，距
昵稱 水冗水孚
【nodejs進階之旅(2)】:使用koa2+mysql 實現列表數據分頁
1.展示效果（分頁） 2.分頁主要字段 分頁主要字段包括 pageSize 每頁條數、pageNum 第幾頁、startRow 當前開始頁編號、endRow 當前結束頁編號、total 總數量。主要是根據前端分頁的參數，進行處理後，返回前端正確的數據，其實是一個很常見且簡單的功能。但是是非常也是非常重要的。 pageSize 每頁條數 pageNum 第幾頁 startRow 當前開始頁編號
昵稱 微芒不朽
el-date-picker 動態日期範圍
Vue2 element ui el-date-picker type="daterange" :picker-options="pickerOptions" let _minTime; let _maxTime; let timeRange = 10 * 24 * 60 * 60 * 1000; export default { data() { return {
昵稱 蛋炒太陽
vue+element項目中導出時文件名稱從後台獲取
在做後台管理系統項目時，導出功能後端一般返回文件流或者鏈接，前端進行相關處理，今天只説文件流相關內容，之前項目中所有的文件名稱都是前端進行拼接的，像xxxx-20231002122415.xlsx等等，那下載時文件名稱如何從後台獲取呢？ 1、首先需要後台配置 在響應標頭中我們可以看到Content-Disposition:attachment;filename=xxxxx.xlsx信息，filen
昵稱 留白
Vue組件異步請求一定要在 mounted 回調執行？
背景與總結 先説結論： 有很多所謂的最佳實踐告訴你這個觀點，但其實這個觀點是非常片面的，甚至在大部分場景下他是錯的。 聲明一下： 本文通過幾個案例説明部分同行觀點的片面性，分析了這種觀點出現原因，涉及一點vue的渲染原理。最後給出作為個人為了避免困擾，可以採取的相對最近實踐（因人而異）。 分析 很多文章給出的理由是：mounted回調函數被調用的時候，組件已經被掛載到了DOM上，而比mounted
昵稱 lpicker
RSM：超實用的多場景請求管理方案
各位前端er們，用了那麼久的再熟悉不過的接口請求，有沒有覺得不妥？？？你可能會覺得，這有什麼不妥，不就axios.get一下，fetch一下，請求就發出了嘛，然後再處理返回的數據，完事。真有這麼簡單嗎？問題來了，針對不同場景下的請求需求，真的可以統一這樣處理就完事嗎？我們來聊聊請求這事兒！ 聊聊前端請求的場景 我們先來聊聊前端請求的各種場景，以下是一些做請求時遇到的高頻場景。 什麼時候發出請求
昵稱 愛編程的小金
vue+alova入門指南
alova？這是個什麼鬼？ 你沒聽説過也是很正常，它是一個RSM實現庫，用於解決在MVVM項目下的不同請求場景下的問題，同時也可以幫你管理服務端狀態。 它就像一個axios的武裝庫，為axios插上了翅膀。 詳細瞭解RSM可參考 RSM：超實用的多場景請求管理方案 這篇文章作為vue+alova的基礎入門篇，你可以瞭解到以下內容： alova如何處理頻繁請求、跨模塊更新服務端狀態、模糊搜索
昵稱 愛編程的小金
受夠了團隊代碼風格不統一？7千字教你從零搭建代碼規範體系
前言 此篇文章主要講解如何來搭建一套代碼規範體系，主要內容為：通過 ESLint + Prettier + Stylelint 實現代碼風格規範、格式化，通過 EditorConfig 實現 IDE 編碼風格規範化 本文約 7k 字，主要內容分為 7 個大章節，內分多個小章節。請耐心讀完，相信你應該有所收穫 本文也是《通俗易懂的中後台系統建設指南》系列的第四篇文章，該系列旨在告訴你如何來構建一個優
昵稱 十五
vue多項目多模塊運行/打包
vue多項目多模塊運行/打包 vue-cli4 為例，實現多項目的分模塊打包。多項目之間共享組件和依賴，運行、打包互不干擾。 一、安裝 npm install -g @vue/cli # OR yarn global add @vue/cli 二、創建項目： vue create my-project # OR vue ui 三、目錄改造 所謂分模塊打包，一個模塊就是一個獨立項目，各個模塊
昵稱 patelo
手寫一個動態海洋和天空效果的vue hooks
背景 常規的後台管理系統登陸頁面可能就只是一個簡單的背景頁面，這不太好看，接下來讓我們來使用three.js來實現一個動態的海洋和天空效果當作背景，這樣的效果總會讓人眼前一亮，如下圖所示。 代碼實現 接下來，讓我們用trae來編寫實現這個功能吧。 1. 組合式 API 初始化 import { onMounted, onBeforeUnmount } from "vue"; import * a
昵稱 夕水
Three.js實現3D地圖可視化-省份
實現效果 數據來源 地圖的是通過這個 shape 描繪成形狀展示的，數據可以通過 datav.aliyun 地圖json小工具 獲取到 數據拿到之後，就是展示的問題，直接展示是不行的，需要通過 d3 對數據處理，才能按照正確的地圖樣子展示 import * as d3 from "d3"; //莫開託座標 矯正地圖座標 //center 的位置可以自己定 const ha
昵稱 水木清華
服務端渲染SSR
1.項目背景 需要將一箇舊的用vue+svg搭建的地鐵圖h5改造成有個ssr項目，以提升首屏渲染時間。 2.分析 項目現狀，項目組已有koa搭建的業務中間層，且需要改造的項目為一箇舊項目，綜合考慮，將舊項目進行改造，而非使用nuxt重寫。 3.SSR原理 1.所謂SSR就是將一個項目通過兩種打包配置，分別生成兩份打包代碼，一份在服務端（nodejs）執行，另一份在客户端（browser）上執行。當
昵稱 牛刀殺雞
Vue.js中如何去定位解決內存泄漏？
Vue.js 是一個流行且強大的 JavaScript 框架，它允許我們構建動態和交互式 Web 應用程序。 然而，與任何軟件一樣，Vue.js 應用程序有時會遇到內存泄漏，從而導致性能下降和意外行為。 今天，我們將深入探討 Vue.js 應用程序中內存泄漏的原因，並探索如何定位和修復這些問題的有效策略。 什麼是內存泄漏 ? 當程序執行過程中保留不再需要的內存時（主要是一些 變量、 方法等），會阻
昵稱 Sean
Vue響應式原理概述
1 MVVM模式 Model-View-ViewModel源自MVC模式，核心是ViewModel，ViewModel作為一個“中轉站”，對接Model層獲得並轉換數據使得數據易管理、便於View層使用，又對接View層進行雙向的數據綁定。MVVM框架利用ViewModel這一層幫助開發者們做好了之前jQuery時代低效的查找、操作DOM的工作。View最終展現的不僅是Model的數據，也是經過V
昵稱 xizugogo
【vue】MVVM、雙向綁定
MV*模式 MVC MVP MVVM 1 MVC 一個應用分為三部分 模型 (Model)：數據保存 應用程序的數據、控制與修改這些數據的業務規則 Model改變時：通知View，為View提供查詢Model相關狀態的能力，為Controller提供訪問封裝在Model內部的應用程序功能的能力。 視圖 (View)：用户界面
昵稱 懟懟
通俗易懂講解並手寫一個vue數據雙向綁定案例
問題描述 面試中，面試官除了問基礎知識以外，還喜歡問一些框架原理。比如：你對vue的數據雙向綁定mvvm是如何理解的？網上的部分貼子可能寫的有點抽象，不便於快速閲讀理解。本篇文章就使用通俗易懂的簡單方式，來講解並實現一個簡單的vue數據雙向綁定原理demo，希望對大家有一定的幫助 先複習基本知識 為了便於大家更好的理解下文數據雙向綁定的代碼，我們最好先複習一下舊知識，如果基礎知識紮實的道友，可以直
昵稱 水冗水孚
在 Vue 中為什麼不推薦用 index 做 key
尤大在vue 2.x的文檔中明確指出：建議儘可能在使用v-for時提供keyattribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。 尤大的建議説白了就是説： 如果index可以做key，那直接底層幫你傳進去好了，又何必讓你們多此一舉呢？乖乖的不要用index做key 那麼:key 到底有什麼用？ 當 Vue.js 用 v-for 正在更新已渲染過的元素
昵稱 高志鵬
vue數據響應式的原理（通俗易懂）附源碼
通言：以前都是看網上別人的關於vue數據響應式原理理解，都是長篇大論的，不是很好理解，不能有效概括。直到學習了某位老師的課程我恍然大悟。得出結論：數據響應式就是指數據的改變以後通知函數的執行。 講一下實現的邏輯過程： 首先 js代碼: var user = { name: '合約路', birth: '2002-5-7', }; // 顯示姓氏 function show
昵稱 陽哥
AI輔助學習：給一個 mvvm 模式使用的小例子
MVVM在面試時問得很多，下面讓Ai教我們怎麼用這個模式： 以下是一個簡單的 MVVM（Model-View-ViewModel）模式在 JavaScript（使用 Vue.js 框架來實現）中的小例子，展示瞭如何實現數據綁定和交互邏輯的分離。 1. 項目搭建 首先，確保你已經安裝了 Vue.js。如果沒有，可以通過以下方式在項目中引入： 在 HTML 文件的頭部添加如下 CDN 鏈接： s
昵稱 Yujiaao
Nuxt.js實戰：Vue.js的服務器端渲染框架
創建Nuxt.js項目 首先，確保你已經安裝了Node.js和yarn或npm。然後，通過命令行創建一個新的Nuxt.js項目： yarn create nuxt-app my-nuxt-project cd my-nuxt-project 在創建過程中，你可以選擇是否需要UI框架、預處理器等選項，根據需要配置。 目錄結構 Nuxt.js遵循特定的目錄結構，其中一些關鍵目錄如下： ├── .nux
昵稱 天涯學館
使用 AST 遷移複雜前端項目的探索
寫在前面 也不知道為什麼，每一次工作變動，所接手的第一個項目，都和項目遷移有關。這次也不例外，在 5 月初入職樂天之後，處理完雜七雜八的事情，第一個接手的項目是將一個大概有 5 年開發週期的 nuxt 2 前端項目，遷移到 nuxt 3 版本。 項目遷移與“屎山” 談及項目遷移，尤其是複雜項目，很容易讓人把它和“屎山”聯繫起來，而事實上也是如此，大多數規模較大的項目，往往都具備“屎山”的各種特徵，
昵稱 littlelyon