tag 前端

標籤
貢獻1,041
1101
06:37 AM · Oct 27 ,2025

@前端 / 博客 RSS 訂閱

一顆冰淇淋 - Node.js 構建命令行工具:實現 ls 命令的 -a 和 -l 選項

在日常的前端開發中,我們常常藉助各種基於 Node.js 的腳手架工具來加速項目搭建和維護,比如 create-react-app 可以一鍵初始化一個 React 項目,eslint 則幫助我們保持代碼的整潔和一致。而在公司內部,為了更好地滿足特定業務的需求,我們往往會構建自己的腳手架工具,如自定義的 React 或 Vue 框架、內部使用的代碼檢查工具等。本篇文章來和大家分享一下如何用 Node

node.js , 前端工程化 , 前端 , Javascript

收藏 評論

用户bPdeG32 - 深入理解 CSS Flexbox:如何使用彈性佈局實現自適應的水平和垂直居中

在 Web 開發中,佈局一直是 CSS 的一個重要主題,而水平和垂直居中往往是佈局中最常見、最基礎的需求。傳統的居中方法通常需要使用多層嵌套、position、margin 等屬性來實現,代碼繁瑣且不夠靈活。而隨着 CSS 彈性佈局(Flexbox)的引入,水平和垂直居中變得非常簡單、直觀,幾乎可以適應所有的佈局場景。 本文將專注於如何使用 CSS Flexbox 來實現內容的自適應居中,包括水平

ecmascript-6 , css3 , Css , HTML , 前端

收藏 評論

用户bPdeG32 - JavaScript 與 TypeScript 的詳細對比

JavaScript 是當前 Web 開發的主要編程語言,也是現代前端開發的基石。儘管它靈活而強大,但在大型項目中,JavaScript 的動態類型系統和無類型檢查常常帶來代碼管理上的問題。為了解決這些問題,微軟在 2012 年推出了 TypeScript,這是一種 JavaScript 的超集,增加了靜態類型檢查、接口、類和其他現代化的編程特性。 本文將深入對比 JavaScript 和 Typ

ecmascript-6 , node.js , typescript , 前端 , Javascript

收藏 評論

用户bPdeG32 - 遞歸與迭代:理解與選擇的藝術

在編程中,“遞歸”和“迭代”是兩種解決問題的常見方法。這兩者本質上都是為了處理複雜的、重複的操作或數據結構,比如樹、鏈表、數學運算等。遞歸是函數自我調用的一種形式,而迭代則是通過循環控制結構來解決問題。本文將專注於探討遞歸與迭代的不同之處、各自的優勢與劣勢,以及如何在實際開發中選擇合適的方式解決問題。 1. 什麼是遞歸? 遞歸是一種通過讓函數調用自身來解決問題的編程技術。每次函數調用時都會生成一

ecmascript-6 , node.js , typescript , 前端 , Javascript

收藏 評論

留白 - 記錄vue2項目配置eslint、prettier以及git提交校驗

項目背景:vue2老項目,使用vue-cli4搭建的,創建項目時eslint校驗使用的是eslint+standard。 問題:項目統一配置了eslint,但是prettier配置各不相同,導致格式化後總會有衝突,而且有的電腦配置了git提交校驗不生效,提交的代碼沒有經過eslint驗證,其他同事拉取代碼後提交不成功。 配置1:.editorconfig 該文件是針對不同IDE進行配置的初始化格式

husky , lint-staged , eslint , prettier , 前端

收藏 評論

用户bPdeG32 - ECMAScript 6(ES6)深入剖析:箭頭函數的革新與應用

引言 ECMAScript 6(簡稱 ES6),也被稱為 ECMAScript 2015,是 JavaScript 語言的重要版本更新,帶來了許多功能和語法的改進,極大地增強了 JavaScript 開發的簡潔性與可讀性。其中,箭頭函數(Arrow Functions) 是最為顯著的特性之一。箭頭函數提供了更為簡潔的語法,同時解決了傳統函數在 this 綁定上的問題。本文將聚焦於箭頭函數的革新,探

