vue3 使用Element Plus ＜script lang=“ts“ setup＞加上lang=“ts“后编译错误

vue3 使用Element Plus <script lang=“ts“ setup＞加上lang="ts"后编译错误

一、组件部分代码

<template>
  <el-input v-model="input" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

二、报错信息

结果浏览器报错：

三、报错原因

在这里搞了几个小时，后面发现是加了 lang=ts

四、解决步骤

1.下载typescript和loader

npm install typescript ts-loader --save-dev

2. 配置vue.config.js 添加下面的代码

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

添加好后如下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }
      ]
    }
  }
})

3. 新建tsconfig.json放在项目根目录

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

4. 在src根目录下新建vue-shim.d.ts 这个文件可以让vue识别ts文件（不加会报错）

vue-shim.d.ts

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

在第四步出现这个错误不影响运行，看错误提示是因为不符合ESLint规范，我也不知道怎么改。

但是这看着就很不舒服，可以在IDEA中把ESLint检测关闭（按下一步骤操作就行）

5.禁用IDEA的ESLint的严格语法

五、运行效果成功展示

这篇好文章是转载于：学新通技术网