基于vue-cli3+typescript的tsx开发模板搭建过程分享
项目创建
使用vue-cli3+创建一个基于ts的模板：
vue-tsx-support
上一步中已经创建完了基于ts的vue模板，但是开发方式还是如同之前的template一样，只是将script中的js部分改成了ts来书写。接下来就将模板(template)方式改成tsx的方式，这里需要借助一个库--vue-tsx-support
首先安装vue-tsx-support：
npminstallvue-tsx-support--save #or yarnaddvue-tsx-support
安装结束后，我们需要对我们的文件做点小改动，首先我们在主入口文件main.ts中引入：
npminstallvue-tsx-support--save #or yarnaddvue-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*astscfrom"vue-tsx-support";
interfaceButtonClick{
(value:string):void
}
interfaceButtonProps{
text:string;
btnClick?:ButtonClick
}
@Component
exportdefaultclassZButtonextendstsc.Component{
@Prop()text!:string;
publicbtnClick(value:string):void{
console.log("valueis:",value);
}
protectedrender(){
return(
this.btnClick("click")}>{this.text}
)
}
}
这样我们就完成了一个简单的tsx组件了。接下来我们去改写原来的Home.vue变成Home.tsx：
//views/Home.tsx
import{Component,Vue}from"vue-property-decorator";
import{Componentastsc}from"vue-tsx-support";
importZButtonfrom"@/components/button/button.tsx";
@Component
exportdefaultclassHomeContainerextendstsc{
protectedrender(){
return;
}
}
然后运行，能看到以下效果：
就这样完成了一个简单的tsx风格的vue项目了。
vue mixins
新建mixins/index.ts，在index.ts中写一个vuemixin：
//mixins/index.ts
import{Vue,Component}from"vue-property-decorator";
//这里一定要做个声明不然在组件里使用的时候会报不存在的错误
//要对应mixin中的属性和方法
declaremodule"vue/types/vue"{
interfaceVue{
mixinText:string;
showMixinText():void;
}
}
@Component
exportdefaultclassMixinTestextendsVue{
publicmixinText:string="我是一个mixin";
publicshowMixinText(){
console.log(this.mixinText);
}
}
然后在component/button/button.tsx中使用：
//component/button/button.tsx
import{Component,Prop}from"vue-property-decorator";
import*astscfrom"vue-tsx-support";
importMixinTestfrom"@/mixins";
interfaceButtonClick{
(value:string):void;
}
interfaceButtonProps{
text:string;
btnClick?:ButtonClick;
}
//在Component装饰器上注入mixin
@Component({
mixins:[MixinTest]
})
exportdefaultclassZButtonextendstsc.Component{
@Prop()text!:string;
publicbtnClick(value:string):void{
console.log("valueis:",value);
}
//点击事件中调用mixin的方法
protectedrender(){
return(
this.showMixinText()}>{this.text}
);
}
}
vuex
vuex的ts改造主要有两种方案，一种是基于vuex-class的方式，一种是基于vue-module-decorators的方式。这里我使用的是vuex-class。
安装vuex-class：
npminstallvue-class--save #or yarnaddvuex-class
新建一个system的module，针对system的store建立各自文件
- state.ts
- getter.ts
- mutation-type.ts
- mutation.ts
- action.ts
编写一个简单的例子，在vuex中存储user信息：
//store/modules/system/state.ts
interfaceSystemState{
user:Object
}
conststate:SystemState={
user:{}
}
exportdefaultstate;
//store/modules/system/mutation-type.ts
interfaceSystemMutationType{
SET_USER_INFO:String;
}
constMutation_Type:SystemMutationType={
SET_USER_INFO:"SET_USER_INFO"
}
exportdefaultMutation_Type;
//store/modules/system/mutation.ts
importtypefrom"./mutation-type";
constmutation:any={
[type.SET_USER_INFOasstring](state:SystemState,user:Object){
state.user=user;
}
}
exportdefaultmutation;
importtypefrom"./mutation-type";
import{Commit}from"vuex";
exportconstcacheUser=(context:{commit:Commit},user:Object)=>{
context.commit(type.SET_USER_INFOasstring,user);
}
然后建立一个system的入口文件index.ts将这些外抛出去：
//store/modules/system/index.ts
importstatefrom"./state";
importmutationsfrom"./mutation";
import*asactionsfrom"./action";
import*asgettersfrom"./getter";
exportdefault{
namespaced:true,
state,
getters,
mutations,
actions
};
最后在store的入口文件处引用该module：
//store/index.ts
importVuefrom"vue";
importVuexfrom"vuex";
importsystemfrom"./modules/system";
Vue.use(Vuex);
exportdefaultnewVuex.Store({
modules:{
system
}
});
接着我们去组件button.tsx中使用：
//components/button/button.tsx
import{Component,Prop}from"vue-property-decorator";
import*astscfrom"vue-tsx-support";
//引入store命名空间方便使用某个模块
import{namespace}from"vuex-class";
//通过namespace(modulename)的方式使用某个模块的store
constsystemStore=namespace("system");
@Component
exportdefaultclassZButtonextendstsc.Component{
@Prop()text!:string;
//store使用state和action其他getter和mutation类型
@systemStore.State("user")user!:Object;
@systemStore.Action("cacheUser")cacheUser:any;
publicbtnClick(value:string):void{
console.log("valueis:",value);
//点击调用store的action方式存储user信息
//而state中的user信息会同步可通过vue-tools查看
this.cacheUser({name:"张三",phone:"13333333333"});
}
//点击事件中调用mixin的方法
protectedrender(){
return(
this.btnClick()}>{this.text}
);
}
}
Tips:基于typescript的vuex，还在想更优的一种方式。
Ps:头一次写文章，难免有点紧张，如果问题，欢迎讨论。感谢~
最终的template在这里
总结
到此这篇关于搭建基于vue-cli3+typescript的tsx开发模板的文章就介绍到这了,更多相关vuetypescript模板内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。