ecmascript-6 , typescript , 前端 , html5 , Javascript

收藏 評論

十五 - 中後台開發必修課:Vue 項目中 Pinia 與 Router 完全攻略

前言 本篇文章主要講解如何來配置 Pinia 和 Vue Router 本文也是《通俗易懂的中後台系統建設指南》系列的第二篇文章,該系列旨在告訴你如何來構建一個優秀的中後台管理系統 寫在前面 路由(Router)和狀態管理(Vuex、Pinia)是 Vue 項目中的常客。基本上在 Vue 的項目中,我們構建一個 Web 應用都離不開它們,如果你是 Vue2 的用户,那麼你對它們不會陌生 如果你是跟

vue.js , pinia , router , 前端

收藏 評論

specialcoder - 一文讀懂 NPM 版本

這是前端工程化的系列文章 版本號組成 node package 版本號由四部分組成:major.minor.patch[-prerelease],比如:1.0.2-beta.1,其中 prerelease 可選。 major:代表主版本號,通常在需要提交不能向下兼容的情況下對該版本號進行升級 minor:代表次版本號,通常在新增功能時才對該版本號進行升級 patch:代表修復版本號,升級該

工程化 , npm , 前端

收藏 評論

玩足球的傷疤 - JavaScript與TypeScript的對比:深入理解兩者的異同

JavaScript 和 TypeScript 是當今最流行的兩種編程語言,尤其在前端開發中,它們佔據着主導地位。雖然這兩種語言在表面上看起來很相似,但它們有着顯著的差異,尤其是在類型系統、開發體驗、代碼維護性等方面。本文將深入探討 JavaScript 和 TypeScript 的差異,幫助開發者理解何時選擇使用 JavaScript 或 TypeScript,以及如何在項目中有效地運用它們。

ecmascript-6 , typescript , HTML , 前端 , Javascript

收藏 評論

蛋先生DX - 俯瞰 Monorepo,別一番風景!

