開發腳手架推薦, 一款基于 Vue.js 的低代碼前端開發框架
作者：三點水池
Avue 是一款基于 Vue.js 的低代碼前端開發框架，長期位居 Gitee 前端類項目 Top 3，Star 數超 7.8k+。
一、項目介紹
Avue 是一款基于 Vue.js 的低代碼前端開發框架，長期位居 Gitee 前端類項目 Top 3，Star 數超 7.8k+。項目采用 MIT 協議，提供可視化表單設計、動態路由配置、權限管理等核心功能，支持快速構建企業級后臺管理系統。開發者可通過 JSON 配置替代傳統編碼，企業實測前端開發效率提升 80%，日均下載量超 5000 次，被廣泛應用于政務、金融、醫療等領域。
二、項目特點
- 高效開發：基于數據驅動視圖的理念，大大減少了代碼量
- 開箱即用：豐富的表格、表單配置及多種常用組件
- 強大定制：高度靈活的配置項，滿足各種復雜場景需求
- 擴展性強：支持自定義組件和多種交互方式
詳盡文檔：完善的文檔和示例，快速上手無煩惱。
三、應用場景
行業 | 典型應用 | 落地效果 |
政務平臺 | 行政審批系統表單快速生成 | 開發周期從 2 周縮短至 3 天 |
醫療信息 | 電子病歷錄入與管理界面 | 表單配置效率提升 200% |
金融風控 | 復雜數據填報與校驗系統 | 代碼量減少 70% |
教育管理 | 多校區信息收集與分析平臺 | 響應式適配節省 50% 開發時間 |
物聯網 | 設備參數配置與監控面板 | 動態表單支持實時數據綁定 |
四、功能模塊
1. 核心開發套件
- 表單設計器：拖拽生成復雜表單(支持嵌套表格/動態校驗)
- 表格配置：分頁/排序/自定義列模板一鍵生成
- 權限管理：基于角色的按鈕級權限控制
2. 可視化工具
- CRUD 生成器：自動生成增刪改查頁面代碼
- 數據大屏：ECharts 集成與可視化配置
- 主題定制：在線調整顏色/字體/布局樣式
3. 企業級功能
- 多語言支持：中英文一鍵切換
- 數據 Mock：本地開發模擬接口數據
- 代碼生成：根據 JSON 配置生成 Vue 組件
4. 擴展生態
- 插件市場：50+ 社區貢獻的業務組件(地圖/流程圖等)
- 微前端支持：與 qiankun 無縫集成
- 移動適配：響應式布局兼容手機/平板
五、功能特點
- 零編碼開發：通過 JSON 配置生成完整頁面
- 高性能渲染：虛擬滾動技術支持萬級數據表格
- 全棧兼容：無縫對接 Spring Boot/Django 等后端框架
- 企業級安全：XSS 過濾 + 請求參數加密
- 生態豐富：配套 CLI 工具 + VSCode 插件
六、技術架構
三層前端架構：
- 視圖層：Vue 3 + Element Plus 組件庫
- 邏輯層：Vuex 狀態管理 + Axios 數據請求
- 配置層：JSON Schema 驅動頁面生成
層級 | 核心技術 | 關鍵組件 |
前端框架 | Vue 3 + TypeScript | Vite 4 + Pinia |
UI 組件庫 | Element Plus | ECharts 5 |
工程化 | Webpack 5 + Babel | ESLint + Prettier |
數據可視化 | AntV G2Plot | 3D 地圖插件 |
七、代碼示例
1. 全局配置
在引入 Avue 時，可以傳入一個全局配置對象
const app =createApp({});
app.use(AVUE,{
size:'',
crudOption:{},
formOption:{},
appendToBody:true,
modalAppendToBody:true,
cos:{},
qiniu:{},
ali:{},
canvas:{}
});2. 多語言切換
// 完整引入 Avue
import {createApp} from 'vue'
import Avue from '@smallwei/avue'
import zhLocale from '@smallwei/avue/lib/locale/lang/zh'
import enLocale from '@smallwei/avue/lib/locale/lang/en'
const app =createApp({})
app.use(Avue, { locale:enLocale })3. 全局API
import { getCurrentInstance } from "vue";
import { $DialogForm } from "@smallwei/avue";
const { appContext } = getCurrentInstance();
const ops = {
option: {
submitText: "完成",
column: [
{
label: "姓名",
prop: "name",
span: 24,
rules: [
{
required: true,
message: "請輸入姓名",
trigger: "blur",
},
],
},
],
},
};
//用法 1
appContext.config.globalProperties.$DialogForm(ops);
//用法 2
$DialogForm(appContext)(ops);
//關閉
$DialogForm(appContext)(ops).lose();八、集成指南
1. 安裝
通過 npm 安裝
在現有項目中使用 Avue 時，可以通過 npm 或 yarn 進行安裝(需要先引入ElementPlus作為依賴支持)：
# 使用 pnpm 安裝（推薦）
pnpm add @smallwei/avue
# 或使用 npm 安裝
npm install @smallwei/avue
# 或使用 yarn 安裝
yarn add @smallwei/avue2. 使用
// 完整引入
import { createApp } from'vue'
import Avue from'@smallwei/avue'
import'@smallwei/avue/dist/avue.css'
import App from'./App.vue'
const app = createApp(App)
app.use(Avue)
app.mount('#app')使用字典和上傳組件需要引入axios：
import {createApp} from 'vue'
import axios from 'axios'
const app = createApp({})
app.use(Avue,{axios})九、源碼地址
https://gitee.com/smallweigit/avue
責任編輯：趙寧寧
來源：
技術老男孩
