Customize configuration

Module. exports = {publicPath: './', outputDir: 'dist', assetsDir:'static'} Use the command to pack NPM run build or use the Vue UI to pack date formatting in the browser and add filtersCopy the code

Element UI form validation

The first common way is: Rules {object} <el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item VisitorName "placeholder=" formData.visitorName" placeholder=" clearable></el-input> </el-form-item> <el-form-item label=" id number "prop="cardCode"> <el-input V-model ="formData.cardCode" : maxLength ="18" Placeholder =" please input id number "clearable></el-input> </el-form-item> </el-form> Data () {return {formData: {visitorName: '', cardType: 1, cardCode: "}, rule: {visitorName: [{required: true, message: 'Please input name ', trigger: 'blur'}, {min: 2, Max: 10, message: 'length between 2 and 10 characters ', trigger: 'blur'}, {required: true, pattern: /^[\ u4E00-\ U9FA5_A-za-z0-9.·-]+$/, Message: 'Names do not support special characters ', trigger: 'blur'}], cardCode: [{required: true, message: 'Please enter id number ', trigger: 'blur'}, {min: 15, Max: 18, message:' Please fill in the 18-digit number truthfully for the school Security department to check ', trigger: 'blur'}, {required: True, the pattern: / (^ \ d {15} $) | | (^ \ d {and} $) (^ \ d {and} (\ d | | X) X $) /, the message: 'please enter the correct id number, the trigger:' blur '}}}}]Copy the code

Child components pass values to parent components

<input @click="sendMsg" type="button" value=" pass value to parent component "> data () {return {return MSG to parent component: }}, methods:{sendMsg(){//func: Is the function that passes the data binding specified by the parent component, This.$emit('func',this.msg)}} This.$emit('func',this.msg)}} This @func="getMsgFormSon"></child> methods:{ getMsgFormSon(data){ this.msgFormSon = data console.log(this.msgFormSon) } }Copy the code

Navigationheaded {_name: “navigationheaded “, name:” navigationheaded “}]

thah.$router.push({ name: "shopping", params: { state: 3 } }).catch(); Add the catch() method <! Const routerPush = VueRouter. Prototype. push = function routerPush = VueRouter push(location) { return routerPush.call(this, location).catch(error => error) }Copy the code

Resolve the problem that the same route cannot be refreshed

$router. Push ({name:"..."); <router-view :key="$route.query. T "/> Query :{t: date.now (),},})Copy the code

Element UI header style Settings

<el-table :data='userList' style="width:100%;" border :header-cell-style="{background:'#F5F7FA',color:'#606266'}"> :header-cell-style="{background:'#F5F7FA',color:'#606266'}Copy the code

Vuex Persistence plug-in (Vuex-PersistedState) solves the problem of missing refresh data

Using AXIos requires converting the data using QS first

The life cycle

The mount element $EL and the data object data of the beforeCreadted vue instance are both undefined and uninitialized. BeforeMount vue instance $EL and data are initialized, but they are still virtual DOM nodes. The specific data.filter has not been replaced. . Mounted Vue instances are mounted, data.filter is successfully displayed with routing hooks. BeforeUpdate data Trigger Updated data Trigger data update BeforeDestroy is triggered when the component is destroyed. The Vue instance disconnects the event listener and is unbound to the DOM (there is no response), but the DOM node is still prompted when the component is destroyedCopy the code

Call Baidu Map

Address of the https://dafrok.github.io/vue-baidu-map/#/zh/index APICopy the code

Axios sends a POST request, and the back end does not receive a solution for the parameters

RequestParam (@requestParam, @requestParam, @requestParam, @requestParam) 'Application /x-www-form-urlencoded', 'application/x-www-form-urlencoded', 'application/x-www-form-urlencoded',' Application /x-www-form-urlencoded', 'Application /x-www-form-urlencoded',' Application /x-www-form-urlencoded'; Let param = new URLSearchParams() param.append('username', 'admin') param.append(' PWD ', 'admin') axios({ method: 'post', url: '/api/lockServer/search', data: Param}) URLSearchParams does not support all browsers, but the overall support is OK, so this simple and straightforward solution is preferred. Solution 2 introduces QS, which is included in AXIOS and does not need to be downloaded. Axios ({url: '/ API /lockServer/search', method: 'post', transformRequest: [function (data) {return qs.stringify (data)}], headers: {'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, data: { username: 'admin', pwd: 'admin'}}) Post ('/ API /lockServer/search',"userName='admin'& PWD ='admin'"); Solution 6 we know that the server now uses @requestparam (parses the parameters from a string) to receive the parameters, but there is another way to use @requestbody (gets the parameters from the RequestBody).Copy the code

Resolve element table component column mismatch

<el-table ref="multipleTable" 
that.$nextTick(() => {
	that.$refs.multipleTable.doLayout()
})

Copy the code