tag vue3

標籤
貢獻61
156
05:48 AM · Oct 27 ,2025
kobe_fans_zxc 頭像 chengxuyuanyouyage 頭像 shuirongshui 頭像 hui_61e3b3803b922 頭像 jsoncode 頭像 kestrel_task 頭像 jiangchuan_5ecf6be720834 頭像 imwty 頭像 tanking 頭像 shellingfordly 頭像 xiaodaigua_ray 頭像 mihuartuanr 頭像

@vue3 / 博客 RSS 訂閱

qiubite_fd 頭像

丘比特 | fd - 使用 Vue3 + Element Plus + Go 重構 ferry 工單系統

使用 Vue3 + Element Plus + Go 重構 ferry 工單系統 項目介紹 2020 年 7 月 13 日，我第一次提交了 ferry 工單系統的代碼，當時其實就是想將自己心中構思的工單系統實現出來。出乎意料的收到了大家關注，同時登上了 github 和 gitee 的榜單，讓這個系統讓更多的人知道了。 由於之前架構設計的有些許潦草，所以部分地方其實拓展起來是有點乏力的。且技術大

workflow , vue3 , go

收藏 評論

shellingfordly 頭像

shellingfordly - Vele-Admin 一個基於Vue3+Element-Plus的後台管理系統

vele-admin 介紹 vele-admin是一個基於 vue3, vite2, element-plus, vuex-module-decorators, vue-router-next, typescript 的後台管理系統 倉庫 Github vele-admin 預覽 vue3-element-plus-admin瀏覽地址 依賴 Vue3 Vue-Router-Next V

mock.js , vite , vue3 , element-plus , typescript

收藏 評論

moziyu 頭像

墨子魚 - antv-l7高德地圖設置黑色底圖

