基于vue-cli3+typescript的tsx开发模板搭建过程分享


Posted in Javascript onFebruary 28, 2020

项目创建

使用 vue-cli3+ 创建一个基于 ts 的模板:

基于vue-cli3+typescript的tsx开发模板搭建过程分享

vue-tsx-support

上一步中已经创建完了基于 tsvue 模板,但是开发方式还是如同之前的 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
 }
 }
}

这样就可以了,接下来就可以开始开发了。 我们在 /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>;
 }
}

然后运行,能看到以下效果:

基于vue-cli3+typescript的tsx开发模板搭建过程分享

就这样完成了一个简单的 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

vuexts 改造主要有两种方案,一种是基于 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,还在想更优的一种方式。

Ps: 头一次写文章,难免有点紧张,如果问题,欢迎讨论。感谢~

最终的template在这里

总结

到此这篇关于搭建基于vue-cli3+typescript的tsx开发模板的文章就介绍到这了,更多相关vue typescript模板内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
js格式化时间的简单实例
Nov 27 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
React实现轮播效果
Aug 25 Javascript
vue 中的 render 函数作用详解
Feb 28 #Javascript
微信小程序动态添加和删除组件的现实
Feb 28 #Javascript
浅析Vue 中的 render 函数
Feb 28 #Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 #Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 #Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 #Javascript
You might like
php判断ip黑名单程序代码实例
2014/02/24 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python3简单实现微信爬虫
2015/04/09 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
运动会开幕式主持词
2014/03/28 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
高二语文教学反思
2016/02/16 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript