本文主要介紹了使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

部分代碼：

<template>
  <el-input v-model="input" placeholder="Please input" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

瀏覽器報(bào)錯(cuò)：

在這里搞了幾個(gè)小時(shí)，后面發(fā)現(xiàn)是加了 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放在項(xiàng)目根目錄

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

4. 在src根目錄下新建vue-shim.d.ts 這個(gè)文件可以讓vue識(shí)別ts文件（不加會(huì)報(bào)錯(cuò)）

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

在第四步出現(xiàn)這個(gè)錯(cuò)誤不影響允許，看錯(cuò)誤提示是因?yàn)椴环螮SLint規(guī)范，我也不知道怎么改。

但是這看著就很不舒服，可以把ESLint檢測(cè)關(guān)閉（按一下步驟操作就行）

這就舒服多了

成功展示。

到此這篇關(guān)于使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)的文章就介紹到這了,更多相關(guān)Elemen lang=“ts“報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: