This is my first nuggets blog post, the beginning of nuggets writing.

What is Avue?

Avue is a low-code front-end framework based on the Element framework. It uses JSON configuration to generate pages, which can reduce the workload of page development and greatly improve efficiency.

You don’t need to know the front end

Most Avue users have never written a front end page before and can’t do JavaScript, but can create a professional and complex back end interface that no other front end UI library can.

Not affected by front-end technology updates

Angular/Vue/React versions are now obsolete, popular Gulp has been replaced by Webpack, and these pages would be expensive to maintain if they weren’t Avue.

Two, Avue installation

The installation

Install via NPM

NPM I @smallwei/avue -s yarn add @smallwei/avue -s import avue from '@smallwei/avue'; import '@smallwei/avue/lib/index.css'; Vue.use(Avue);Copy the code

CDN installation

<! - introduce the style file - > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css" / > < link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> <! - introduce relevant JS file -- > < script SRC = "https://unpkg.com/vue/dist/vue.js" > < / script > < script src="https://unpkg.com/element-ui/lib/index.js"></script> <script SRC = "https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/avue.min.js" > < / script > < div id = "app" > < / div > < script > / / # in the app New Vue({el:'app', data(){return{}}}); app.use(AVUE); </script>Copy the code

Installation by scaffolding

Vue Cli NPM install -g@vue/Cli # Create a project Vue create hello-world # Create a project Vue create hello-world # Create a project Vue create hello-world Go to Dependencies -> Install dependencies and add @Smallwei /avue to the dependency.Copy the code

Three, Avue use

Crud components

<el-row style="margin-bottom:20px; Font-size :15px"> <el-col :span="4"> <el-switch size="small" V-model ="showBorder"> </el-switch></el-col> <el-col :span="4"> <el-switch size="small" V-model ="showStripe"> </el-switch></el-col> <el-col :span="4"> <el-switch size="small" V-model ="showIndex"> </el-switch></el-col> < EL-col :span="4"> <el-switch size="small" V-model ="showCheckbox"> </el-switch></el-col> <el-col :span="4"> <el-switch size="small" v-model="showHeader"> </el-switch></el-col> </el-row> <el-row style="margin-bottom:20px"> <el-radio-group V-model ="sizeValue"> <el-radio label="small"> Default </el-radio> <el-radio label="medium">medium</el-radio> <el-radio label="small">small</el-radio> <el-radio label="mini">mini</el-radio> </el-radio-group> </el-row> <avue-crud :data="data" :option="option0"></avue-crud> <script> export default { data() { return { obj:{}, data: [{name: 'Joe' sex: 'male'}, {name: 'bill' sex: 'female'}, {name: 'Cathy' sex: 'female'}, {name: 'zhao six, sex:' male '}], showBorder: false, showStripe: false, showHeader: true, showIndex: true, showCheckbox: false, showPage:false, sizeValue:'small' } }, computed: { option0(){ return{ border:this.showBorder, stripe:this.showStripe, showHeader:this.showHeader, index:this.showIndex, size:this.sizeValue, selection:this.showCheckbox, page:this.showPage, align:'center', menuAlign:'center', Column: [{label: 'name', prop: 'name'}, {label: 'gender, prop:' sex '}]}}}} < / script >Copy the code

The Form component

<el-row style="margin-bottom:20px"> <el-radio-group V-model ="sizeValue"> <el-radio label="small"> Default </el-radio> <el-radio  label="medium">medium</el-radio> <el-radio label="small">small</el-radio> <el-radio label="mini">mini</el-radio> </el-radio-group> </el-row> <avue-form ref="form" v-model="obj" :option="option" @reset-change="emptytChange" @submit="submit"> <template slot-scope="scope" slot="menuForm"> <el-button @click="tip"> </el-button> </avue-form> <script> var DIC = {VAILD: [{label: 'true', value: 'true'}, {label: 'false', value: 'false'}], SEX: [{label: 'male ', value: 0}, {label:' female ', value: 1 }] } export default { data() { return { obj:{}, sizeValue:'small' } }, computed: {option(){return{size: this.sizevalue, mockBtn:true, submitText: 'Done ', printBtn:true, column: [{label: "user name ", prop: "Username ", tip: 'this is info ', span: 8, maxLength: 3, suffixIcon: 'el-icon-tickets', prefixIcon: 'el-icon-tickets', minLength: 2, mock:{type:'name', en:true,}, rules: [{required: true, message: "Please enter user name ", trigger: "Blur"}], click () = > {value, the column} {this. $message. Success (' click ')}}, {label: "name", prop: "Name ", disabled:true, mock:{type:'name'}, span:8}, {label:" password ", prop: Mock :{type:'name'}, span:8}, {label: "type", prop: "type", type: "select", dicData: mock:{type:'name'}, span:8}, {label: "type", prop: "type", type: "select", dicData: DIC.VAILD, span:6, mock:{type:' DIC ',},}, {label: "permission ", prop: "grade", span:6, type: "checkbox", dicData: DIC.VAILD, mock:{type:' DIC ',},}, {label: "switch", prop: "switch", span: 6, type: "switch", dicData: DIC.SEX, mock:{type:' DIC '}, hide: true, row:true,}, {label: "SEX ", prop:" SEX ", span: 6, type: "radio", dicData: DIC.SEX, mock:{type:' DIC '}}, {label: "number", prop: "number", type:' number', span: 6, precision:2, mock:{ type:'number', max:1, min:2, precision:2 }, minRows: 0, maxRows: 3, row:true, }, { label: "Site", the span: 12, prop: "url", the prepend: 'http://', mock: {type: 'url, headers, false,}, append:' com, row: true,}, {label: Prop: "date", type: "date", span:8, format:'yyyy-MM-dd', valueFormat:'yyyy-MM-dd', mock:{ type:'datetime', format:'yyyy-MM-dd' }, }, {label: "datetime", prop: "datetime", type: "datetime", span:8, format:'yyyy-MM-dd hh:mm:ss', valueFormat:'yyyy-MM-dd hh:mm:ss', mock:{ type:'datetime', Format :' YYYY-MM-DD hh: MM :ss', now:true,},}, {label: "time", prop: "time", type: "time", span:8, format:'hh:mm:ss', valueFormat:'hh:mm:ss', mock:{ type:'datetime', format:'hh:mm:ss' }, }, { label: Mock :{type:'county'},},{label: "suggestion ", span: 24, prop: "address", mock:{type:'county'},},{label:" suggestion ", span: 24, prop: "address", mock:{type:'county'},},{label: "suggestion ", span: 24, prop: "adit", mock:{ type:'word', min:10, max:30 }, }] } } }, mounted(){ this.obj={ username :'smallwei', switch:0, EmptytChange (){this.$message.success(' emptymethod callback '); }, submit () {this.$message.success(' current data '+ json.stringify (this.obj)); }, tip(){this.$message.success(' custom button '); } } } </script>Copy the code

4. Disadvantages of Avue

Massively customized UI

JSON configuration makes Avue more suitable for pages with a large number of common UI components, but for toC-oriented pages where personalized visuals are desired, Avue is not suitable, and in fact most of the front-end UI component libraries are not suitable for custom development.

Extremely complex or specific interactions

Complex front-end features, such as visual editors with a lot of custom drag-and-drop operations, that rely on native DOM implementations are not available with Avue.

Five, the summary

If the management system or OA system is only for internal use, Avue can be used for development, and there is not too much custom components involved. If it is a large external management system with special customized projects, it can be used in combination with Avue. After all, it can reduce a lot of workload for developers.