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