基于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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue组件三大核心概念图文详解
May 30 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 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数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python continue语句用法实例
2014/03/11 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
Python自动抢红包教程详解
2019/06/11 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
公务员转正鉴定材料
2014/02/11 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
2014年科技工作总结
2014/11/26 职场文书
作文评语集锦
2014/12/25 职场文书
信用卡催款律师函
2015/05/27 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android