使用vue-tsx-support+vue-property-decorator实现class和decorator风格的vue代码

Vue+TypeScript+tsx+CSSModule主要依赖和版本：vue@2.6.12vuex@3.0.1vue-router@3.1.3vue-class-component@7.2.6vue-property-decorator@9.0.2vue-tsx-support@3.0.2环境配置1.确保安装yarn，nodejs12+，@vue/cli4.xyarnglobaladd@vue/cliyarnglobaladdtypescript2。使用脚手架创建vue项目vuecreatecd3.安装核心依赖在package.json的devDependencies中添加：{//..."devDependencies":{//..."vue-class-component":"^7.2.6","vue-property-decorator":"^9.0.2","vue-tsx-support":"^3.0.2","typescript":"~3.5.3","@vue/cli-plugin-typescript":"^4.0.0"}//...}4.项目编译相关==重要==配置4.1在项目根目录添加vue.config.js文件，配置：module.exports={css:{requireModuleExtension:true,loaderOptions:{//全局less变量less:{prependData:`@import"@/assets/style/var.less";`}}},configureWebpack:{resolve:{extensions:[".js",".vue",".json",".ts",".tsx"]//添加ts和tsx},},devServer:{port:5212}};4.2项目根目录添加tsconfig.json{"compilerOptions":{"typeRoots":["node_modules/@types"],"target":"esnext","module"：“esnext”，“strict”：true，“jsx”：“preserve”，“jsxFactory”：“VueTsxSupport”，“importHelpers”：true，“moduleResolution”：“node”，“experimentalDecorators”：true，“esModuleInterop”:true,"allowSyntheticDefaultImports":true,"sourceMap":true,"baseUrl":".","types":["webpack-env","jest"],"paths":{"@/*":["src/*"]},"lib":["esnext","dom","dom.iterable","scripthost"]},"include":["node_modules/vue-tsx-support/enable-check.d.ts","src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],"exclude":[]}4.3项目根目录.eslintrc.jsmodule.exports={root:true,env:{node:true},'extends':['插件：vue/essential','eslint:recommended','@vue/typescript'],rules:{'no-console':process.env.NODE_ENV==='production'?'error':'off','no-debugger':process.env.NODE_ENV==='production'？'error':'off'},parserOptions:{parser:'@typescript-eslint/parser'},overrides:[{files:['**/__tests__/*.{j,t}s?(x)','**/tests/unit/**/*.spec.{j,t}s?(x)']}]}4.4其他配置（可选）src添加shims-tsx.d.ts文件到目录//你可以使用cssmoduledeclaremodule'*.less'{constcontent:any;exportdefaultcontent;}将shims-vue.d.ts文件添加到src目录//没有vue文件了所以这不是太必要declaremodule'*.vue'{importVuefrom'vue'exportdefaultVue}如何使用cssmodule：在页面或组件目录下添加index.module.less，在tsx文件中引入：button.tsx:import{Component}from'vue-property-decorator'import*astsxfrom'vue-tsx-support'importcssModulefrom'./index.module.less'exportenumButtonType{default='default',primary='primary'}exportinterfaceIButtonProps{type?:ButtonType;}@Componentexport默认类Buttonextendstsx.Component{@Prop()publictype!:ButtonType;protectedrender(){return({this.type&&

type:{this.type}