安裝依賴 @antv/l7-maps @antv/l7 div id="map"/div import { Scene } from "@antv/l7"; import { GaodeMapV1 } from "@antv/l7-maps"; scene = new Scene({ id: "map", map: new GaodeMapV1({

高德地圖 , vue3 , 地圖 , antv , 前端

收藏 評論

yinzhixiaxue 頭像

銀之夏雪 - 從底層到實踐：深度解析 Vue Composition API 與 React Hooks 的異同

一、設計哲學與底層原理差異 1.1 響應式系統的基因差異 Vue3 的 Composition API 建立在 Proxy-based 響應式系統之上，通過劫持對象的 getter/setter 實現依賴收集。當訪問響應式對象時，Vue 會自動建立組件與數據的依賴關係。 // Vue 響應式原理簡版實現 function reactive(obj) { return new Proxy(obj

react , vue.js , react-hooks , vue3 , 前端

收藏 評論

hui_61e3b3803b922 頭像

xachary - 手把手實現一個圖片可縮放可拖拽的 Vue3 組件

在工作中經常遇到需要預覽一張尺寸可能非常大的圖片，初始化顯示的時候，希望它自適應顯示區域後，還可以縮放並可以在顯示區域中拖拽。 在這裏，手把手展示一下如何實現一個簡單的組件，以實現上述的需求。 效果展示 先看看效果 可以直達👇 示例倉庫 | 示例文檔 | 在線示例 別忘了，可以帶話，給我一個 Star 喲！ 實現 Hook 在實現組件之前，可以先實現一個 hook，以包含核心邏輯，後面實現 組

css3 , 組件庫 , vue3

收藏 評論

south_58ff0845ea0be 頭像

south - vue3 數據大屏實現屏幕自適應 px轉rem amfe-flexible

安裝依賴 pnpm i amfe-flexible autoprefixer postcss postcss-loader postcss-pxtorem 引入amfe-flexible main.js 引入 amfe-flexible import 'amfe-flexible' 創建配置文件 postcss.config.cjs 根目錄創建postcss.config.cjs module.

vue3 , postcss , 前端

收藏 評論

shellingfordly 頭像

shellingfordly - 常規博客看膩了，使用openlayers製作旅行地圖的個人博客👀

由於上半年經常跑出去玩，突然想做一個旅行地圖的博客，想起之前接觸過 openlayers 的項目，也懶得去調查別的庫了，直接用 openlayers 開幹。之前用github actions偶爾會構建失敗，然後vercel上部署的又需要科學訪問。最近域名備案完成，部署到服務器上了，可以正常訪問了。 鏈接 項目代碼github鏈接 博客原文鏈接 旅行地圖預覽鏈接

blog , map , vue3 , openlayers , typescript

收藏 評論

yangxiansheng_5a1b9b93a3a44 頭像

羊先生 - 🎉Vue3+Vite2.6+TypeScript+ant-design-vue+egg.js 一鍵構建管理前後台管理系統

Bag快速開發管理系統、門户網站、博客系統框架，提供基礎的框架，快速搭建企業產品，響應式開發，你可以將它應用在任何需要服務端管理的應用。如：開發管理系統的 API 接口、門户網站博客、企業內部的業務管理、ERP、CMS、APP 的後台等 技術選型 Bag管理系統採用Vue3、Vue-Router4、Vuex4、Ant-Design-Vue、Vite、TypeScript、Egg.js、Mysq

vite , MySQL , eggjs , vue3 , typescript

收藏 評論

shuirongshui 頭像

水冗水孚 - 面試官桀桀一笑：你沒做過大文件上傳功能？那你回去等通知吧！

本文略長，建議收藏，文末會附上完整前後端代碼（vue2vue3+springboot） 湊合算是一套解決方案吧😁😁😁 前端vscode大家都有，後端大家需要下載一個idea，搞一下maven，這一點可以請後端同事幫忙 對於普通的單個的大文件上傳需求，應該可以應對 筆者本地測試，兩三個G的大文件沒有問題，線上嘛，你懂的 大文件上傳問題描述 問題背景 筆者的一個好

fileupload , file , vue3 , springboot

收藏 評論

u_15070324 頭像

寧波阿成 - 基於Jeecgboot3.9.0的vue3版本前後端分離的flowable流程管理平台

初步遷移完成了基於jeecgboot3.9.0的vue3版本的前後端流程管理平台，基於flowable7.2.0，同時支持bpmn流程設計器與仿釘釘流程設計器。 包括消息通知 主要增加的功能還是類似3.8.1，只是現在跟隨3.9.0升級到了springboot3了 本文包含：-->

spring , springboot3 , Flowable , jeecgboot , vue3 , Css , 前端開發 , HTML

收藏 評論

hui_61e3b3803b922 頭像

xachary - 基於 CSS Grid 的簡易拖拉拽 Vue3 組件，從代碼到NPM發佈（3）- 小結

基本完成了拖動、調整大小、拖入、拖出、嵌套、刪除等特性，可以基於組件嵌套，也可以基於數據結構嵌套。算是告一段落了，後面在使用過程發現問題解決問題好了。 請大家動動小手，給我一個免費的 Star 吧~ 大家如果發現了 Bug，歡迎來提 Issue 喲~ github源碼 NPM 示例地址 文檔 交互細節 拖動 基本拖動 拖動區域擴展 拖動目標判斷 調整大小 基本調整大小 調整

組件庫 , vue3 , 拖拽 , typescript , 前端

收藏 評論

kobe_fans_zxc 頭像

高級BUG開發 - 在 Vue 3 項目配置 rem

在 Vue 3 中配置 rem 時，設計稿1920，如果你希望實現一個最小寬度為 1024px 的適配，意思是當屏幕寬度小於 1024px 時不再縮小字體大小，始終保持最小寬度的 rem 配置。可以通過動態設置根元素的字體大小來實現。 一、安裝插件 pnpm install amfe-flexible --save 二、自定義方法 根目錄新建 utils/rem.js文件 (function ()

vue3 , rem , HTML

收藏 評論

iamguyu 頭像

guyu - vite+ts+vue3.2 項目內使用導入本地圖片require報錯

問題描述： 列表渲染中包含圖片，圖片資源放在項目本地靜態文件夾內，默認列表數據定義在一個單獨ts文件內，導入進當前頁面模板內使用報錯 框架： vite+ts+vue3.2 嘗試方案： 1.直接使用外部引入路徑 × 這裏使用別名還是相對路徑都無法解析正確圖片地址 2.使用require() × 在vue2項目中JS文件內使用require()可以

vue3 , require , import , typescript , 前端

收藏 評論

miraak 頭像

老貓抽旱煙 - vue3 父組件給子組件傳遞泛型（不用JSX）

最近在封裝一個組件，使用的時候希望父組件能給子組件傳遞一個泛型，在網上搜了半天，答案都是説要用jsx才能實現。具體寫法如下： 使用JSX 這段代碼來自Eluxjs的示例項目elux-vue-antd-admin，感興趣的可以看下。 父組件： (為減少篇幅，代碼刪了很多，當偽代碼看吧) const Component = defineComponentProps({ props: [

vue3 , 泛型 , typescript

收藏 評論

xiaodaigua_ray 頭像

XiaoDaiGua_Ray - 如何上手使用 Ray Template

Ray Template 🔗 技術棧 Ray Template 是一個基於 vue3.x vite4.x naive-ui pinia tsx 開發的中後台模板。 🌸 解決了什麼問題 其實市面上已經有很多很優秀的中後台模板了，為什麼還要考慮重複去造輪子呢？其實市面上已有的優秀模板，都會有一個共同點：笨重、冗餘、難二開。不論是 vue-element-admin vben-admin，都有這個問

vite , tsx , vue3 , 模板

收藏 評論

xiaodaigua_ray 頭像

XiaoDaiGua_Ray - 如何基於 vue3.x 編寫自己的 hook

什麼是 hooks 函數式編程在前端開發中越來越流行，尤其是在現代前端框架 Vue3.x 和 React 16+ 中。它的優點包括代碼可讀性、可維護性、可測試性和複用性。 學習如何利用框架提供的鈎子（hooks）編寫自定義鈎子函數是非常重要的技能之一。通過編寫自定義鈎子函數，我們可以滿足特定需求，使我們的代碼更加靈活和可擴展。 掌握函數式編程和鈎子的使用，能夠提高我們的開發效率，同時提供更好的用户

hooks , 自定義 , vue3 , typescript , 前端

收藏 評論

jcguanqi 頭像

MarkGuan - uniapp項目APP端安卓ios權限檢測教程

導語：在 APP 的日常開發過程中，權限檢測與授權是不可避免的一項重要的功能，下面就簡單介紹一下如何檢測和授權的方法。 目錄 原理 方法 實戰 原理 此授權方法主要是依託於 HTML5 產業聯盟的HTML5+規範實現的。 HTML5 產業聯盟官網 獲取當前操作系統名稱 可以使用uni.getSystemInfoSync方法； 調用方法檢測權限 安卓可以使用plus.android.req

權限 , uniapp , vue3 , Android , ios

收藏 評論

shuirongshui 頭像

水冗水孚 - Vue3中使用hook實現按住Shift快速勾選el-table功能

需求描述 最近產品説，某個el-table要實現按住shift鍵快速勾選功能 大概就是仿windows系統的文件shift按住選中功能 反正就是儘可能多的讓用户勾選 方便用户快速勾選操作 github完整代碼：https://github.com/shuirongshuifu/vue3-echarts5-example Windows系統的功能效果圖 比如可以向前多選 或者向後多

hooks , vue3 , element-plus , hook

收藏 評論

tanking 頭像

TANKING - Vue3項目創建+組合式API使用+組件通信+渲染微博熱搜+打包上線

摘要 Vue3的組合式API大大減少了代碼量，以及使用也方便了很多，本案例使用Vite創建一個Vue3示例，簡單介紹Vue3的組合式API使用以及父傳子組件傳參示例。 創建Vue3項目 1、首先要安裝 Node.js 下載地址：https://nodejs.org/en/download 2、安裝完成後，創建一個文件夾，用於創建 Vue 項目，我是在桌面創建的 3、在你創建的文件夾內的

vue.js , 組件通信 , vite , vue3 , Javascript

收藏 評論

hezhongfeng 頭像

hezhongfeng - 從0實現RBAC權限模型

詳解 RBAC 基於角色的訪問控制（Role-based access control），指的是通過用户的角色（Role）授權其相關權限，這實現了更靈活的訪問控制，相比直接授予用户權限，要更加簡單、高效、可擴展。 當使用 RBAC 時，通過分析系統用户的實際情況，基於共同的職責和需求，授予他們不同角色。你可以授予給用户一個或多個角色，每個角色具有一個或多個權限，這種 用户-角色、角色-權限 間的關

rbac , vue3 , jpa , springboot

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 初識VUE響應式原理

作者：京東零售 吳靜 自從Vue發佈以來，就受到了廣大開發人員的青睞，提到Vue，我們首先想到的就是Vue的響應式系統，那響應式系統到底是怎麼回事呢？接下來我就給大家簡單介紹一下Vue中的響應式原理。 vue2的響應式原理 儘管Vue2將於2023年12月31日停止維護，但是我們依然有很多項目是基於Vue2.X進行開發的，那麼我們先簡單看一看Vue2.X是基於什麼實現的吧～ Object.defi

響應式設計 , 開發 , vue3 , proxy-pass , JAVA

收藏 評論

yiguxing_6145d78a839c9 頭像

意孤行 - vue3使用iconfont

1.首先登陸阿里雲矢量圖標庫，把需要的字體圖標加入到自己的項目中 2.將項目下載到本地，並解壓到項目中 3.在vue項目下的資源文件夾下新建iconfont文件夾，將下載後的文件解壓將一下文件拷貝到項目的iconfont文件夾下， 4.在main.ts中引入iconfont.css和iconfont.js，如果不使用多色圖標的話可以不用引入iconfont.js文件 import

iconfont , vue3 , 前端

收藏 評論

imwty 頭像

imwty - Nuxt3實戰系列之網絡請求篇

Nuxt3提供了4種方式使得我們可以異步獲取數據 useAsyncData useLazyAsyncData （useAsyncData+lazy:true） useFetch useLazyFetch （useFetch+lazy:true） 4種方式中，其實核心的就是useAsyncData和useFetch。這兩個方法不同於Nuxt2中的asyncData和fetch。接下來我們

vue.js , 服務端渲染 , nuxtjs3 , vue3 , ssr

收藏 評論

imwty 頭像

imwty - Nuxt3實戰系列之配置管理

Nuxt提供了一個運行時配置API，在你的應用程序和服務器路由中暴露配置，並能在運行時通過設置環境變量進行更新。 定義運行時配置 為了將配置和環境變量暴露給應用程序，你需要在nuxt.config文件中使用runtimeConfig選項定義運行時配置。 export default defineNuxtConfig({ runtimeConfig: { // 只在服務端可以訪問的配置項

vue.js , nuxt.js , 服務端渲染 , vue3 , ssr

收藏 評論