Avue1.0 is released!! Welcome to click the demo address to experience

Demo address: http://122.4.205.228:7777 – Jenkins automatically deploy + docker + git hook

Code cloud address :gitee.com/smallweigit…

Github address: github.com/nmxiaowei/a…

Introduction to the

Avue is a program to write vue similar to Easyui that supports SSR(server rendering) and SPA(singletons page). It is based on JSON configurable interface to save development cost and improve development efficiency. It is basically composed of vue.js and Element. Vuex local persistent storage, encapsulation of H5 sessionStorage and localStorage 2. Vuex local persistent storage, encapsulation of H5 sessionStorage and localStorage 2. Added the local offline package import method to import vue, vue-router and other third-party packages. Support for SSR Server Rendering (Express) vuE-server-Renderer 4. Support Alibaba icon library online call, automatically synchronized icon Alibaba icon library 5. Support iframe nested third-party websites 6. Support JS dynamic matching CRUD and FORM, save a lot of development costs, configure dictionary interface automatic matching dictionary 7. Supports various login methods, including local verification code and server verification code verification 8. Global error logging 9. SCSS modular development 10. Add system management templates (user management, role management, menu management – automatically generated based on cruD components of this framework) 11. / SRC /docker/Dockerfile

The route change singleton page title is supported

Dynamic Permission Switching

The instance

The login

Permission Test page

The data show

Error page

Error logging

CRUD

FORM

User management

Role management

The menu Settings

Alibaba Icon Library (online call)

Login page SSR rendering

The home page

Third Party websites

function

- VuEX Persistent storage - Lock screen - SSR rendering page - Data Display - Login/Logout - User name login - Verification code login - Third-party login (under development) - Permission verification - Third-party website nested - CRUD(add, Delete, modify, and query) - FORM(dynamic generation) - Alibaba icon library (online call) - system management - user management - role management - menu management - more functions open in the developmentCopy the code

Explicit and implicit control of buttons

The permission array in the vuEX object returned includes permissions for buttons such as [‘sys_crud_add’, ‘sys_crud_export’], cruD add button and export button

Global error logging

Let go. / SRC/page/errlog/index. The vue errorA component in the test he is stored locally, back to your own methods to upload to the server, call CLEAR_ALL_ERR method to empty land

See vuex persistence in demo

Detailed demo please. / SRC/store/modules/TGS js instance

. state:{ ... tag: getStore({ name:'tag' }) || tagObj
},
...
 mutations: {
  ...
  setStore({ name: 'tagList', content: state.tagList, type: 'session'})... }Copy the code

Data encryption utility class — encryption in./ SRC /util/util

Support Base64 and Aes encryption

const data ={
  username:'admin',
  password:'123456'} const userInfo = encryption({data: data,// encryption key:'123',// Aes encryption type, not AES encryption do not need to passtype: 'Base64', / / the type of encryption Base64 | | Aes param: ['useranme'.'password'] // The field to encrypt});Copy the code

CRUD and FORM usage instructions ———— Automatically generates CRUD and FORM based on the CONFIGURATION of JSON files, and configures dictionary interfaces to automatically match dictionaries

Detailed demo look at. / SRC/page/table/index. The vue and. / SRC/page/form/index. The vue instance instance

Subdefinition action button <br /> <template slot-scope="scope">
    <el-button icon="el-icon-check" size="small" @click="handleGrade(scope.row,scope.$index)"> permission </el-button> </template> js automatic configuration crud<br /> {border:true// Whether the table displays border index:true,// whether the table displays serial number selection:true// Select dic:['GRADE'.'SEX'Vuex column: [{label:],// Pass in the variable that needs to get the dictionary."Username"// Table title prop:"username"// Table key width:"150"// Table width fixed:true// Whether to freeze columns hide:true,// Whether to hide span:12,// Form grille display columnstype:'select', / / select | radio | checkbox | date by default text visdiplay:true// The form does not display overHidden:true,// Beyond the ellipsis shows dicData:'GRADE',// pass in the dictionary to be referenced],//typeData dictionary, whentypeAs: select | radio | checkbox load dataDetail: val = > {return `<span class="el-tag">${val}</span>`;; // Whether to handle list data}, rules: [{required:true, message: "Please enter user name", trigger: "blur"}] // Form validation rules}}Copy the code

The development of

# Clone project
git clone https://gitee.com/smallweigit/avue.git

# install dependencies
npm install
   
# Do not install NPM with CNPM. There will be various weird bugs
npm install --registry=https://registry.npm.taobao.org

# start service
npm run dev
Copy the code

Debugging and publishing

Build the test environment
npm run dev

Build the build environment
npm run build

# Build SSR render page
npm run start

Copy the code

other

# Code detection
npm run lint

# Unit tests
npm run karma

# Build SSR client code
npm run build:client

# Build SSR server side code
npm run build:server
Copy the code

License

MIT

Copyright (c) 2017-present Smallwei QQ:1634566606