Visual Studio Code使用vue3.0的时候因为加了lang=‘ts‘报错

报错原因

这里可能vue默认只支持js，所以在用ts的时候可能会需要一些配置

具体错误

解决办法

1.下载typescript和loader插件

npm install typescript ts-loader --save-dev

2.在项目根目录下添加tsconfig.json文件并粘贴以下代码

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "strict": true,
      "strictNullChecks": true,
      "esModuleInterop": true,
      "experimentalDecorators": true
    }
}

3.在src目录下添加vue-shim.d.ts文件并粘贴以下代码

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
} 

4.修改vue.config.js如果是默认配置没改过的直接粘贴以下代码到文件中

configureWebpack: {    
      resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },    
      module: {        
        rules: [    
          {    
            test: /\.tsx?$/,    
            loader: 'ts-loader',    
            exclude: /node_modules/,    
            options: {
              appendTsSuffixTo: [/\.vue$/],    
            }    
          }        
        ]    
      }    
    }

5.Visual Studio Code也可能需要如下两个扩展插件

6.在其它组件中引入该组件的时候script标签可能也得加上lang="ts"属性