基于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 装载iframe子页面,自适应高度
Mar 20 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
js图片轮播插件的封装
Jul 21 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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,js双版本
2012/09/25 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript数组组合成字符串的脚本
2021/01/06 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
javascript计时器详解
2015/02/28 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
python实现文件快照加密保护的方法
2015/06/30 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python3远程监控程序的实现方法
2019/07/15 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
出国留学介绍信
2014/01/13 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书