像easyUI同樣寫vue——avue後臺集成組件

avue1.0發佈了！！！歡迎點擊演示地址體驗

演示地址:http://122.4.205.228:7777——jenkins+docker+git鉤子自動部署

碼雲地址:gitee.com/smallweigit…

github地址：github.com/nmxiaowei/a…

簡介

avue 是一個相似easyui那種去寫vue的方案支持SSR(服務端渲染)和SPA(單例頁面),所有基於json可配置化去開發界面，節約開發成本和提升開發效率，基本構成由 Vue.js 和 element。它使用了最新的前端技術棧，權限驗證，第三方網站嵌套等功能，不少功能還在開發，敬請期待

1.vuex本地持久化存儲,封裝h5的sessionStorage和localStorage

2.加入了本地離線的包引入方法去引入vue，vue-router等第三方包 詳細介紹

3.支持SSR服務端渲染(express)vue-server-renderer

4.支持阿里巴巴圖標庫在線調用，自動同步圖標 阿里巴巴圖標庫

5.支持iframe嵌套第三方網站詳細介紹

6.支持js動態可配CRUD和FORM,節約大量開發成本，配置字典接口自動匹配字典

7.支持多種登陸方式,本地驗證碼校驗和服務端驗證碼校驗

8.全局錯誤日誌記錄

9.scss模塊化開發

10.增長系統管理模板(用戶管理,角色管理,菜單管理——基於本框架的crud組件自動生成)

11.打包後docker一鍵部署腳本基於nginx鏡像（具體的能夠修改./src/docker/Dockerfile）

支持路由改變單例頁面title

權限動態切換

實例

登陸

權限測試頁面

數據展現

錯誤頁面

錯誤日誌記錄

CRUD

FORM

用戶管理

角色管理

菜單設置

阿里巴巴圖標庫(在線調用)

登陸頁面SSR渲染

主頁

第三方網站

功能

- 全局錯誤日誌記錄
- vuex持久化存儲
- 鎖屏
- SSR渲染頁面
- 數據展現
- 登陸/註銷
 - 用戶名登陸
 - 驗證碼登陸
 - 第三方登陸(開發中)
- 權限驗證
- 第三方網站嵌套
- CRUD(增刪改查)
- FORM(動態生成)
- 阿里巴巴圖標庫(在線調用)
- 系統管理
 - 用戶管理
 - 角色管理
 - 菜單管理
- 更多功能開在開發
複製代碼

按鈕的顯隱控制

返回的vuex對象中額permission數組包括按鈕的權限 例如: ['sys_crud_add', 'sys_crud_export'], crud的增長按鈕和導出按鈕

全局錯誤日誌記錄

放開./src/page/errlog/index.vue中的errorA的組件便可測試他是存儲在本地，能夠本身回掉方法上傳服務器，調用CLEAR_ALL_ERR方法清空本地

vuex持久化存demo請看

詳細demo請看./src/store/modules/tgs.js實例

...
state:{
  ...
  tag: getStore({ name: 'tag' }) || tagObj
},
...
 mutations: {
  ...
  setStore({ name: 'tagList', content: state.tagList, type: 'session' })
  ...
 }
複製代碼

數據加密工具類——在./src/util/util.js中encryption

支持Base64和Aes加密

const data ={
  username:'admin',
  password:'123456'
}
const userInfo = encryption({
    data: data,//加密的數據
    key:'123',//aes加密時的類型，不是aes加密不用傳
    type: 'Base64',//要加密的類型 Base64 || Aes
    param: ['useranme', 'password'] //要加密的字段
});
複製代碼

CRUD和FORM使用說明————根據配置json文件自動生成CRUD和FORM，而且配置字典接口，自動匹配字典

詳細demo請看./src/page/table/index.vue和./src/page/form/index.vue實例實例

子定義操做按鈕<br />
<template slot-scope="scope">
    <el-button icon="el-icon-check" size="small" @click="handleGrade(scope.row,scope.$index)">權限</el-button>
</template>
js自動配置crud<br />
{
  border: true,//表格是否顯示邊框
  index: true,///表格是否顯示序號
  selection: true,//表格是否顯示可選select
  dic:['GRADE','SEX'],//傳入須要獲取字典的變量，看vuex中的getDic方法
  column: [
    {
      label: "用戶名",//表格的標題
      prop: "username",//表格的key
      width: "150",//表格的寬度
      fixed: true,//是否凍結列
      hide:true,//是否隱藏
      span:12,//表單格柵顯示的列
      type:'select', //select | radio | checkbox | date 默認爲text
      visdiplay:true,//表單不顯示
      overHidden: true,//超出省略號顯示
      dicData: 'GRADE', //傳入須要引用的字典
      ],//type的數據字典,當type爲：select | radio | checkbox 加載
      dataDetail: val => {
        return `<span class="el-tag">${val}</span>`;;//是否對列表數據處理
      },
      rules: [{ required: true, message: "請輸入用戶名", trigger: "blur" }] //表單校驗規則
    }
}
複製代碼

開發

# 克隆項目
git clone https://gitee.com/smallweigit/avue.git

# 安裝依賴
npm install
   
# 建議不要用cnpm安裝 會有各類詭異的bug 能夠經過以下操做解決 npm 下載速度慢的問題
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

MIT

Copyright (c) 2017-present Smallwei QQ:1634566606