創建一個專屬的 CLI
作為一個前端，基本上每次初始化項目都會用到腳手架，通過一些腳手架可以快速的搭建一個前端的項目並集成一些所需的功能模塊，避免自己每次都手動一個一個去安裝。安裝各個包的這個過程其實沒啥營養，通過封裝一個腳手架來跳過這個步驟，把精力聚焦到功能研發上。 由於最近自己在寫項目都是相同的技術棧：Nextjs + TailwindCSS + TypeScript + ShadcnUI ，有時候如果忘記了 Sha
昵稱 LaughingZhu
@前端
貢獻者508
粉絲0
貢獻者
@前端
動態 列表
使用marked.min.js編寫Markdown文檔頁面，可做知識庫、技術文檔、使用文檔、教程文檔等！
摘要 marked.min.js 是一個高效的 JavaScript Markdown 解析器，它能夠將 Markdown 格式的文本轉換為 HTML。作為一個輕量級的庫，marked 在處理大規模的 Markdown 內容時表現出色，並且具備廣泛的兼容性和可定製性。 本文將深入探討如何使用 marked.min.js 來構建一個自定義的 Markdown 解析器，涵蓋其核心功能、配置選項以及如何
昵稱 TANKING
Vercel跨域處理方案
安裝插件 npm i -D http-proxy-middleware 在你前端工程根目錄中創建以下兩個文件 api/proxy.js // api/proxy.js // 該服務為 vercel serve跨域處理 const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = (req,
昵稱 淺嵐
掌握 CORS 跨域請求，讀這一篇文章就夠了
在 Web 前後端分離架構模式下，跨域（跨源）請求屬於日常的基本情況了。瀏覽器出於安全考慮，會限制 JavaScript（簡稱 JS）腳本內發起跨源 HTTP 請求，同源沒有此類限制。前端解決跨域方法有很多，比如 WebSocket 協議跨域、JSONP 請求跨域和跨域資源共享 CORS 等。 1、CORS 簡介 CORS 全稱為 Cross-Origin Resource Sharing，被譯為
昵稱 範家鵬
一篇搞定面試中的跨域問題
什麼是CORS（跨源資源共享）？ CORS（Cross-Origin Resource Sharing）是一種機制，允許網頁從不同的域訪問服務器上的資源。 在同源策略下，瀏覽器限制了跨域訪問，CORS允許服務器指定哪些源可以訪問其資源。 同源策略(Same-origin policy) 同源策略在web應用安全模型中是一個重要的概念。在這個策略下，瀏覽器允許第一個網頁中包含的腳本可以獲取第二個網頁
昵稱 來了老弟
[nginx] 一個CORS的漏洞修復
前端項目被掃描出了一個CORS漏洞，記錄一下漏洞的復現和修復。 首先要明確，這個問題出在哪裏。 我負責的系統是一個前後端分離的應用，前端部署使用Nginx做反向代理。對於前端應用來説client是瀏覽器，瀏覽器發起的請求都是通過nginx配置轉發到不同後端的服務器。 舉個例子，某個用户用瀏覽器瀏覽頁面，發起了4個請求： front.domain/api/auth/login - auth服務
昵稱 DiracKeeko
CSS3實戰：實現一個旋轉的3D金幣
CSS3實戰：實現一個旋轉的3D金幣 最近親愛的產品同學，提了一個需求：在頁面某個角落增加一個旋轉的金幣來吸引用户參加活動~越快上越好，我們的“未見”同學直接上手用css擼了一個旋轉的金幣的動畫，讓我們來看一下是如何實現的吧~ 作者：未見 如下圖 拿到這個需求，第一反應gif+a標籤，簡單粗暴+便捷。即將實施就碰到一個問題，UI小姐姐還沒有做設計，排期需要在x天后~怎麼辦？沒有難做的工作，只有解
昵稱 豆皮範兒
css實現炫酷的圓環相交轉動動畫
1.實現效果 2.實現原理 CSS perspective 屬性：屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。 perspective 屬性隻影響 3D 轉換元素。（請與 perspective-origin 屬性一同使用該屬性，這樣您就能夠改變 3
昵稱 用户bPcSPjP
css的rotate3d實現炫酷的圓環轉動動畫
1.實現效果 2.實現原理 2.1 rotate3d rotate3d：rotate3d() CSS 函數定義一個變換，它將元素圍繞固定軸移動而不使其變形。運動量由指定的角度定義; 如果為正，運動將為順時針，如果為負，則為逆時針。 語法： rotate3d(x, y, z, a) 含義： x number 類型，可以是 0 到 1 之間的數值，表示旋轉軸 X 座標方向的矢量。 y numb
昵稱 用户bPcSPjP
探究幾種CSS視差動畫實現方案及原理
滾動視差 介紹 視差滾動（Parallax Scrolling）是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 實現原理 方式一： 利用 background-attachment 屬性，我們可以把網頁解刨成：背景層、內容層、懸浮層 background-attachment 的作用是設置背景圖像隨着頁面滾動的時候固定，即使一個元素有滾動機制，背景也不會隨着元素
昵稱 MangoGoing
CSS 實例系列 - 01 - Tab 滑動門
Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 本 CSS 系列文章： 主推學以致用。結合面試題和工作實例，讓小夥伴們深入體驗 61 個工作常見的 CSS 屬性和各種 CSS 知識。 主推純 CSS。儘可能使用 HTML + CSS 完成學習目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知識，適合新人學習 + 大佬複習。 如果文章在一些細節
昵稱 jsliang
CSS 實例系列 - 03 - Rate 愛心評分
Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 今兒要實現的是：Rate 評分 本期將和小夥伴們探討： √ 通過 CSS，配合簡單的 HTML + JS 完成評分組件 本實例的代碼地址： Github - all for one 碼上掘金 - 03 - Rate 愛心評分 一 前言 本 CSS 系列文章： 主推學以致用。結合面試題和工作實例，讓小夥
昵稱 jsliang
CSS 實例系列 - 04 - Dropdown 下拉麪板
Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~ 今兒要實現的是：Dropdown 下拉麪板 本期將和小夥伴們探討： √ 通過精簡結構，講解 HTML 和 CSS 搭配如何實現 Dropdown 下拉麪板 本實例的代碼地址： Github - all for one 碼上掘金 - 04 - Dropdown 下拉麪板 視頻講解 一 前言 本 CSS 系
昵稱 jsliang
純css編寫開關按鈕點擊切換
效果圖預覽： 完整代碼如下： !DOCTYPE html html head title純css編寫開關按鈕點擊切換/title style type="text/css" #toggle-button{ display: none; } .button-label{ position: relative; displa
昵稱 Winn
利用CSS延遲動畫，打造令人驚豔的複雜動畫效果！
動畫在前端開發中是經常遇到的場景之一，加入動畫後頁面可以極大的提升用户體驗。 絕大多數簡單的動畫場景可以直接通過CSS實現，對於一些特殊場景的動畫可能會使用到JS計算實現，通過本文的學習，可以讓你在一些看似需要使用JS實現的動畫場景，使用純CSS一樣可以實現，並且更方便快捷。 先看一個簡單的例子：一個方塊的位置隨着滑條滑動的位置改變 這個場景實現起來很簡單，滑條值改變後，使用JS計
昵稱 鄧佔勇
前端直傳七牛雲 3.0 sdk詳細使用
前言 最近產品大哥説要把電商項目改成支持視頻播放，視頻要在後管項目上可以上傳到七牛雲，100M以上的這種視頻，因為我們nginx限制了只能上傳30m，所以只能採用前端直傳七牛雲的這個方案 項目介紹 這是一個基於若依的前後端不分離的項目，前端代碼卸載jsp裏面，主要是後台大哥在維護，我們需要幫助後台做好前端直傳這個動作。 前端直傳七牛雲 如何註冊賬號，創建空間 一般這一步，不需要我們做，可以做為
昵稱 qinyuanqiblog
原生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
昵稱 兔子先森
electron-builder打包配置説明
我們一般使用electron-builder對electron項目進行打包，在package.json中配置打包的詳細操作 pnpm install electron-builder -D package.json中的詳細字段解釋： "build": { "appId": "your.id", // 應用的唯一ID "productName": "YourProductName"
昵稱 兔子先森
vue項目打包electron-將已有web項目打包為桌面端
當你需要將一個vue項目打包成electron時，只需要正常的安裝electron依賴、electron-builder依賴，正常的配置好主進程、預加載腳本、渲染進程即可。 依賴安裝 這裏默認你已經寫好了一個vue項目，腳手架為vite，然後需要打包成electron。 安裝electron pnpm add -D electron 安裝electron打包依賴 pnpm install e
昵稱 兔子先森
electron打包報錯-image格式問題(.ico報錯)
這種報錯是ico資源文件出錯導致的，可以看看gitHub對此問題的解釋：https://github.com/electron-userland/electron-builder/issues/3889 上圖中打包的logo.ico資源文件格式不對，看起來資源文件後綴是.ico實際上是png格式，你有可能是在一些網站將png轉換為ico，它沒有被正常的轉換為ico，只是將資源文件的後
昵稱 兔子先森
electron打包報錯errorOut=ERROR: Cannot create symbolic link
這種打包報錯實際上是缺少對應文件，由於electron在打包時會下載資源，有些資源需要科學上網，所以正常打包網速過慢會導致資源丟失。 像上圖報錯，很明顯是丟失winCodeSign-2.6.0資源，所以我們需要去下載對應資源 資源下載鏈接：https://github.com/electron-userland/electron-builder-binaries/release
昵稱 兔子先森
Electron 客户端項目自啓動
app.setLoginItemSettings 與 auto-launch 對比分析 一、穩定性對比 1. app.setLoginItemSettings 優點：作為Electron官方API，有官方維護和支持 缺點： 在某些Windows版本上存在已知問題 部分Windows 10/11更新後可能失效 在macOS權限更嚴格的版本上可能需要額外授權
昵稱 月恆
Electron 開發：獲取當前客户端 IP
Electron 開發：獲取當前客户端 IP 一、背景與需求 1. 項目背景 客户端會自啓動一個服務，Web/後端服務通過 IP + port 請求以操作客户端接口 2. 初始方案與問題 2.1. 初始方案：通過代碼獲取本機 IP /** * 獲取局域網 IP * @returns {string} 局域網 IP */ export function getLocalIP(): string
昵稱 月恆
2025年電商運營進階的2項核心能力：算法理解力與生態整合力
2025電商運營進階指南：從“流量焦慮”到“全域增長”的破局之道 ——AI與短視頻紅利下，如何抓住新賽道實現指數級躍遷？ 2025年，電商人的“生死時速”與突圍機遇 []() “流量越來越貴，ROI越來越低，用户越來越難伺候！”——這是2025年電商行業最真實的寫照。據《2025中國電商生態白皮書》顯示，超60%的中小商家因運營模式僵化陷入增長瓶頸，而頭部玩家卻通過AI驅動、全域營銷、精細化運營
昵稱 瘦瘦的企鵝