使用Elemen加上lang=“ts“后編譯報錯
更新時間：2023年04月28日 10:29:03 作者：NoBug.
本文主要介紹了使用Elemen加上lang=“ts“后編譯報錯，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
部分代碼：
<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放在項目根目錄
{
? ? "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)這個錯誤不影響允許，看錯誤提示是因為不符合ESLint規(guī)范，我也不知道怎么改。
但是這看著就很不舒服，可以把ESLint檢測關閉（按一下步驟操作就行）
這就舒服多了
成功展示。
到此這篇關于使用Elemen加上lang=“ts“后編譯報錯的文章就介紹到這了,更多相關Elemen lang=“ts“報錯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來實現(xiàn)路由跳轉,下面這篇文章主要給大家介紹了關于Vue實現(xiàn)路由跳轉的3種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
vue 如何添加全局函數(shù)或全局變量以及單頁面的title設置總結
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁面的title設置總結，非常具有實用價值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了基于mpvue的簡單彈窗組件mptoast使用詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了Vue使用echarts散點圖在區(qū)域內標點，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue3.0中的monorepo管理模式的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了vue2.0 如何在hash模式下實現(xiàn)微信分享,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家介紹了Vue與VueComponent的關系，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實例
這篇文章主要介紹了Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了手把手帶你封裝一個vue component第三方庫，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
這篇文章主要介紹了在Vue 中使用Typescript的示例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09