tag 前端

標籤
貢獻1,041
1108
06:37 AM · Oct 27 ,2025
tuzixiansen_63d4d65909d62 頭像 opentiny 頭像 qaz666 頭像 invalidnull 頭像 dirackeeko 頭像 smileZAZ 頭像 junxiudetuoba 頭像 jdcdevloper 頭像 yayu 頭像 icecreamlj 頭像 beishangdejianjidan_cqxuxf 頭像 xixindehongjiu 頭像

@前端 / 博客 RSS 訂閱

yayu 頭像

冴羽 - 今日，字節發佈全新 AI IDE：Trae! 它將成為最懂中文開發者 AI IDE

前言 今日，字節發佈了一款 AI Coding 產品 —— Trae，它是一款對標 Cursor 和 Windsurf 的全新 IDE，也是一款真正為中文開發者量身定製的工具，可謂是中文開發者的福音。 其優雅的 UI、絲滑的交互、母語級的支持、更高的 AI 集成度、更‮然自‬的交‮式互‬對話開發、更‮‬精準的 AI 生‮效成‬果，都讓你感到親切和驚豔！ 它不再是一個工具，而是一個能 “思考” 和

編輯器 , 人工智能 , ide , 後端 , 前端

收藏 評論

xishui_5ac9a340a5484 頭像

夕水 - SCSS即將廢棄`@import`，以前的`@import`該何去何從？

SCSS即將廢棄@import，以前的@import該何去何從？ 1. 引言 隨着前端開發技術的不斷髮展，SCSS（Sass）作為一種流行的CSS預處理器，已經在眾多前端項目中得到了廣泛應用。其優雅的語法、強大的功能以及靈活的模塊化機制，使得開發者能夠更加高效地構建和管理樣式表。然而，隨着SCSS的不斷迭代更新，我們也迎來了一個重要的變革：@import語法即將被廢棄。雖然@import曾經是SC

scss , 前端

收藏 評論

gqkmiss 頭像

月恆 - React Vite 項目增加 eslint 和 prettier

React Vite 項目增加 eslint 和 prettier Eslint 版本為 8.X 1. 安裝 8.X 版本的 eslint pnpm i eslint@^8.57.0 -D 2. 安裝其他包 pnpm add -D eslint-plugin-import prettier eslint-plugin-react eslint-plugin-react-hooks esli

react , eslint , prettier , 前端

收藏 評論

gqkmiss 頭像

月恆 - Vue Vite 項目增加 eslint 和 prettier

Vue Vite 項目增加 eslint 和 prettier Eslint 版本為 8.X 1. 安裝 8.X 版本的 eslint pnpm i eslint@^8.57.0 -D 2. 安裝 eslint 以及 prettier 以及一堆依賴 pnpm i eslint eslint-plugin-vue @vue/eslint-config-prettier prettier es

vue.js , eslint , prettier , 前端

收藏 評論

wupeng_5a4de5c290b9d 頭像

PatWu16 - PWA離線應用調研

1、PWA應用介紹 PWA 是一種通過現代 Web 技術提供類似原生應用體驗的 Web 應用。它的核心特性包括： 可離線訪問：通過 Service Worker 實現離線緩存快速加載 利用緩存策略加速資源加載可安裝 用户可以將 PWA 添加到主屏幕，像原生應用一樣使用響應式設計 適配各種設備屏幕 PWA 的核心技術包括： Service Worker：用於攔截網絡請求、管理緩存

pwa , HTML , 前端 , Javascript

收藏 評論

wupeng_5a4de5c290b9d 頭像

PatWu16 - PWA離線應用實踐

上篇文章整理了PWA離線應用的技術脈絡和注意事項，本篇文章將記錄使用Vue + Workbox + localforage 實現離線應用的實踐過程。 一、Vue工程改造 Vue CLI 提供了一個官方的 PWA 插件，可以快速為 Vue 項目添加 PWA 支持。運行以下命令安裝插件： // 在vue工程目錄下執行如下命令 vue add pwa 安裝完成後，插件會自動生成以下文件： src/

pwa , HTML , 前端 , Javascript

收藏 評論

vivo_tech 頭像

vivo互聯網技術 - 前端 TypeError 錯誤永久消失術

