Directory resolution:

. | - browserslistrc # browserslistrc configuration file (used to support Autoprefixer) | -. Eslintrc. Js # eslint configuration. | - gitignore | - Babel. Config. | js # Babel - loader configuration -- package - lock. Json | -- package. Json # package. The json rely on | -- postcss. Config. Js # | | postcss configuration -- the README. Md -- tsconfig. Json # typescript configuration | -- vue. Config. Js # # vue - cli configuration | - public static resources (which can be directly copied) | | -- the favicon. Ico # favicon icon | | - index. The HTML # HTML templates | -- SRC | | - App. Vue # entry page | | -- main. Ts file # entry Load component initialization etc. | | - Shims - TSX. Which s | | - shims - vue. Which s | | - assets # theme fonts and other static resources (by webpack processing load) | | - # components global components | | - the router # routing | | - store # global vuex store | | - global style styles # | | | - views # all page - tests # testCopy the code

Tsconfig. json, shims-tx. D. ts, shims-vue.d.ts

  • tsconfig.json: typescript configuration files that specify files to compile and define compilation options
  • shims-tsx.d.ts: allows.tsx ending files to write JSX code in Vue projects
  • shims-vue.d.ts: is used to recognize TypeScript. Vue files. Ts does not support importing vue files by default

Several libraries that are useful for using typescript in Vue:

  • Vue-class-component: Vue-class-component is a class Decorator, that is, a class Decorator

  • vue-property-decorator: Import {vue, Component, Inject, Provide, Prop, Model, vue {vue, Component, Inject, Provide, Prop, Model, vue} import {vue, Component, Inject, Provide, Prop, Model, vue Watch, Emit, Mixins } from ‘vue-property-decorator’

  • vuex-module-decorators: Import {Module, VuexModule, Mutation, Action, MutationAction, getModule } from ‘vuex-module-decorators’

Component declarations

The way to create a component becomes the following

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

@Component
export default class Test extends Vue {

}
Copy the code

The data object

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

@Component
export default class Test extends Vue {
  private name: string;
}
Copy the code

Prop the statement

@Prop({ default: false }) private isCollapse! : boolean; @Prop({ default: true }) private isFirstLevel! : boolean; @Prop({ default: "" }) private basePath! : string;Copy the code

  • ! : must exist,? : Indicates that it may not exist. These two are syntactically called assignment assertions

  • @Prop(options: (PropOptions | Constructor[] | Constructor) = {})

  • PropOptions, you can use the following options: Type, default, Required, validator

  • Constructor[], specifying the optional types of prop

  • Constructor, e.g. String, Number, Boolean, etc., specifying the type of prop

method

Declare a method in a method object

public clickFunc(): void {
  console.log(this.name)
  console.log(this.msg)
}
Copy the code

Watch Listening property

@Watch("$route", { immediate: true }) private onRouteChange(route: Route) { const query = route.query as Dictionary<string>; if (query) { this.redirect = query.redirect; this.otherQuery = this.getOtherQuery(query); }}Copy the code

  • @Watch(path: string, options: WatchOptions = {})

  • Options contains two attributes immediate? : Boolean Whether to call the callback function/deep immediately after listening starts? : Boolean Specifies whether the callback function is called when the properties of the object being listened on are changed

  • @Watch(‘arr’, { immediate: true, deep: true }) onArrChanged(newValue: number[], oldValue: number[]) {}

Computed properties

public get allname() {
  return 'computed ' + this.name;
}
Copy the code

Allname is the computed value and name is the listened value

vuex

Before using the Store decorator, let’s take a look at the traditional store usage

export default  {
    namespaced:true,
    state:{
        foo:""
    },
    getters:{
        getFoo(state){ return state.foo}
    },
    mutations:{
        setFooSync(state,payload){
            state.foo = payload
        }
    },
    actions:{
        setFoo({commit},payload){
            commot("getFoo",payload)
        }
    }
}
Copy the code

Then start using vuex-module-decorators

import {
  VuexModule,
  Mutation,
  Action,
  getModule,
  Module
} from "vuex-module-decorators";
Copy the code

  • Export Default Class TestModule extends VuexModule {} VuexModule provides some basic attributes. Includes namespaced, state, getters, modules, mutations, the actions, the context

  • The @module tag is currently Module @module ({dynamic: true, store, name: “Settings”}) class Settings extends VuexModule implements ISettingsState {} Module itself has several properties that can be configured:

  • Namespaced: Boolean Enable/disable modules

  • StateFactory: Boolean indicates the stateFactory

  • Dynamic: Boolean Add to store after store is created. The following properties must be provided when Dynamic is enabled

  • Name :string Specifies the module name

  • Store: vuex. store The entity provides the initial store

  • // set user name this.name = name; // set user name this.name = name; }

  • @action public Async Login(userInfo: {username: string; Password: string}) {// let {username, password} = userInfo; username = username.trim(); const { data } = await login({ username, password }); setToken(data.accessToken); this.SET_TOKEN(data.accessToken); }

  • GetModule gets a type-safe store. Module must provide the name attribute export const UserModule = getModule(User);