Project creation

Create a TS based template using vue-cli3+ :



vue-tsx-support

You created the TS-based Vue template in the previous step, but you developed it just as you did with template, changing the js part of the script to TS. The next step is to change the template mode to THE TSX mode, using a library called VUe-tsX-support


First install vuE-TSX-support:

npm install vue-tsx-support --save
# or
yarn add vue-tsx-support 
Copy the code

After the installation is complete, we need to make some small changes to our file. First we introduce the following changes to the main entry file:

// main.ts
import "vue-tsx-support/enable-check";Copy the code

Then delete the SRC/shims-txs. D. ts file to avoid duplicate conflicts with vue-txs -support/enable-check.

Finally, add resolve under the configureWebpack property in our vue.config.js file:

// vue.config.js

module.exports = {
  // ...
  configureWebpack: {
    resolve: {
      extensions: [".js".".vue".".json".".ts".".tsx"] // Add ts and TSX}}}Copy the code

That’s it, and we’re ready to start development. Let’s create a new file under /components, button.tsx. Then start writing our TSX-style VUE code:

// components/button/button.tsx import { Component, Prop } from "vue-property-decorator"; import * as tsc from "vue-tsx-support"; interface ButtonClick { (value: string): void } interface ButtonProps { text: string; btnClick? : ButtonClick } @Component export default class ZButton extends tsc.Component<ButtonProps> { @Prop() text! : string; public btnClick(value: string): void { console.log("value is: ", value); } protected render() { return ( <div> <button onClick={() => this.btnClick("click")}>{this.text}</button> </div> ) } }Copy the code

Now we have a simple TSX component. We’ll rewrite home.vue to home.tsx:

// views/Home.tsx import { Component, Vue } from "vue-property-decorator"; import { Component as tsc } from "vue-tsx-support"; import ZButton from "@/components/button/button.tsx"; @component export default class HomeContainer extends TSC <Vue> {return <Zbutton text=" " ></Zbutton>; }}Copy the code


Run it and see the following:



This completes a simple TSX-style VUE project.

vue mixins

Create a new mixins/index.ts and create a vue mixin in index.ts:

// mixins/index.ts
import { Vue, Component } from "vue-property-decorator";

// It is necessary to make a declaration here, otherwise it will report a non-existent error when used in the component
// Correspond to properties and methods in mixins
declare module "vue/types/vue" {
  interface Vue {
    mixinText: string;
    showMixinText(): void; }}@Component
export default class MixinTest extends Vue {
  public mixinText: string = "I'm a mixin";

  public showMixinText() {
    console.log(this.mixinText); }}Copy the code

Then at the component/button/button. The benchmark used in:

// component/button/button.tsx import { Component, Prop } from "vue-property-decorator"; import * as tsc from "vue-tsx-support"; import MixinTest from "@/mixins"; interface ButtonClick { (value: string): void; } interface ButtonProps { text: string; btnClick? : ButtonClick; } // Inject mixin@ Component({mixins: [MixinTest] }) export default class ZButton extends tsc.Component<ButtonProps> { @Prop() text! : string; public btnClick(value: string): void { console.log("value is: ", value); Protected render() {return (<div> <button onClick={() =>) this.showMixinText()}>{this.text}</button> </div> ); }}Copy the code

vuex

There are two main ways to modify VUex ts, one based on vuex-class and the other based on vue-module-decorators. I’m using vuex-class here.

Install vuex – class:

npm install vue-class --save
#or
yarn add vuex-classCopy the code


Create a new system module and create a file for the system store

  • state.ts
  • getter.ts

  • mutation-type.ts
  • mutation.ts
  • action.ts

Write a simple example to store user information in VUEX:

// store/modules/system/state.ts

interface SystemState {
  user: Object
}

const state: SystemState = {
  user: {}
}

export default state;Copy the code

// store/modules/system/mutation-type.ts
interface SystemMutationType {
  SET_USER_INFO: String;
}

const Mutation_Type: SystemMutationType = {
  SET_USER_INFO: "SET_USER_INFO"
}

export default Mutation_Type;Copy the code

// store/modules/system/mutation.ts
import type from "./mutation-type";

const mutation: any= {[type.SET_USER_INFO as string](state: SystemState, user: Object) { state.user = user; }}export default mutation;Copy the code

import type from "./mutation-type";
import { Commit } from "vuex";

export const cacheUser = (context: { commit: Commit }, user: Object) = > {
  context.commit(type.SET_USER_INFO as string, user);
}Copy the code

Then create a system entry file called index.ts to throw these out:

// store/modules/system/index.ts
import state from "./state";
import mutations from "./mutation";
import * as actions from "./action";
import * as getters from "./getter";

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};Copy the code

Finally, reference the module in the store entry file:

// store/index.ts
import Vue from "vue";
import Vuex from "vuex";
import system from "./modules/system";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    system
  }
});Copy the code

Next we go to the component button.tsx and use:

// components/button/button.tsx import { Component, Prop } from "vue-property-decorator"; import * as tsc from "vue-tsx-support"; Import {namespace} from "vuex-class"; import {namespace} from "vuex-class"; // Use a module's store as a namespace(module name) const systemStore = namespace("system"); @Component export default class ZButton extends tsc.Component<ButtonProps> { @Prop() text! : string; // store uses state and action for other getters and mutation types @systemStore. state ("user") user! : Object; @systemStore.Action("cacheUser") cacheUser: any; public btnClick(value: string): void { console.log("value is: ", value); CacheUser ({name: "zhang SAN ", phone: "133333333"}); // cacheUser({name: "Zhang SAN ", phone: "13333333333"}); // cacheUser({name:" Zhang SAN ", phone: "13333333333"}); Protected render() {return (<div> <button onClick={() => this.btnclick ()}>{this.text}</button> </div> ); }}Copy the code

Tips: Typescript-based Vuex, still thinking of a better way.


Ps: The first time to write an article, it is inevitable that a little nervous, if any questions, welcome to discuss. Thank you ~


The final template is here