Vue + TypeScript + tsx + CSS Module
次要的依赖包以及版本：
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、nodejs 12+ 、@vue/cli4.x
yarn global add @vue/cliyarn global add typescript2. 应用脚手架创立vue我的项目
vue create <project-name>cd <project-name>3. 装置外围依赖
在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.js
module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin: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文件
// 能够应用cssmoduledeclare module '*.less' { const content: any; export default content;}src目录增加shims-vue.d.ts文件
// 曾经没有vue文件了所以这个也不太须要declare module '*.vue' { import Vue from 'vue' export default Vue}cssmodule应用办法：
页面或组件目录下增加index.module.less，tsx文件里引入：
button.tsx:
import { Component } from 'vue-property-decorator'import * as tsx from 'vue-tsx-support'import cssModule from './index.module.less'export enum ButtonType { default = 'default', primary = 'primary'}export interface IButtonProps { type?: ButtonType;}@Componentexport default class Button extends tsx.Component<IButtonProps> { @Prop() public type!: ButtonType; protected render() { return ( <div class={cssModule.button}> { this.type && <p>type: {this.type}</p> } </div> ) }}