簡介
Avue是基於Vue.js和element的快速開發框架 它的核心是資料驅動UI的思想,讓我們從繁瑣的crud開發中解脫出來,它的寫法類似easyUI,但是寫起來比easyui更容易,因為它是基礎資料雙向繫結以及其他vue的特性。同時不知侷限於crud,它還有我們經常用的一些元件例如,表單,資料展示卡,人物展示卡等,更多的元件還在開發
高階vip群
百度雲課程
avue相關地址
歡迎加入QQ交流群,互相學習
前端avue交流群:606410437
後臺微服務群:23754102
服務端解決方案:gitee.com/log4j/pig
剛入門的前端小師妹部落格:my.oschina.net/u/3883702/
最近很多人反應不太會用crud快速開發元件,因此免費推出crud系列的講解課程,詳情請加QQ群
avue綜合實際例項
技術文件
原始碼地址
更新日誌
線上demo
- 演示地址1:http://avue.2bugs.cn
- 演示地址2:http://122.4.247.156:7777——jenkins+docker+git鉤子自動部署
使用方式
1.html引入
axios、vue、element-ui相關依賴也要引入
avue-cdn:https://gitee.com/smallweigit/avue/raw/master/lib/avue.js
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/element-ui/2.3.4/index.js"></script>
<script type="text/javascript" src="https://gitee.com/smallweigit/avue/raw/master/lib/avue.js"></script>
複製程式碼
2.npm引入
npm install avue-cli
import Avue from `avue-cli/packages/index.js`;
複製程式碼
功能結構
- 全域性錯誤日誌記錄
- vuex持久化儲存
- 主題色切換
- 鎖屏
- SSR渲染頁面
- 資料展示
- 登入/登出
- 使用者名稱登入
- 驗證碼登入
- 許可權驗證
- 第三方網站巢狀
- CRUD(增刪改查)
- FORM(動態生成)
- 阿里巴巴圖示庫(線上呼叫)
- 環境變數
- 表格樹
- 引導頁
- 資料持久化
- 剪下板
- 系統管理
- 使用者管理
- 角色管理
- 選單管理
- 高階路由
- 動態路由
- 引數路由
- 更多功能開在開發
複製程式碼
頁面展示
炫彩主題
主題色
本地資料持久化
環境變數
表格樹
登入
許可權測試頁面
資料展示
錯誤頁面
錯誤日誌記錄
CRUD
FORM
使用者管理
角色管理
選單設定
阿里巴巴圖示庫(線上呼叫)
登入頁面SSR渲染
主頁
第三方網站
開發
# 克隆專案
git clone https://gitee.com/smallweigit/avue.git
# 進入專案
cd avue
# 安裝依賴
npm install --registry=https://registry.npm.taobao.org
# 啟動服務
npm run dev
複製程式碼
除錯與釋出
# 構建測試環境
npm run dev
# 構建生成環境
npm run build
# 構建SSR渲染頁面
npm run start
複製程式碼
其它
# 程式碼檢測
npm run lint
# 單元測試
npm run karma
# 構建SSR客戶端程式碼
npm run build:client
# 構建SSR服務端端程式碼
npm run build:server
複製程式碼
友情連結
License
Copyright (c) 2017-present Smallwei QQ:1634566606