3.0已经很久没有发布release版本了。现阶段，在Vue项目中使用Typescript，需要在项目配置上下一番功夫。主要工作是webpack对TS和TSX的处理，以及2.x版本下以类的形式编写Vue组件的一些限制和注意事项。webpackconfiguration配置webpack对TS和TSX的支持，方便我们在Vue项目中使用Typescript和tsx。module.exports={entry:'./index.vue',output:{filename:'bundle.js'},resolve:{extensions:['.ts','.tsx','.vue','.vuex']},模块:{规则:[{test:/\.vue$/,loader:'vue-loader',options:{loaders:{ts:'ts-loader',tsx:'babel-loader!ts-loader',}}},{test:/\.ts$/,loader:'ts-loader',options:{appendTsSuffixTo:[/TS\.vue$/]}},{test:/\.tsx$/,loader:'babel-loader!ts-loader',options:{appendTsxSuffixTo:[/TSX\.vue$/]}}]}}在上面的配置中，会使用vue文件中的ts内容ts-loader处理，TSX内容会按照ts-loader-->babel-loader的顺序进行处理。appendTsSuffixTo/appendTsxSuffixTo配置项的意思是将脚本中从vue文件中分离出来的ts、tsx（取决于）内容加上ts或tsx作为后缀，然后就是由ts-loader解析。看了ts-loader上关于appendTsxSuffixTo的讨论，发现ts-loader好像对文件后缀名的限制很严格，必须是ts/tsx后缀，所以必须在vue-loader中的内容之后extract的部分），请参考官网tsx基本使用在vue2.x中，使用class编写vue组件需要依赖vue-property-decorator来转换vueclass。导出的class是Vue.extend之后的VueComponent函数（理论上class是一个Function）。最后的结果就像我们使用Vue.extend来扩展一个Vue组件。//创建构造函数varProfile=Vue.extend({template:'
{{firstName}}{{lastName}}aka{{alias}}
',data:function(){return{firstName:'Walter',lastName:'White',alias:'Heisenberg'}}})exportdefault{components:{Profile}}注意上面的Profile组件不是我们平时写的Vue组件，它是一个普通对象配置对象，它实际上是一个VueComponent函数。父组件在实例化子组件时，会extend传入的vue对象，使用Vux.extend将其转化为组件函数。如果组件中的值本身是一个函数，则省略此步骤。这个从vue源码可以看出来。if(isObject(Ctor)){Ctor=baseCtor.extend(Ctor)}上面的Ctor是components中传入的组件，对应上面导出的Profile组件。使用vuex使用vuex-class中的装饰器来注解类的属性。从'vue'导入Vue从'vue-class-component'导入组件MyCompextendsVue{@State('foo')stateFoo@State(state=>state.bar)stateBar@Getter('foo')getterFoo@Action('foo')actionFoo@Mutation('foo')mutationFoo@someModule.Getter('foo')moduleGetterFoo//如果省略参数，则使用属性名称//为每个状态/getter/action/mutation类型@Statefoo@Getterbar@Actionbaz@Mutationquxcreated(){this.stateFoo//->store.state.foothis.stateBar//->store.state.barthis.getterFoo//->store.getters.foothis.actionFoo({value:true})//->store.dispatch('foo',{value:true})this.mutationFoo({value:true})//->store.commit('foo',{value:true})this.moduleGetterFoo//->store.getters['path/to/module/foo']}}mixin对于mixin，我们使用类继承来轻松实现类似的功能deploy(){//dosomething}}@ComponentclassIndexextendsDeployMixin{constructor(){super()}sure(){this.deploy()}}VScode中对emmet的jsx快捷键设置支持includeLanguages":{"javascript":"html"}或"emmet.includeLanguages":{"javascript":"javascriptreact"}