使用Elemen加上lang=“ts“后編譯報錯
更新時間：2023年04月28日 10:29:03 作者：NoBug.
本文主要介紹了使用Elemen加上lang=“ts“后編譯報錯，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(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>瀏覽器報錯：
在這里搞了幾個小時，后面發(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 這個文件可以讓vue識別ts文件（不加會報錯）
declare module "*.vue" {
? ? import Vue from "vue";
? ? export default Vue;
} ?在第四步出現(xiàn)這個錯誤不影響允許，看錯誤提示是因?yàn)椴环螮SLint規(guī)范，我也不知道怎么改。
但是這看著就很不舒服，可以把ESLint檢測關(guān)閉（按一下步驟操作就行）
這就舒服多了
成功展示。
到此這篇關(guān)于使用Elemen加上lang=“ts“后編譯報錯的文章就介紹到這了,更多相關(guān)Elemen lang=“ts“報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
自定義指令是?Vue.js?中一個強(qiáng)大的特性,它允許您擴(kuò)展?Vue?的模板語法,本文將詳細(xì)介紹?Vue?3?中的自定義指令,包括如何創(chuàng)建它們以及如何將它們應(yīng)用于您的應(yīng)用程序,需要的可以參考下2023-11-11
本篇文章主要介紹了淺談Vue 初始化性能優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
淺談VueUse中useAsyncState的實(shí)現(xiàn)原理
useAsyncState?是 VueUse 庫中提供的一個實(shí)用工具,它用于處理異步狀態(tài),本文主要介紹了VueUse中useAsyncState的實(shí)現(xiàn)及其原理,具有一定的參考價值,感興趣的可以了解一下2024-08-08
VUE+ElementUI下載文件的幾種方式(小結(jié))
本文主要介紹了VUE+ElementUI下載文件的幾種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue實(shí)現(xiàn)廣告欄上下滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
vue實(shí)現(xiàn)組件通信的八種方法實(shí)例
ue是數(shù)據(jù)驅(qū)動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)組件通信的八種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
vue中formdata傳值給后臺時參數(shù)為空的問題
這篇文章主要介紹了vue中formdata傳值給后臺時參數(shù)為空的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue中@click綁定多個事件問題(教你避坑),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue處理循環(huán)數(shù)據(jù)流程示例精講
這篇文章主要介紹了Vue處理循環(huán)數(shù)據(jù)流程，這個又是一個編程語言，?模版語法里面必不可少的一個，?也是使用業(yè)務(wù)場景使用最多的一個環(huán)節(jié)。所以學(xué)會使用循環(huán)也是重中之重了2023-04-04
本文主要介紹了vue?el-pagination分頁查詢封裝的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06