您好,登錄后才能下訂單哦!
項(xiàng)目創(chuàng)建
使用 vue-cli3+
創(chuàng)建一個(gè)基于 ts
的模板:
vue-tsx-support
上一步中已經(jīng)創(chuàng)建完了基于 ts
的 vue
模板,但是開發(fā)方式還是如同之前的 template
一樣,只是將 script
中的 js
部分改成了 ts
來書寫。接下來就將 模板(template) 方式改成 tsx 的方式,這里需要借助一個(gè)庫 -- vue-tsx-support
首先安裝 vue-tsx-support
:
npm install vue-tsx-support --save # or yarn add vue-tsx-support
安裝結(jié)束后,我們需要對(duì)我們的文件做點(diǎn)小改動(dòng),首先我們?cè)谥魅肟谖募?main.ts
中引入:
npm install vue-tsx-support --save # or yarn add vue-tsx-support
然后刪掉 src/shims-tsx.d.ts
文件,避免和 vue-tsx-support/enable-check
聲明重復(fù)沖突。
最后在我們的 vue.config.js
文件里的 configureWebpack
屬性下增加一項(xiàng) resolve
:
// vue.config.js module.exports = { // ... configureWebpack: { resolve: { extensions: [".js", ".vue", ".json", ".ts", ".tsx"] // 加入ts 和 tsx } } }
這樣就可以了,接下來就可以開始開發(fā)了。 我們?cè)?/components
下新建一個(gè)文件 button.tsx
。然后開始書寫我們 tsx
風(fēng)格的 vue
代碼:
// 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> ) } }
這樣我們就完成了一個(gè)簡單的tsx組件了。 接下來我們?nèi)ジ膶懺瓉淼?Home.vue
變成 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> { protected render() { return <Zbutton text="點(diǎn)我!"></Zbutton>; } }
然后運(yùn)行,能看到以下效果:
就這樣完成了一個(gè)簡單的 tsx風(fēng)格的vue項(xiàng)目 了。
vue mixins
新建 mixins/index.ts
,在 index.ts
中寫一個(gè) vue mixin
:
// mixins/index.ts import { Vue, Component } from "vue-property-decorator"; // 這里一定要做個(gè)聲明 不然在組件里使用的時(shí)候會(huì)報(bào)不存在的錯(cuò)誤 // 要對(duì)應(yīng)mixin中的屬性和方法 declare module "vue/types/vue" { interface Vue { mixinText: string; showMixinText(): void; } } @Component export default class MixinTest extends Vue { public mixinText: string = "我是一個(gè)mixin"; public showMixinText() { console.log(this.mixinText); } }
然后在 component/button/button.tsx
中使用:
// 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; } // 在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); } // 點(diǎn)擊事件中調(diào)用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 #or yarn add vuex-class
新建一個(gè)system的module,針對(duì)system的store建立各自文件
編寫一個(gè)簡單的例子,在vuex中存儲(chǔ)user信息:
// store/modules/system/state.ts interface SystemState { user: Object } const state: SystemState = { user: {} } export default state;
// 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;
// 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;
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); }
然后建立一個(gè)system的入口文件 index.ts 將這些外拋出去:
// 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 };
最后在store的入口文件處引用該module:
// 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 } });
接著我們?nèi)ソM件 button.tsx
中使用:
// components/button/button.tsx import { Component, Prop } from "vue-property-decorator"; import * as tsc from "vue-tsx-support"; // 引入store命名空間 方便使用某個(gè)模塊 import { namespace } from "vuex-class"; // 通過namespace(module name)的方式使用某個(gè)模塊的store const systemStore = namespace("system"); @Component export 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); // 點(diǎn)擊調(diào)用store的action方式存儲(chǔ)user信息 // 而state中的user信息會(huì)同步 可通過vue-tools查看 this.cacheUser({ name: "張三", phone: "13333333333" }); } // 點(diǎn)擊事件中調(diào)用mixin的方法 protected render() { return ( <div> <button onClick={() => this.btnClick()}>{this.text}</button> </div> ); } }
Tips: 基于typescript的vuex,還在想更優(yōu)的一種方式。
Ps: 頭一次寫文章,難免有點(diǎn)緊張,如果問題,歡迎討論。感謝~
最終的template在這里
總結(jié)
到此這篇關(guān)于搭建基于vue-cli3+typescript的tsx開發(fā)模板的文章就介紹到這了,更多相關(guān)vue typescript模板內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。