基于vue-cli3+typescript的tsx開發(fā)模板搭建過程分享
更新時間：2020年02月28日 09:11:17 作者：曉曉曉
這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開發(fā)模板,本文通過實例代碼截圖的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
項目創(chuàng)建
使用 vue-cli3+ 創(chuàng)建一個基于 ts 的模板：
vue-tsx-support
上一步中已經(jīng)創(chuàng)建完了基于 ts 的 vue 模板，但是開發(fā)方式還是如同之前的 template 一樣，只是將 script 中的 js 部分改成了 ts 來書寫。接下來就將 模板(template) 方式改成 tsx 的方式，這里需要借助一個庫 -- vue-tsx-support
首先安裝 vue-tsx-support ：
npm install vue-tsx-support --save # or yarn add vue-tsx-support
安裝結束后，我們需要對我們的文件做點小改動，首先我們在主入口文件 main.ts 中引入：
npm install vue-tsx-support --save # or yarn add vue-tsx-support
然后刪掉 src/shims-tsx.d.ts 文件，避免和 vue-tsx-support/enable-check 聲明重復沖突。
最后在我們的 vue.config.js 文件里的 configureWebpack 屬性下增加一項 resolve ：
// vue.config.js
module.exports = {
// ...
configureWebpack: {
resolve: {
extensions: [".js", ".vue", ".json", ".ts", ".tsx"] // 加入ts 和 tsx
}
}
}
這樣就可以了，接下來就可以開始開發(fā)了。 我們在 /components 下新建一個文件 button.tsx 。然后開始書寫我們 tsx 風格的 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>
)
}
}
這樣我們就完成了一個簡單的tsx組件了。 接下來我們去改寫原來的 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="點我！"></Zbutton>;
}
}
然后運行，能看到以下效果：
就這樣完成了一個簡單的 tsx風格的vue項目 了。
vue mixins
新建 mixins/index.ts ，在 index.ts 中寫一個 vue mixin ：
// mixins/index.ts
import { Vue, Component } from "vue-property-decorator";
// 這里一定要做個聲明 不然在組件里使用的時候會報不存在的錯誤
// 要對應mixin中的屬性和方法
declare module "vue/types/vue" {
interface Vue {
mixinText: string;
showMixinText(): void;
}
}
@Component
export default class MixinTest extends Vue {
public mixinText: string = "我是一個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);
}
// 點擊事件中調用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
新建一個system的module，針對system的store建立各自文件
- state.ts
- getter.ts
- mutation-type.ts
- mutation.ts
- action.ts
編寫一個簡單的例子，在vuex中存儲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);
}
然后建立一個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
}
});
接著我們去組件 button.tsx 中使用：
// components/button/button.tsx
import { Component, Prop } from "vue-property-decorator";
import * as tsc from "vue-tsx-support";
// 引入store命名空間 方便使用某個模塊
import { namespace } from "vuex-class";
// 通過namespace(module name)的方式使用某個模塊的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);
// 點擊調用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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue3?使用setup語法糖實現(xiàn)分類管理,本次模塊使用 vue3+element-plus 實現(xiàn)一個新聞站的后臺分類管理模塊，其中新增、編輯采用對話框方式公用一個表單，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue.js路由管理器 Vue Router，主要介紹的是路由元信息，命名路由以及嵌套路由等使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
Vue3+vuedraggable實現(xiàn)動態(tài)配置頁面
這篇文章主要為大家詳細介紹了Vue3如何利用vuedraggable實現(xiàn)動態(tài)配置頁面,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的可以參考一下2023-12-12
vue使用neovis操作neo4j圖形數(shù)據(jù)庫及優(yōu)缺點
這篇文章主要介紹了vue使用neovis操作neo4j圖形數(shù)據(jù)庫,本文給大家介紹了與常規(guī)做法的優(yōu)缺點對比及使用技巧，對vue?neo4j圖形數(shù)據(jù)庫相關知識感興趣的朋友一起看看吧2022-02-02
本文主要介紹了vue3的內置組件匯總,詳細的介紹了Fragment,Teleport,Suspense三個組件的使用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
用戶可以多文件上傳 ,在上傳到服務器之前需要檢查服務器中有無重名的文件,如果有會返回重名文件的名稱數(shù)組,這些文件需要一個一個的向用戶確認是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了如何基于Vue實現(xiàn)簡單的消息提示功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
淺析vue-router jquery和params傳參(接收參數(shù))$router $route的區(qū)別
今天做項目時踩到了vue-router傳參的坑（jquery和params），所以決定總結一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了vue實現(xiàn)2048小游戲功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue如何比較字符串變化并高亮變化的部分問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12