React18+Vite4+Zustand4 後台管理系統搭建🎉
前言 老闆：搞個管理系統，我明天就要。 前端：沒空，誰愛做誰做！(小聲bb) 老闆：（突然抬頭）你説什麼？ 前端：好的老闆 用後端的話來説，一個管理系統而已 要不是人手不夠，後端也能做。 看吧，前端就是這麼人微言輕~ 該乾的活還是得幹。 起步 # 使用ant design pro npm i @ant-design/pro-cli -g pro create myapp
昵稱 潘潘潘呀
@vite
貢獻者25
粉絲0
貢獻者
@vite
動態 列表
淺析Vite本地構建原理
前言 隨着Vue3的逐漸普及以及Vite的逐漸成熟，我們有必要來了解一下關於vite的本地構建原理。 對於webpack打包的核心流程是通過分析JS文件中引用關係，通過遞歸得到整個項目的依賴關係，並且對於非JS類型的資源，通過調用對應的loader將其打包編譯生成JS 代碼，最後再啓動開發服務器。 瞭解到webpack的耗時主要花費在打包上，Vite選擇跳過打包，直接以以 原生 ESM 方式提供源
昵稱 南玖
Vite本地構建：手寫核心原理
前言 接上篇文章，我們瞭解到vite的本地構建原理主要是：啓動一個 connect 服務器攔截由瀏覽器請求 ESM的請求。通過請求的路徑找到目錄下對應的文件做一下編譯最終以 ESM的格式返回給瀏覽器。 基於這個核心思想，我們可以嘗試來動手實現一下。 搭建靜態服務器 基於koa搭建一個項目： 項目結構如上，服務使用koa搭建，bin指定cli可執行文件的位置 #!/usr/bin/env node
昵稱 南玖
深入瞭解Vite：依賴預構建原理
前言 前面我們有提到Vite在開發階段，提倡的是一個no-bundle的理念，不必與webpack那樣需要先將整個項目進行打包構建。但是no-bundle的理念只適合源代碼部分（我們自己寫的代碼），vite會將項目中的所有模塊分為依賴與源碼兩部分。 依賴： 指的是一些不會變動的一些模塊，如：node_modules中的第三方依賴，這部分代碼vite會在啓動本地服務之前使用esbuild進行預構建。
昵稱 南玖
Vitepress編寫組件文檔
快速開始 安裝依賴 mkdir projectName路徑下 cd projectName npm init -y npm i -D vitepress pkg#scripts "scripts": { "docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:serve"
昵稱 米花兒團兒
從零開始搭建 Vue3 組件庫開發環境
搭建開發環境 Vite初始化 新建一個空的文件夾，比如叫 Vue3UI ，然後使用命令行在此文件夾下使用npm初始化： npm init 回車後，我們再安裝vite（我們這裏選擇使用Vite進行打包，使用別的也類似）： npm install --save-dev vite 根目錄創建 index.html 文件，裏面內容如下： !DOCTYPE html html lang="zh-cn"
昵稱 zxl20070701
記錄react+electron開發單頁應用SPA遇到的路由問題
遇到的問題 在electron-vite提供的開發服務器中，electron能正常顯示頁面中的路由並能正常跳轉. 而在build打包後，雙擊運行electron應用，路由失效，顯示空白頁面 排查BUG 閲讀了腳手架為我生成的主函數代碼： // HMR for renderer base on electron-vite cli. // Load the remote URL for
昵稱 sAkuraOfficial
前端構建這十年
寫在前面 前端模塊化/構建工具從最開始的基於瀏覽器運行時加載的 RequireJs/Sea.js 到將所有資源組裝依賴打包 webpack/rollup/parcel的bundle類模塊化構建工具，再到現在的bundleless基於瀏覽器原生 ES 模塊的 snowpack/vite，前端的模塊化/構建工具發展到現在已經快 10 年了。 本文主要回顧 10 年間，前端模塊化/構建工具的發展歷程及
昵稱 李十三
如何禁止async編譯成generator？
這是很小的一件事。 但是我花了至少兩個小時的時間。 起因是這樣的： 我需要一個異步函數的原型 const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor 這個原型是用來生成 new AsyncFunction(str)的。 運行環境下，一點問題都沒有。 但是打包出來，總是報錯。 因為new AsyncFun
昵稱 陳其文
VitePress、Hexo、Docusaurus，哪個最適合你的靜態網站？
在選擇合適的靜態網站工具時，Hexo、VitePress、Docusaurus 是三個備受關注的選項，那麼到底哪一個框架更適合你呢？ 本文從使用場景、社區生態、功能、性能、擴展性這五個方面，幫你全方位分析各個框架的優缺點，以便為你的技術選型提供參考。 1、應用場景 Hexo, 官方定位自己是 "快速、簡潔且高效的博客框架" , 但是它同樣適合構建簡單的文檔網站，它具有簡單易用的特點，適合那些
昵稱 墨鬆
前端構建工具技術（介紹篇）
構建工具：俗稱打包。 理解：將模塊文件進行合併，代碼壓縮，整合資源等一系列自動化操作。 為什麼會出現構建工具這項技術？ 我們希望看到頁面加載平滑，快速進行響應。 通過： 1.編寫代碼的邏輯，避免無效浪費內存資源，即優化代碼； 2.優化瀏覽器請求資源的速度； 原因： 首先瀏覽器加載資源 請求的文件數量越多越耗時，文件容量越大越耗時。但是為了我們前端項目結構清晰，我們一般會分成
昵稱 XiaoYu
使用wxt開發跨瀏覽器插件
一、背景 在使用@crxjs/vite-plugin一段時間後，開發發了welibrary等圖書館插件，為了進一步推廣插件計劃支持Chrome、Edge瀏覽器之外的Firefox，為此耗費了不少時間用於調整配置，初步結論如下， 1）Firefox對mv2版本支持更多，mv3版本有諸多限制，@crxjs/vite-plugin等工具打包後的產物可能無法運行 2）雖然Firefox支持chrome全局
昵稱 Honwhy
效能工具（八）之vite開發或生產環境下的命令行變量傳參（比如啓動項目時多視圖選擇其一）
需求描述 前段時間有這樣的一個需求： 筆者有一個項目，在啓動或者打包的時候 需要根據一些實際情況，去選擇展示那個視圖 就是我們在項目啓動或者打包的時候，需要注入一個全局變量（保存在.env.development或.env.production文件中）通過命令行npm run dev的方式 一般來説，vue-router就可以實現這個需求 但是，某些情況下，這個需求不太適合用vue-
昵稱 水冗水孚
unplugin-https-reverse-proxy 2.0 發佈：革新移動端調試體驗
大家好！我是 unplugin-https-reverse-proxy 的作者。去年，我曾分享如何利用這一工具解決本地前端開發中的鑑權難題，讓開發者能在本地開發服務器上使用測試環境域名輕鬆調試需要登錄態的應用。通過搭建中間搭理服務器，unplugin-https-reverse-proxy 消除了手動複製 cookie 和修改 host 的繁瑣步驟，顯著提升了團隊協作開發的效率。 點擊閲讀 提
昵稱 zcf0508
👋 一起寫一個基於虛擬模塊的密鑰管理 Rollup 插件吧（一）
在現代 Web 應用開發中，密鑰的使用幾乎是不可避免的，無論是加解密本地敏感數據、調用第三方 SDK 還是網絡請求籤名等場景都需要用到密鑰。 如何相對安全、靈活地管理密鑰一直是一個令人頭疼的問題，我們既希望在開發環境可以方便地修改、調試和注入密鑰，又不希望這些密鑰在構建產物中被明文暴露，以免被有心之人輕鬆獲取。 通常情況，我們會先手動將密鑰通過特定的算法混淆拆分成多份放入源碼中，運行時再通過逆運算
昵稱 xiaohe0601
👋 一起寫一個基於虛擬模塊的密鑰管理 Rollup 插件吧（二）
上一章 我們詳細介紹了為什麼需要一個自動化的密鑰管理方案，以及如何利用虛擬模塊機制設計並實現一個適用於 Rollup 的密鑰管理插件。 我們從需求出發，將核心的密鑰拆分還原算法獨立為 crypto-splitter 模塊，再通過 rollup-plugin-crypto-key 模塊將其接入 Rollup / Vite 的構建流程。用户只需簡單配置明文密鑰，就能實現在業務代碼中像導入普通模塊一樣獲
昵稱 xiaohe0601
🚀 meta-env-typed：讓所有前端項目的環境變量都擁有完美類型安全！
🚀 meta-env-typed：讓所有前端項目的環境變量都擁有完美類型安全！ 在前端開發中，環境變量的類型安全問題常常被忽視，卻可能引發生產環境的重大隱患。手動維護類型定義繁瑣易錯，不同構建工具的變量規則又各不相同——現在，這些問題都將成為歷史！meta-env-typed 橫空出世，作為一款跨構建工具的環境變量類型解決方案，它能自動為你的項目注入完整的 TypeScript 支持，讓環境變量
昵稱 Json_Lee
主打一個“小巧靈動”：Vite + Svelte
作者：來自 vivo 互聯網大前端團隊- Wei Xing 在研發小型項目時，傳統的 Vue、React 顯得太“笨重”。本文主要針對開發小型項目的場景，談談 Vite+Svelte 是如何讓項目變得“小巧靈動”，並橫向對比 Svelte 和 Vue 的性能表現，對二者的加載流程做詳細分析。 一、背景 為了統一技術標準、提升協作效率，通常在前端團隊內部只會保留一套通用的研發框架。尤其是在團隊初創時
昵稱 vivo互聯網技術
vue-批量導入文件篇（一）
序言 在我們創建路由的時候，會發現如果所有的路由都在一個文件內，那麼當項目路由多的時候，就會出現路由難找，路由跟路由不在一塊等情況出現（沒維護好）。 所以，為了避免這種情況，我們可以使用模塊化這種思想來解決問題。 那麼，問題就來了，當模塊多的時候，一個個的導入就很浪費時間，需要重複 引入 - 賦值 這一過程，所以，我們是不是能讓程序來幫我們做這一步驟呢，那麼我們豈不是可以愉快玩耍了。
昵稱 FYR的仁
SegmentFault 思否技術週刊 Vol.80 — 玩轉新時代前端構建工具
Vite 是一種新型前端構建工具，能夠顯著提升前端開發體驗。它主要由兩部分組成： 一個開發服務器 一套構建指令 Vite 提供了一套原生 ESM 的 HMR API。 具有 HMR 功能的框架可以利用該 API 提供即時、準確的更新，而無需重新加載頁面或清除應用程序狀態。Vite 內置了 HMR 到 Vue.js 單文件組件（SFC）和 React Fast Refresh 中。 文章推薦
昵稱 鹹口鍋包肉
Vue 3 + TypeScript + Element Plus + Vite 4.3：實現一個優雅的登錄註冊功能
先附上源碼地址： 覺得不錯的話順手一個star 效果展示 最新vite搭建項目 npm create vite@latest mingsl-login -- --template vue-ts 配置tsconfig tsconfig.node.json { "compilerOptions": { "composite": true, "skipLibCheck": true,
昵稱 imhaoli168
[開源項目]一個乾淨簡約、基於vue3、yii2輕度改造的後台管理系統
🤞 Yaa 快速助你CURD開發！ 示例圖 環境要求 PHP = 7.3 Composer = 2 Node.js = 14 PHP 啓用擴展 fileinfo imagemagick exif 鏈接 https://yaa.speaks.life/admin 賬號：admin 密碼：123456 Yaa文檔地址 github
昵稱 東隅桑榆
【原理揭秘】Vite 是怎麼兼容老舊瀏覽器的？你以為僅僅依靠 Babel？
作者：京東科技 孫凱 一、前言 對前端開發者來説，Vite 應該不算陌生了，它是一款基於 nobundle 和 bundleless 思想誕生的前端開發與構建工具，官網對它的概括和期待只有一句話：“下一代的前端工具鏈”。 Vite 最早的版本由尤雨溪發佈於3年前，經歷了3年多的發展，Vite 也已逐漸迭代成熟，它的穩定性、擴展性、周邊生態足以在生產環境中支撐各種業務場景的落地。但是關於Vite的
昵稱 京東雲開發者
vite+vue3+element-plus自定義主題變量的配置説明
先上配置，具體參數後面説 vite.config.ts 文件 // vite.config.ts import { defineConfig } from 'vite' import ElementPlus from 'unplugin-element-plus/vite' // 用於 API 組件樣式 import Components from 'unplugin-vue-components
昵稱 肥皂泡