寫在最前 本故事簡要地介紹了 Monorepo 的 What 和 Why,重點篇幅在於搭建一個好用的 Monorepo 工程時應該考慮的點。可以作為你在選擇工具時的條件,也可以作為你在搭建 Monorepo 工程時查漏補缺的參考。希望這對你有所幫助,哪怕只是一點點 ^O^ “在這個 AI 內容生成氾濫的時代,依然有一批人"傻傻"堅持原創,如果您能讀到最後,還請點贊或收藏或關注支持下我唄,感謝 ( ̄

前端工程化 , 前端框架 , monorepo , 前端

收藏 評論

王大冶 - 如何只使用 CSS 實現網站的暗黑模式切換

CSS技巧與案例詳解 vue2與vue3技巧合集 VueUse源碼解讀 想讓你的網站從“明亮清新”切換到“暗黑酷炫”,而不依賴任何 JavaScript?沒問題! 僅用 CSS 就能完成這個任務,根據用户設備的系統設置動態切換主題。本教程將教你如何實現一個可以隨系統設置自動切換明暗模式的網站,完全拋棄 JavaScript。 第一步:基礎 HTML 頁面結構 首先,我們需要一個簡單的

ecmascript-6 , 前端 , Javascript

收藏 評論

有李 - PWA實踐

PWA基礎 PWA應用是什麼樣子的? 在主屏幕、應用啓動器、啓動板或開始菜單上都有**圖標**。 當您在設備上搜索應用時,此圖標會顯示。 會在一個獨立的窗口中打開,該窗口完全**獨立**於瀏覽器的界面。 可以與操作系統進行更高級別的集成,例如網址處理或標題欄自定義。 **離線**時也能使用。 應用內自定義安裝 需要滿足的條件 安裝相關API兼容性表格 不兼容系統的交互處理?: 點擊安裝按鈕 -

pwa , 前端 , Javascript

收藏 評論

倔強青銅三 - Vite VS Webpack,誰才是最強構建工具

Vite VS Webpack,誰才是最強構建工具 前言 大家好,我是倔強青銅三。是一名熱情的軟件工程師,我熱衷於分享和傳播IT技術,致力於通過我的知識和技能推動技術交流與創新,歡迎關注我,微信公眾號:倔強青銅三。 Vite vs Webpack:哪個更適合您的項目? 隨着Web應用的不斷髮展,對更快、更高效的開發工具的需求也在日益增長。多年來,Webpack一直是複雜應用的首選打包工具,以其強

vue.js , vite , webpack , 前端 , Javascript

收藏 評論

web網站裝修工 - vue+node後台管理(帶預覽地址)

最近在逛開源網站時發現了一個比較實用又簡潔的開源後台管理。 先貼一下預覽地址:點擊直達 為啥説比較實用呢!來看看它的功能就知道了: 用户管理 菜單管理 角色管理 菜單權限 角色權限 字典管理 富文本+圖片管理+文件管理 等等還有一些比較實用的.... 用過後台都知道這幾個功能的含金量,還自帶了node後端直接啓動就可使用。 最後再貼幾張演示圖:

vue.js , 框架 , node.js , 後端 , 前端

收藏 評論

一顆冰淇淋 - 命令行應用開發初學者指南:腳手架篇、UI 庫和交互工具

在日常的前端開發工作中,我們經常依賴各種命令行工具來提高效率和代碼質量。例如,create-react-app 和 eslint 等工具不僅簡化了項目的初始化過程,還能自動執行代碼檢查和格式化任務。當我們使用這些工具時,它們通常會通過一系列互動式的問答來收集必要的信息,從而根據我們的選擇進行相應的配置和安裝。 以 eslint 工具為例(如下圖所示),當你首次運行 eslint --init 命令

node.js , 前端工程化 , commonjs , 前端 , Javascript

收藏 評論

用户bPdeUmS - TypeScript 中的類型推斷詳解:為什麼我們應該信任 TypeScript 的推斷能力?

在 TypeScript 中,類型推斷(Type Inference)是一個強大且被廣泛使用的特性。它允許開發者在許多情況下省略顯式的類型註解,從而簡化代碼,同時仍然享受強類型系統帶來的安全性和可靠性。然而,對於初學者或經驗不足的開發者來説,常常會疑惑:我真的可以完全信任 TypeScript 的類型推斷嗎?它的邊界和侷限性是什麼? 本文將聚焦於這個問題,通過深入解析 TypeScript 的類型

ecmascript-6 , typescript , HTML , 前端 , Javascript

收藏 評論

百度安全 - 度安講|第七期「智效融合,安全護航」深圳站技術沙龍成功舉辦

近日,「智效融合,安全護航」深圳站·暨第七期“度安講”技術沙龍成功舉辦,沙龍聚焦企業智能化工程效能探索及其安全能力建設實踐等熱點議題,來自百度、網安加社區、順豐科技、數篷科技、南京大學的產業界和高校嘉賓,與各界生態夥伴共聚一堂,共同切磋探討,共話人工智能時代下,企業如何提升工程效能、創新健康發展思路與實踐,暢想人機協同未來發展趨勢,探索人工智能與企業提效的安全融合之路。 第七期“度安

ecmascript-6 , 安全 , typescript , 前端 , Javascript

收藏 評論

倔強青銅三 - NodeJS項目架構設計,看這一篇就足夠了!

NodeJS項目架構設計,看這一篇就足夠了! 前言 大家好,我是倔強青銅三。我是一名熱情的軟件工程師,我熱衷於分享和傳播IT技術,致力於通過我的知識和技能推動技術交流與創新,歡迎關注我,微信公眾號:倔強青銅三。 1. 🧩 整潔架構簡介 Clean Architecture(整潔架構)由Robert C. Martin(Uncle Bob)提出,它強調應用程序內部關注點的分離。該架構提倡業務邏輯

express , node.js , typescript , 前端 , Javascript

收藏 評論

倔強青銅三 - 教你玩轉JavaScript元編程

教你玩轉JavaScript元編程 大家好,我是倔強青銅三。我是一名熱情的軟件工程師,我熱衷於分享和傳播IT技術,致力於通過我的知識和技能推動技術交流與創新,歡迎關注我,微信公眾號:倔強青銅三。 JavaScript元編程:深度解析Proxy、Reflect和對象屬性控制 JavaScript元編程超越了典型編程的範疇,為開發人員提供了一套創建高度靈活、高效和響應式代碼庫的工具。讓我們深入探討Pr

vue.js , ecmascript-6 , node.js , 前端 , Javascript

收藏 評論

specialcoder - 認識包管理工具: npm、yarn和pnpm

包管理工具的發展 2010 年 1 月,一款名為 npm 的包管理器誕生。它確立了包管理器工作的核心原則。 npm 的發佈誕生了一場革命,在此之前,項目依賴項都是手動下載和管理的。npm 引入了文件和元數據字段,將依賴項列表存儲在 package.json 文件中,並且將下載的文件保存到 node_modules 文件夾中。 後來因為 npm 的缺陷或者舊版本的不足,又出現了一個個替代

工程化 , npm , 前端

收藏 評論

十五 - 受夠了團隊代碼風格不統一?7千字教你從零搭建代碼規範體系

前言 此篇文章主要講解如何來搭建一套代碼規範體系,主要內容為:通過 ESLint + Prettier + Stylelint 實現代碼風格規範、格式化,通過 EditorConfig 實現 IDE 編碼風格規範化 本文約 7k 字,主要內容分為 7 個大章節,內分多個小章節。請耐心讀完,相信你應該有所收穫 本文也是《通俗易懂的中後台系統建設指南》系列的第四篇文章,該系列旨在告訴你如何來構建一個優

vue.js , 代碼規範 , 前端

收藏 評論

Believer - Nuxt3入門(上)

Nuxt.js 是一個基於 Vue.js 的通用應用框架。 通過對客户端/服務端基礎架構的抽象組織,Nuxt.js 主要關注的是應用的 UI 渲染。原文可移步我的公眾號文章 🔧 安裝問題 ⚙️ 初始化項目失敗 npx nuxi@latest init my_nuxt3_app 1.連接 raw.githubusercontent.com 失敗 “Failed to connect t

nuxt3 , ssr , 前端

收藏 評論

Sean - npm workspaces 已經夠強了,為何還需要 MonoRepo 方案?

隨着項目規模的增長和模塊化需求的增強,MonoRepo(單一代碼庫)的管理方式正在成為熱門選擇。本文將帶領你瞭解 MonoRepo 的形成背景,探討主流解決方案(如 pnpm workspaces、TurboRepo、Nx 和 Rush),並通過對比分析這些工具的優劣與適用場景,最終幫助你選擇最適合的工具。 MonoRepo 的形成背景 隨着項目複雜度和團隊規模的擴大,傳統的單體代碼庫或多代碼庫(

前端工程化 , 前端 , Javascript

收藏 評論

zZ_jie - 關於不同窗口,訂閲不生效的問題

問題 兩個窗口,顯示組件,A窗口顯示A組件,B窗口顯示B組件,兩個組件共同訂閲一個Service中的Subject,當在A組件中進行修改後,Service中的Subject發送通知,“值變更了”,B組件訂閲不到。 現在打開兩個窗口,每個窗口顯示一個組件,每個組件都訂閲 Service 中的 subjectTest, 在AComponent組件中,每隔一秒發送一條數據: AComponent 組件

rxjs , angular , 訂閲消息 , 前端 , Javascript

收藏 評論