基于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引用对象的方法
Jan 11 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
JS实现图片切换效果
Nov 17 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
多个Vue项目部署到服务器的步骤记录
Oct 22 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
幼儿园家长评语
2014/02/10 职场文书
入党政审材料范文
2014/12/24 职场文书
升职自荐信范文
2015/03/27 职场文书
学生会任命书范本
2015/09/21 职场文书