開發(fā)腳手架推薦, 一款基于 Vue.js 的低代碼前端開發(fā)框架
一、項目介紹
Avue 是一款基于 Vue.js 的低代碼前端開發(fā)框架，長期位居 Gitee 前端類項目 Top 3，Star 數(shù)超 7.8k+。項目采用 MIT 協(xié)議，提供可視化表單設(shè)計、動態(tài)路由配置、權(quán)限管理等核心功能，支持快速構(gòu)建企業(yè)級后臺管理系統(tǒng)。開發(fā)者可通過 JSON 配置替代傳統(tǒng)編碼，企業(yè)實測前端開發(fā)效率提升 80%，日均下載量超 5000 次，被廣泛應(yīng)用于政務(wù)、金融、醫(yī)療等領(lǐng)域。
二、項目特點
- 高效開發(fā)：基于數(shù)據(jù)驅(qū)動視圖的理念，大大減少了代碼量
- 開箱即用：豐富的表格、表單配置及多種常用組件
- 強(qiáng)大定制：高度靈活的配置項，滿足各種復(fù)雜場景需求
- 擴(kuò)展性強(qiáng)：支持自定義組件和多種交互方式
詳盡文檔：完善的文檔和示例，快速上手無煩惱。
三、應(yīng)用場景
行業(yè) | 典型應(yīng)用 | 落地效果 |
政務(wù)平臺 | 行政審批系統(tǒng)表單快速生成 | 開發(fā)周期從 2 周縮短至 3 天 |
醫(yī)療信息 | 電子病歷錄入與管理界面 | 表單配置效率提升 200% |
金融風(fēng)控 | 復(fù)雜數(shù)據(jù)填報與校驗系統(tǒng) | 代碼量減少 70% |
教育管理 | 多校區(qū)信息收集與分析平臺 | 響應(yīng)式適配節(jié)省 50% 開發(fā)時間 |
物聯(lián)網(wǎng) | 設(shè)備參數(shù)配置與監(jiān)控面板 | 動態(tài)表單支持實時數(shù)據(jù)綁定 |
四、功能模塊
1. 核心開發(fā)套件
- 表單設(shè)計器：拖拽生成復(fù)雜表單(支持嵌套表格/動態(tài)校驗)
- 表格配置：分頁/排序/自定義列模板一鍵生成
- 權(quán)限管理：基于角色的按鈕級權(quán)限控制
2. 可視化工具
- CRUD 生成器：自動生成增刪改查頁面代碼
- 數(shù)據(jù)大屏：ECharts 集成與可視化配置
- 主題定制：在線調(diào)整顏色/字體/布局樣式
3. 企業(yè)級功能
- 多語言支持：中英文一鍵切換
- 數(shù)據(jù) Mock：本地開發(fā)模擬接口數(shù)據(jù)
- 代碼生成：根據(jù) JSON 配置生成 Vue 組件
4. 擴(kuò)展生態(tài)
- 插件市場：50+ 社區(qū)貢獻(xiàn)的業(yè)務(wù)組件(地圖/流程圖等)
- 微前端支持：與 qiankun 無縫集成
- 移動適配：響應(yīng)式布局兼容手機(jī)/平板
五、功能特點
- 零編碼開發(fā)：通過 JSON 配置生成完整頁面
- 高性能渲染：虛擬滾動技術(shù)支持萬級數(shù)據(jù)表格
- 全棧兼容：無縫對接 Spring Boot/Django 等后端框架
- 企業(yè)級安全：XSS 過濾 + 請求參數(shù)加密
- 生態(tài)豐富：配套 CLI 工具 + VSCode 插件
六、技術(shù)架構(gòu)
三層前端架構(gòu)：
- 視圖層：Vue 3 + Element Plus 組件庫
- 邏輯層：Vuex 狀態(tài)管理 + Axios 數(shù)據(jù)請求
- 配置層：JSON Schema 驅(qū)動頁面生成
層級 | 核心技術(shù) | 關(guān)鍵組件 |
前端框架 | Vue 3 + TypeScript | Vite 4 + Pinia |
UI 組件庫 | Element Plus | ECharts 5 |
工程化 | Webpack 5 + Babel | ESLint + Prettier |
數(shù)據(jù)可視化 | 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);
//關(guān)閉
$DialogForm(appContext)(ops).lose();八、集成指南
1. 安裝
通過 npm 安裝
在現(xiàn)有項目中使用 Avue 時，可以通過 npm 或 yarn 進(jìn)行安裝(需要先引入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
