1. Component encapsulation

Try to package independent functions into a component with a small granularity to facilitate reuse of other components.

Component definition

Vue components are developed in TypeScript and use vue-property-decorator to define components in class-style form, as shown in the following example code

Decorator: github.com/kaorun343/v…

import {Vue, Component, Prop, Watch} from 'vue-property-decorator'

@Component
export default class ComponentName extends Vue {
    @Prop({type: Number})
    protectedpropA! :number | undefined

    @Watch('propA')
    propAChange(val: string.oldVal: string) :void{}}Copy the code

Similarly, to support Vuex type definition, use vuex-class in Vue components for decorator use as follows:

Vuex-class Official document: github.com/ktsn/vuex-c…

import {Vue, Component} from 'vue-property-decorator'
import {State, namespace} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export default class ComponentName extends Vue {
    @State(state= > state.bar) 
    protectedstateBar! :string

    @someModule.State(state= > state.foo) 
    protectedstateFoo! :number
}
Copy the code

Relevant reference

Vue TypeScript Handbook

Component development specifications

When registering components, use all PascalCase formats

import PageSleepConfirm from './PageSleepConfirm.vue'
Copy the code
  • The component file name, import reference name, and class name defined by the component must be the same
  • The image associated with the component is placed in the current directoryimagesdirectory
  • Common components are placed in the Components directory, and business components are placed in the parent component directory based on the nearest rule
  • When declaring prop, it should always be named camelCase, and kebab-case should always be used in templates
  • Prop definitions should be as detailed as possible: 1. 2. Provide the default value or specify itrequired

Methods naming conventions

  • The camel name camelCase
  • Event response methods use verb + noun +Handle or verb +Handle, such as clickImageHandle and logoutHandle
  • The Watch method uses “on+ variable name +Changed” as onVisibleChanged
  • FetchXXXData is used when a data request method invokes the Services method, for example, fetchUserListData. Loading state changes must be added to the data request method, and error handling is recommended
  • The event response method, Watch method declaration type isprotected
  • The event response method, Watch method, and data request method do not return data in principle
import {Vue, Component, Watch} from 'vue-property-decorator'

@Component
export default class ComponentName extends Vue {
    protected loading = false;

    protected created():void {
        this.fetchUserListData();
    }

    public openDialog():boolean{}private async fetchUserListData():void {
        this.loading = true;
        try {
            this.list = await service.getUserList()
        } finally {
            this.loading = false; }}protected clickImageHandle():void{}@Watch('visible')
    protected onVisibleChanged(value:boolean) :void{}}Copy the code
  • Note: Try to start with common words (set, get, go, can, has, is)

Ps: Common verbs used in function methods

Get get /set Settings, add add /remove delete create create /destory Remove start Start /stop Stop Open Open /close Close, Read Read /write Write Load load /save save create create /destroy destroy begin Start end backup backup /restore restore Import import /export Export Split /merge inject /extract, attach /detach /separate, view /browse edit /modify Select select /mark copy copy /paste paste undo undo /redo redo insert insert /delete remove add add /append add clean clean /clear Clear, Increase /decrease play play play launch /pause launch compile compile execute Debug debug /trace trace observe /listen Build /publish input /output Encode /decode Encrypt /decrypt compress /decompress Pack Pack /unpack Parse /emit generate connect /disconnect/send /receive Download /upload Update /revert/lock /unlock check out /check in Submit /commit push /pull expand /collapse begin /end, start /finish Enter /exit Abort discard /quit Leave obsolete /depreciate discard, collect /aggregateCopy the code