作者：來自 vivo 互聯網大前端團隊- Sun Maobin 通過開發 Babel 插件，打包時自動為代碼添加 可選鏈運算符(?.)，從而有效避免 TypeError 的發生。 一、背景介紹 在 JS 中當獲取引用對象為空值的屬性時，程序會立即終止運行並報錯：TypeError: Cannot read properties of ... 在ECMAScript 2020新增的可選鏈運算符(?.

typeerror , babel , 前端

收藏 評論

ihengshuai 頭像

大衞talk - Chrome Devtools調試技巧

由於圖片和格式解析問題，可前往 閲讀原文 Chrome DevTools 是開發者用於調試 Web 應用程序、分析性能、檢查元素和網絡請求的重要工具。無論是前端開發人員還是後端工程師，熟練掌握 Chrome DevTools 都能顯著提高開發效率和調試精度。通過 DevTools，我們可以快速識別並解決性能瓶頸、修復 bug、優化用户體驗 Chrome DevTools 提供了多種強大的功能，包括

debugging , chrome-devtools , 優化 , 前端

收藏 評論

ihengshuai 頭像

大衞talk - vscode調試技巧

由於圖片和格式解析問題，可前往 閲讀原文 在現代前端與全棧開發的日常工作中，代碼調試是不可或缺的一環，而一款優秀的調試工具能夠顯著提升開發效率，減少問題定位的時間成本。Visual Studio Code（簡稱 VSCode）作為一款備受開發者喜愛的輕量化編輯器，不僅提供了豐富的插件生態和高效的代碼編輯體驗，更以其強大的調試功能成為開發者工作流中不可或缺的一部分 無論是調試 Node.js 後端代

vscode插件 , debugging , 調試 , 前端

收藏 評論

baqidemakebei 頭像

霸氣的馬克杯 - 解決方案之高效檢測PDF文件中的XSS攻擊問題

引言 隨着互聯網的普及和數字化辦公的推進，PDF（Portable Document Format）文件已成為信息交換的重要載體。然而，PDF文件的安全性問題也日益凸顯，尤其是跨站腳本攻擊（Cross-Site Scripting, XSS）的威脅。XSS攻擊通過在PDF文件中嵌入惡意腳本，當用户打開文件時，腳本會在其瀏覽器中執行，可能導致敏感信息泄露、會話劫持等嚴重後果。因此，高效檢測PDF文件

code , pdf , xss , 前端 , Javascript

收藏 評論

fenanjiu 頭像

南玖 - 深入瞭解Vite：依賴預構建原理

前言 前面我們有提到Vite在開發階段，提倡的是一個no-bundle的理念，不必與webpack那樣需要先將整個項目進行打包構建。但是no-bundle的理念只適合源代碼部分（我們自己寫的代碼），vite會將項目中的所有模塊分為依賴與源碼兩部分。 依賴： 指的是一些不會變動的一些模塊，如：node_modules中的第三方依賴，這部分代碼vite會在啓動本地服務之前使用esbuild進行預構建。

vite , 工程化 , 原理 , 前端

收藏 評論

ihengshuai 頭像

大衞talk - H5應用抓包及調試技巧

由於圖片和格式解析問題，可前往 閲讀原文 在現代移動互聯網時代，H5 應用以其跨平台、輕量化、快速迭代的特性，成為移動開發的重要一環。然而，隨着功能的複雜化和用户體驗要求的提升，H5應用的調試也面臨着諸多挑戰，如設備多樣性、網絡環境複雜性以及性能瓶頸等。為了應對這些問題，開發者需要掌握不同的調試工具及場景使用才可應對不確定結果。本篇就帶大家瞭解下具體的調試過程 瀏覽器手機模式 瀏覽器的手機模式調試

抓包解密 , debugging , h5頁面 , 前端

收藏 評論

ihengshuai 頭像

大衞talk - whistle抓包工具及調試技巧

由於圖片和格式的解析問題，可前往 閲讀原文 往期文章我們已經講過fiddler、charles以及wireshark等多種抓包工具，已經在工作中足夠解決各種抓包問題了，但我今天還想再分享給大家一款抓包工具 whistle，因為它真的很優秀，本人在工作中也一直在用這個 為什麼我會選擇whistle，首先是fiddler不支持MacOS，其次Charles在M1芯片上會感覺明顯的卡頓；除此之外是whi

抓包解密 , 抓包過濾 , debugging , 後端 , 前端

收藏 評論

ihengshuai 頭像

大衞talk - Jest單元測試

由於格式和圖片解析問題，可前往 閲讀原文 前端自動化測試在提高代碼質量、減少錯誤、提高團隊協作和加速交付流程方面發揮着重要作用。它是現代軟件開發中不可或缺的一部分，可以幫助開發團隊構建可靠、高質量的應用程序 單元測試（Unit Testing）和端到端測試（End-to-End Testing）是兩種常見的測試方法，它們在測試的範圍、目的和執行方式上有所不同。單元測試和端到端測試不是相互排斥的，而

jestjs , 單元測試 , 自動化測試 , 後端 , 前端

收藏 評論

xingxingshangdelizhi 頭像

帥崽 - 代碼簽名證書申請全攻略

代碼簽名證書是提供給軟件開發者，對其開發的軟件代碼進行數字簽名的數字證書，用於驗證開發者身份真實性、保護代碼的完整性。以下是代碼簽名證書申請的全攻略： 一、準備階段 確定證書類型： OV代碼簽名證書：滿足基本的安全認證需求，能向用户表明軟件來源可靠，未被篡改。 EV代碼簽名證書：對於開發驅動程序、內核模塊等涉及系統底層關鍵組件的開發者，需申請更為嚴格的EV（Extended V

代碼規範 , 前端

收藏 評論

yinzhixiaxue 頭像

銀之夏雪 - CSS 真的會阻塞文檔解析嗎？從瀏覽器渲染原理深入探究一下

在網頁開發領域，一個常見的疑問是 CSS 是否會阻塞文檔解析。理解這一問題對於優化網頁性能、提升用户體驗至關重要。要深入解答這個問題，需要從瀏覽器渲染網頁的原理説起。 瀏覽器渲染網頁的基本流程 瀏覽器在接收到 HTML 文檔後，會依次進行以下幾個主要步驟： 解析 HTML：瀏覽器從網絡或本地獲取 HTML 文件，然後開始解析，將 HTML 代碼轉換為 DOM（Document Object M

瀏覽器 , 瀏覽器原理 , Css , 前端 , Javascript

收藏 評論

ihengshuai 頭像

大衞talk - 前端主流構建工具

本文首發博客網站，由於圖片和格式解析問題，可前往閲讀原文 隨着前端開發複雜度的提升，構建工具在開發流程中扮演着越來越重要的角色。這些工具可以幫助開發者實現代碼的打包、優化、轉譯、模塊化處理等功能，從而提升開發效率和用户體驗。本文將以當前主流的前端構建工具為核心，介紹它們的特點、適用場景及差異 構建工具 Grunt Grunt 是較早期的任務運行工具，主要通過任務（tasks）系統自動化完成前端開發

vite , nx.dev , rust , webpack , 前端

收藏 評論

finally_m 頭像

威哥愛編程 - CORS跨域問題及解決方案詳解

大家好，我是 V 哥，跨域問題是應用開發中比較常見的問題，比如前端應用和後端業務的端口不同，前端要向後端發送請求來獲取數據，這個時候就會產生跨域問題，V 哥先從跨域問題的產生開始，來詳細介紹跨域問題及解決方案。 CORS跨域問題的產生原因 CORS（Cross-Origin Resource Sharing，跨域資源共享）跨域問題源於瀏覽器的同源策略。同源策略是瀏覽器的一種安全機制，它要求瀏覽器在

cors , 跨域 , 前端

收藏 評論

tanking 頭像

TANKING - 使用marked.min.js編寫Markdown文檔頁面，可做知識庫、技術文檔、使用文檔、教程文檔等！

摘要 marked.min.js 是一個高效的 JavaScript Markdown 解析器，它能夠將 Markdown 格式的文本轉換為 HTML。作為一個輕量級的庫，marked 在處理大規模的 Markdown 內容時表現出色，並且具備廣泛的兼容性和可定製性。 本文將深入探討如何使用 marked.min.js 來構建一個自定義的 Markdown 解析器，涵蓋其核心功能、配置選項以及如何

文檔閲讀器 , marked , 前端 , Javascript , Markdown

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 原生electron起步-從零到一完成構建和打包

官網：https://www.electronjs.org/zh/ 安裝依賴 初始化package.json pnpm init 安裝依賴 pnpm add -D electron 安裝報錯解決方案：https://blog.csdn.net/qq_38463737/article/details/140277803 1、打開npm的配置文件 # cmd 運行打開配置文件 npm confi

react , vue.js , electron , 前端 , Javascript

收藏 評論

wupeng_5a4de5c290b9d 頭像

PatWu16 - DragControls拖拽插件優化：從指定平面到任意平面

現狀：Threejs官方demo提供了DragControls.js平面拖拽控件，但只能拖拽Object在垂直於相機法線的平面上移動 目標場景：在六面體空間盒子中沿着六面體平面拖拽物體，並且需要限制在盒子內部 已知：空間盒子大小，對象所在的平面 方案設計： 將Object拖拽依賴的信息放在userData中，示例如下 基於拖拽控件，改造部分關鍵代碼，實現目標 // 模型對

three.js , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - electron-builder打包配置説明

我們一般使用electron-builder對electron項目進行打包，在package.json中配置打包的詳細操作 pnpm install electron-builder -D package.json中的詳細字段解釋： "build": { "appId": "your.id", // 應用的唯一ID "productName": "YourProductName"

react , vue.js , electron , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - vue項目打包electron-將已有web項目打包為桌面端

當你需要將一個vue項目打包成electron時，只需要正常的安裝electron依賴、electron-builder依賴，正常的配置好主進程、預加載腳本、渲染進程即可。 依賴安裝 這裏默認你已經寫好了一個vue項目，腳手架為vite，然後需要打包成electron。 安裝electron pnpm add -D electron 安裝electron打包依賴 pnpm install e

react , vue.js , electron , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - electron打包報錯-image格式問題(.ico報錯)

這種報錯是ico資源文件出錯導致的，可以看看gitHub對此問題的解釋：https://github.com/electron-userland/electron-builder/issues/3889 上圖中打包的logo.ico資源文件格式不對，看起來資源文件後綴是.ico實際上是png格式，你有可能是在一些網站將png轉換為ico，它沒有被正常的轉換為ico，只是將資源文件的後

react , vue.js , electron , 前端 , Javascript

收藏 評論