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的严格语法
五、运行效果成功展示
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/85582.html
