手把手創建Vue3組件庫
動機 當市面上主流的組件庫不能滿足我們業務需求的時候，那麼我們就有必要開發一套屬於自己團隊的組件庫。 環境 開發環境： vue 3.0 vue/cli 4.5.13 nodeJs 12.16.3 npm 6.14.4 步驟 創建項目 使用 vue-cli 創建一個 vue3 項目，假設項目名為 custom-npm-ui $ vue create custom-npm-ui 手動選擇
Nickname 米花兒團兒
@vue3
Contributes25
Followers0
Contributes
@vue3
Stories List
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"
Nickname 米花兒團兒
用原生寫一個簡易雙向綁定的例子
var obj = {}; Object.defineProperty(obj,'hello',{ get:function(){ //我們在這裏攔截到了數據 console.log("get方法被調用"); }, set:function(newValue){ //改變數據的值，攔截下來額 console.log("set方法被調用"); do
Nickname 赫特莫勒
vue3最全資源庫來襲，包含（web、移動、小程序、Electron、常用庫、面試、文檔工具）等資源
一.介紹 vue3-resource專注於收集vue3相關資源，包含（web/移動/小程序/桌面/常用庫/面試/文檔工具）等資源.持續更新中！！！ 如果這些資源對你有幫助，👏 歡迎star 支持下【vue3-resource】 二.特別説明 🌟 推薦的資源全部支持vue3，由於個人精力有限，可能會遺漏很多優秀的vue3開源資源或資源錯誤！還請您點此主動推薦或修改建議！！！十分感謝🙏。
Nickname husanil
【輕快圖片管理系統】- 開源圖牀系統
輕快圖片管理系統:基於Koa2 + Vue3.x + Vite3.x + typescript開發的輕量級快捷圖片管理系統、圖牀系統 簡介 程序員日常就是寫博客，當然寫博客時就會涉及到在博文中插入圖片，所以往往會使用圖牀來進行圖片資源管理，市面上較流行的圖牀是PicGo，是使用electron-vue開發的桌面應用程序，所以每次需要下載安裝並配置圖牀，比較麻煩。所以開發了這款輕快圖片管理系
Nickname 奶油味擁抱
記一次較完整的vue3+koa2簡單項目開發經驗總結
最近上頭讓我寫個項目簡單的官方網站，需求很簡單，有前後端，前端負責獲取要跳轉的外鏈進行跳轉和介紹視頻的播放，後端負責傳回外鏈和需要播放的視頻。我拿到需求，想了想，這樣子的需求就用不着數據庫了，後端寫個配置文件，傳回固定的數據就可以了，視頻嘛，就通過流的方式傳給前端。 確定好了實現方式，那就擼起袖子開幹。經過簡單思考，使用vue3+koa2的方式來做。一切從簡，安裝vue3-cli和k
Nickname 愛吃雞蛋餅
Koa2實現多併發文件上傳
koa2批量上傳文件 目前的是為了實現批量導入md文件，發佈文章。這樣就不用自己一篇一篇同步文章了。一次可以同步幾千篇文章。 實現界面 內容 主要包含上傳的文件標題，文件大小，上傳狀態。 el-upload ref="uploader" v-model:file-list="fileList" drag multiple :accept="accept" :maxSize="maxS
Nickname 微芒不朽
Koa2進階:CMS系統實戰開發秘籍：1.為什麼選擇Koa2?
目錄 為什麼選擇Koa2? Koa2環境搭建 Koa2核心概念/中間件基礎/異步控制流 Koa2路由管理 Koa2請求響應處理 Koa2中間件使用 Koa2錯誤/異常捕獲與處理 Koa2模板引擎集成 Koa2靜態文件服務 Koa2集成數據庫 模型設計/ORM工具使用 接口身份驗證與授權 API接口設計 Koa2日誌記錄 CMS架構設計 CMS內容管理 CMS用户
Nickname 微芒不朽
效能工具（八）之vite開發或生產環境下的命令行變量傳參（比如啓動項目時多視圖選擇其一）
需求描述 前段時間有這樣的一個需求： 筆者有一個項目，在啓動或者打包的時候 需要根據一些實際情況，去選擇展示那個視圖 就是我們在項目啓動或者打包的時候，需要注入一個全局變量（保存在.env.development或.env.production文件中）通過命令行npm run dev的方式 一般來説，vue-router就可以實現這個需求 但是，某些情況下，這個需求不太適合用vue-
Nickname 水冗水孚
基於vue3+threejs實現太陽系與奧爾特雲層（結尾附源碼）
基於vue3+threejs實現太陽系與奧爾特雲層（結尾附源碼） 先看效果，附源碼地址，看完覺得還不錯的還望不吝一個小小的star 在線預覽：預覽 1 快速上手 1.1 在項目中使用 npm 包引入 Step 1: 使用命令行在項目目錄下執行以下命令 npm install three@0.148.0 --save Step 2: 在需要用到 three 的 JS 文件中導入
Nickname 紫槐
一個開箱即用的已集成全部主流前端工具、類庫的nuxt3服務端渲染ssr項目
項目背景： 需實現公司國際官網項目的seo 如果是react就選用next，因為我最近在用vue3，就試試使用nuxt 在網上找了很多模版，發現都不理想，缺的東西比較多，沒法做到開箱即用，所以自己造個模版項目 採用當前最新的nuxt3實現 目錄簡介： 已集成各類主流vue3生態相關工具或庫 nuxt3 vue官方推薦的最好用，生態最全的nuxt3服務端渲染ssr框架 vue3
Nickname JasonMa
Nuxt3如何部署到Netlify
部署到 Netlify 上需要和 Github 結合，以後你只需要推送代碼就會自動部署。 Nuxt3 官網描述部署到 Netlify 先看官網怎麼Nuxt3官網怎麼描述的 零配置！！！ 我看了很多YouTube視頻也是説不需要配置，結果就是所以的編譯和加載都ok，首頁就是沒有。 Netlify 在頁面點擊創建 這裏有三中方式，我就是選擇的第一種。反正我看了 Nuxt 説的，都是零配
Nickname 派大星，海綿寶寶
View UI Plus 發佈 1.2.0 版本，新增 Image、Skeleton、Typography 組件
View UI Plus 1.2.0 版本已於 2022-06-13 發佈。 更新日誌 請到官網 www.iviewui.com 查看最新版。 新增排版組件 Typography，內置豐富的內容排版 UI，支持拷貝、可編輯、省略等功能。Typography 共包含 5 個組件： Typography 內容結構 Title 標題 Paragraph 段落 Te
Nickname Aresn
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,
Nickname 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
Nickname 東隅桑榆
vue3封裝一個帶動畫的關閉按鈕
預覽效果： 實現源碼： template MenuBtn :open="openMenu" :size="24" / /template template div :class="`menu ${open?'open':''}`" :style="`width:${size}px;height:${size}px`" span :sty
Nickname jsoncode
掌握 Vue3 中的 setup 函數
Vue.js 經歷了從 Vue 2 到 Vue 3 的重大變革，帶來了許多引人注目的新特性和性能優化。其中，setup函數無疑是最引人矚目的新星之一。 一、概覽 setup函數是 Vue 3 引入的一個新的組件選項，作為組合式 API 中心，它允許開發者在一個空間內使用所有的 composition API。這個函數將在組件創建之前執行，這樣就為你提供了定義響應式變量、計算屬性、函數等的機會，從而
Nickname Apifox
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
Nickname 肥皂泡
Vue3開發技巧：使用jsx快速開發組件
創建項目 pnpm create vite 直接使用模板創建 pnpm create vite my-vue-app --template vue 安裝 JSX 支持依賴 cd my-vue-app npm install @vitejs/plugin-vue-jsx -D 配置 vite.config.js import { defineConfig } from 'vite' import v
Nickname 微芒不朽
vue+echarts繪製中國地圖
先介紹一下如何獲取一下china.json文件：阿里雲-DataDv數據可視化平台 也可以自己訪問鏈接：https://datav.aliyun.com/portal/school/atlas/area_selector 聲明：我是vue3項目，根據自己的情況而定 引入： template div id="mapArea" ref="chinaChart" / /te
Nickname 史晶晶
邊緣吸附組件（vue)
效果Gif圖 使用方式 script lang="ts" setup import EdgeDockable from "***/EdgeDockable.vue"; /script template !-- localStorage 存儲位置時所需要的 key="AI" -- EdgeDockable localStorageKey="AI" template #collap
Nickname 你好啊你好
Vue狀態管理進化史：從Vuex到Pinia的架構演進與選型指南
引言：狀態管理的必要性演變 在 Vue 應用開發中，隨着組件層級的加深和業務複雜度的提升，組件間共享狀態的需求逐漸凸顯。早期通過 props/events 的"提拉下鑽"模式在小型應用中尚可維持，但當組件樹深度超過3層或需要跨組件共享狀態時，這種模式便暴露出代碼冗餘、維護困難等問題。 狀態管理庫的出現正是為了解決這種"狀態分散"的痛點。從 Vue 官方維護的 Vuex 到社區驅動的 Pinia，狀
Nickname 強悍的茴香
vue3 上傳插件vue-file-agent-next
一、安裝插件 pnpm add @boindil/vue-file-agent-next 二、基本使用 /* main.ts */ import VueFileAgentNext from "@boindil/vue-file-agent-next"; import "@boindil/vue-file-agent-next/dist/vue-file-agent-next.css"; cons
Nickname 高級BUG開發
開源框架驅動的跨境電商系統源碼實戰：Vue3前端架構與微服務後台協同
系統架構設計 本方案採用微服務架構解耦業務模塊，前端基於Vue3構建響應式界面，後端通過Spring Boot微服務集羣實現高併發處理。整體架構採用容器化部署，支持全球多區域彈性擴展。 技術棧推薦表 層級 技術選型 版本/説明 源碼演示 xcxyms.top 前端框架 Vue3 3.4.x + Compos
Nickname 愛聽歌的鑰匙扣