基于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 相关文章推荐
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 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访问查询mysql数据的三种方法
2006/10/09 PHP
PHP新手上路(八)
2006/10/09 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php类常量用法实例分析
2015/07/09 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue-cli 首屏加载优化问题
2018/11/06 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
优秀老师事迹材料
2014/02/05 职场文书
2016新年致辞
2015/08/01 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python