項目創(chuàng)建

使用 vue-cli3+ 創(chuàng)建一個基于 ts 的模板：

vue-tsx-support

上一步中已經創(chuàng)建完了基于 ts 的 vue 模板，但是開發(fā)方式還是如同之前的 template 一樣，只是將 script 中的 js 部分改成了 ts 來書寫。接下來就將 模板(template) 方式改成 tsx 的方式，這里需要借助一個庫 -- vue-tsx-support

首先安裝 vue-tsx-support ：

npm install vue-tsx-support --save# oryarn add vue-tsx-support

安裝結束后，我們需要對我們的文件做點小改動，首先我們在主入口文件 main.ts 中引入：

npm install vue-tsx-support --save# oryarn add vue-tsx-support

然后刪掉 src/shims-tsx.d.ts 文件，避免和 vue-tsx-support/enable-check 聲明重復沖突。

最后在我們的 vue.config.js 文件里的 configureWebpack 屬性下增加一項 resolve ：

// vue.config.jsmodule.exports = { // ... configureWebpack: { resolve: { extensions: ['.js', '.vue', '.json', '.ts', '.tsx'] // 加入ts 和 tsx } }}

這樣就可以了，接下來就可以開始開發(fā)了。 我們在 /components 下新建一個文件 button.tsx 。然后開始書寫我們 tsx 風格的 vue 代碼：

// components/button/button.tsximport { Component, Prop } from 'vue-property-decorator';import * as tsc from 'vue-tsx-support';interface ButtonClick { (value: string): void}interface ButtonProps { text: string; btnClick?: ButtonClick}@Componentexport 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> ) }}

這樣我們就完成了一個簡單的tsx組件了。 接下來我們去改寫原來的 Home.vue 變成 Home.tsx ：

// views/Home.tsximport { Component, Vue } from 'vue-property-decorator';import { Component as tsc } from 'vue-tsx-support';import ZButton from '@/components/button/button.tsx';@Componentexport default class HomeContainer extends tsc<Vue> { protected render() { return <Zbutton text='點我！'></Zbutton>; }}

然后運行，能看到以下效果：

就這樣完成了一個簡單的 tsx風格的vue項目 了。

vue mixins

新建 mixins/index.ts ，在 index.ts 中寫一個 vue mixin ：

// mixins/index.tsimport { Vue, Component } from 'vue-property-decorator';// 這里一定要做個聲明 不然在組件里使用的時候會報不存在的錯誤// 要對應mixin中的屬性和方法declare module 'vue/types/vue' { interface Vue { mixinText: string; showMixinText(): void; }}@Componentexport default class MixinTest extends Vue { public mixinText: string = '我是一個mixin'; public showMixinText() { console.log(this.mixinText); }}

然后在 component/button/button.tsx 中使用：

// component/button/button.tsximport { 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;}// 在Component裝飾器上注入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); } // 點擊事件中調用mixin的方法 protected render() { return ( <div> <button onClick={() => this.showMixinText()}>{this.text}</button> </div> ); }}

vuex

vuex 的 ts 改造主要有兩種方案，一種是基于 vuex-class 的方式，一種是基于 vue-module-decorators 的方式。 這里我使用的是 vuex-class 。

安裝 vuex-class ：

npm install vue-class --save#oryarn add vuex-class

新建一個system的module，針對system的store建立各自文件

編寫一個簡單的例子，在vuex中存儲user信息：

// store/modules/system/state.tsinterface SystemState { user: Object}const state: SystemState = { user: {}}export default state;

// store/modules/system/mutation-type.tsinterface SystemMutationType { SET_USER_INFO: String;}const Mutation_Type: SystemMutationType = { SET_USER_INFO: 'SET_USER_INFO'}export default Mutation_Type;

// store/modules/system/mutation.tsimport type from './mutation-type';const mutation: any = { [type.SET_USER_INFO as string](state: SystemState, user: Object) { state.user = user; }}export default mutation;

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);}

然后建立一個system的入口文件 index.ts 將這些外拋出去：

// store/modules/system/index.tsimport 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};

最后在store的入口文件處引用該module：

// store/index.tsimport Vue from 'vue';import Vuex from 'vuex';import system from './modules/system';Vue.use(Vuex);export default new Vuex.Store({ modules: { system }});

接著我們去組件 button.tsx 中使用：

// components/button/button.tsximport { Component, Prop } from 'vue-property-decorator';import * as tsc from 'vue-tsx-support';// 引入store命名空間 方便使用某個模塊import { namespace } from 'vuex-class';// 通過namespace(module name)的方式使用某個模塊的storeconst systemStore = namespace('system');@Componentexport default class ZButton extends tsc.Component<ButtonProps> { @Prop() text!: string; // store使用state和action 其他getter和mutation類型 @systemStore.State('user') user!: Object; @systemStore.Action('cacheUser') cacheUser: any; public btnClick(value: string): void { console.log('value is: ', value); // 點擊調用store的action方式存儲user信息 // 而state中的user信息會同步 可通過vue-tools查看 this.cacheUser({ name: '張三', phone: '13333333333' }); } // 點擊事件中調用mixin的方法 protected render() { return ( <div> <button onClick={() => this.btnClick()}>{this.text}</button> </div> ); }}

Tips: 基于typescript的vuex，還在想更優(yōu)的一種方式。

Ps: 頭一次寫文章，難免有點緊張，如果問題，歡迎討論。感謝~

最終的template在這里

總結

到此這篇關于搭建基于vue-cli3+typescript的tsx開發(fā)模板的文章就介紹到這了,更多相關vue typescript模板內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！