2020年使用Typescript欢快的撸Vue

vue create ts-vue-prac

image.png
image.png

  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.1",
    "vue-router": "^3.1.6",
    "vuex": "^3.1.3",
    "vuex-class": "^0.3.2",# yarn add vuex-class
    "vuex-module-decorators": "^0.17.0" # yarn add vuex-module-decorators
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-router": "~4.3.0",
    "@vue/cli-plugin-typescript": "~4.3.0",
    "@vue/cli-plugin-vuex": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "typescript": "~3.8.3",
    "vue-template-compiler": "^2.6.11"
  }

vue.config.js

module.exports = {
  lintOnSave: false,

  pluginOptions: {
    express: {
      shouldServeApp: true,
      serverDir: "./srv",
    },
  },

  transpileDependencies: ["vuex-module-decorators"],
};

image.png

HelloWorld.vue

<template>
  <div>
    <p>text:{{text}}</p>
    <p>UPPER TEXT:{{textUpper}}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
  private text: string = "hello";
  get textUpper(): string {
    return this.text.toUpperCase();
  }
}
</script>
 

About.tsx

import { Component, Vue } from "vue-property-decorator";

@Component
class About extends Vue {
  private text: string = "About!";

  get textUpper(): string {
    return this.text.toUpperCase();
  }

  changeText(newText: string): void {
    this.text = newText;
  }

  render(h: Vue.CreateElement): Vue.VNode {
    return (
      <div>
        text by tsx: {this.text} <br />
        TEXT BY TSX: {this.textUpper} <br />
        <input
          on-input={(e: any) => this.changeText(e.target.value)}
          value={this.text}
          type="text"
        />
      </div>
    );
  }
}

export default About;

Store.vue

<template>
  <div>
    <p>text from store:{{text}}</p>
    <p>TEXT FROM STORE:{{textUpper}}</p>
    <input type="text" @input="changeText" :value="text" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { namespace } from "vuex-class";
const FooModule = namespace("Foo");

@Component
export default class Store extends Vue {
  @FooModule.State
  private text!: string;
  @FooModule.Getter
  private textUpper!: string;
  @FooModule.Mutation
  private setText!: (newText: string) => void;
  changeText(e: any): void {
    this.setText(e.target.value);
  }
}
</script>
 

Store/foo.ts

import { VuexModule, Module, Mutation, Action } from "vuex-module-decorators";

@Module({
  namespaced: true,
})
class Foo extends VuexModule {
  public text: string = "store text";
  @Mutation
  setText(newText: string) {
    this.text = newText;
  }
  get textUpper(): string {
    return this.text.toUpperCase();
  }
}

export default Foo;

store/index.ts

import Vue from "vue";
import Vuex, { Store } from "vuex";
import Foo from "./foo";

Vue.use(Vuex);

export default new Store({
  modules: {
    Foo,
  },
});

gitee: https://gitee.com/MonoDev/vue-ts-prac.git