I’m the front end of the company

Buttons with business functions

For buttons with certain service functions, such as adding a user, deleting a user, editing a user, etc., we name them with handle beginning and service ending. Take the following cases as an example:

If the name of our method is the same as the name of the interface we imported, we should change the name of the imported interface as the first action

Search criteria and table data naming

This will be divided into two cases, the first case is not the same name, and the other case is the same name

There are no duplicate names

For data specifications in data

There are two cases

Not much data

As follows

		{
      stringVariable: "",
  		nullVariable|numberVariable:null,	
  		arrayVariable:[],
			objectVariable:{},
			arrayObjectVariable:[{},{}]
    }
Copy the code

Specification for writing method annotations

You need to provide a method with its variables and annotations for its actions

/ * * *@description: Function of method *@param {parameter type} Parameter name // If received parameter *@param {parameter type} Parameter Name *@return {return value type}	// If there is a return value */
Copy the code

API usage specifications

import { getAuthUserList } from '@/api/auth'

/ /... The omitted part.....

async getuserList(){

  try{
  	const res = await getAuthUserList()
    / /...
  }catch{
  	// do something}}Copy the code

Code specification

It is always not recommended to use index directly as the key for the current list, and other unique values should be used as keys whenever possible

About the v – once

For some things that only need to be rendered once, v-once is more recommended

If v-once is used in v-for, we must add a key to this element

key 

//component.vue
<template>
  <component-child :key='componentChildKey'></component-child>
</template>
<script>
  export default {
    data(){
      return {
        componentChildKey:1
      }
    },
    methods:{
      upDateComponentChild(){
        this.componentChildKey += 1
      }
    }
  }
</script>
Copy the code

Filter out fields we don’t need

For some business scenarios, if there is some data returned from the back end that we do not need, we should use a map map to simply process the data when we receive it

/ /...
try{
	const res = await getDates()
  this.tableData = res.map(el= > {
  	let {a,b,c} = el
    return{a,b,c}
  }}
}catrh{return}

/ /...
Copy the code

A value in an array or object that determines whether a condition exists

On the Promise

For asynchronous requests, I always recommend writing them in a try catch, which is already used in an example above

About Watch computed Methods

First, let’s clarify their usage scenarios:

1. watch

Listen for one piece of data, it affects multiple pieces of data or when it changes, we need to do a lot of other things

2. computed

It is dependent on other data for change, or the calculation of this data has a significant performance cost

3. methods

It’s updated in real time

Service scenario: Listen to multiple data at the same time

<script>
export default(){
  computed:{
    handleChange(){
      const {fileName,FolderName} = this.$props
    }
  },
    watch:{
      handleChange:{
        handler:function(val,oldval){
          //do somting
        },
        immediate:true
      }
    }
}
</script>
Copy the code

Nomenclature semantics

Don’t use appearances and obscure names. Here are some examples of mistakes

<div class='red'></div>
Copy the code

Tips: Do not use ids unless necessary

Reflux and redraw problems

If a piece of CSS is likely to change frequently, then we need to consider the performance cost of backflow and redraw. We use transition and transform instead of transiton and transform, as shown below:

transform

Try to avoid using label names

Try to avoid writing:

.app-header span{
	
}
Copy the code

The following is recommended

.app-header>.name-title{

}
Copy the code

About general framework use

Lazy loading

First, for routing, we use lazy loading

{
   path: '/home',
   name: 'home',
   component: import(/* webpackChunkName: 'Chunk name you want to set' */'.. /page/home') }Copy the code

Separate page

I have already set a class for our outermost layer. If it is not necessary, please do not set a separate class to control it. The details are in app.vue ~

permissions

Some of the button permissions within our component will be placed in the meta

The case where you only need to control a single button:

<template> <div> < el-button V-permission :delete="roles"> Button </ el-button > </div> </template> <script> computed: { hasSelected() { return this.delUserList.length > 0 }, roles() { return this.$route.meta.roles ? this.$route.meta.roles : [] } }, </script>Copy the code

SearchForm

This is a form search component that only provides some simple functions at present. It is suggested that only type can be used at present: El-input, el-select, el-date-picker, until I write the partial document, there can be only one ~ method in the same SearchForm, and only one ~ method can be used.

<template>
  <div class="card-block">
    <search-form :list="formList" :search-width="200" @change="initChange" />
  </div>
</template>

<script>
const SearchForm = () => import('_c/SearchForm')
export default {
  components: {
    'search-form': SearchForm
  },
  data() {
    return {
      formList: [
        {
          name: 'name',
          type: 'el-input',
          value: '',
          placeholder: '请输入姓名'
        },
        {
          name: 'age',
          type: 'el-select',
          value: '',
          placeholder: '请输入岁数',
          children: {
            type: 'el-option',
            list: [{
              value: '选项1',
              label: '黄金糕',
              title: '黄金糕'
            },
            {
              value: '选项2',
              label: '黄金糕2',
              title: '黄金糕2'
            }]
          }
        },
        {
          name: 'time',
          type: 'el-date-picker',
          //指定单个表单的宽度，如果不写，则会取上面的search-width,如果search-width也没有给，则是会取默认宽度180
          width: 450	
        }
      ],
      pageApi: {
        Index: 1,
        PageSize: 10
      }
    }
  },
  methods: {
    initChange(date) {
      // 全并查询条件
      this.pageApi = Object.assign(this.pageApi, date)
      console.log(this.pageApi)
    }
  }
}
</script>

Copy the code