Liaoyi

外观

本页目录

Vue使用Tsx语法 ​

相关资料

各种配置报错问题 ​

WARNING

每次修改配置后,需要重新启动 vscode

导入 module.css | scss 报错 ​

项目创建 typed-css.d.ts 文件

ts
declare module '*.module.css' {
  const classes: { readonly [key: string]: string }
  export default classes
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string }
  export default classes
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string }
  export default classes
}

将其配置到tsconfig.json

json
{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Node",
    "target": "ESNext",
    "jsx": "preserve", //就是这个参数
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  },
  "exclude": ["node_modules", "**/node_modules/*"],
  "include": ["src", "docs", "typed-css.d.ts"]
}

VSCode 报错 ReferenceError: React is not defined ​

安装并配置 @vitejs/plugin-vue-jsx 插件

ts
// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx' // 添加这一句

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(), // 添加这一句
  ],
})

修改tsconfig.json文件

json
{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Node",
    "target": "ESNext",
    "jsx": "preserve", //就是这个参数
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}