使用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>
浏览器报错:
在这里搞了几个小时,后面发现是加了 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; }
在第四步出现这个错误不影响允许,看错误提示是因为不符合ESLint规范,我也不知道怎么改。
但是这看着就很不舒服,可以把ESLint检测关闭(按一下步骤操作就行)
这就舒服多了
成功展示。
到此这篇关于使用Elemen加上lang=“ts“后编译报错的文章就介绍到这了,更多相关Elemen lang=“ts“报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue装饰器中的vue-property-decorator 和 vux-class使用详解
这篇文章主要介绍了Vue装饰器中的vue-property-decorator 和 vux-class使用详解,通过示例代码给大家介绍的非常详细,对vue-property-decorator 和 vux-class的使用感兴趣的朋友一起看看吧2022-08-08vue静态配置文件不进行编译的处理过程(在public中引入js)
这篇文章主要介绍了vue静态配置文件不进行编译的处理过程(在public中引入js),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03详解在vue-cli中使用graphql即vue-apollo的用法
这篇文章主要介绍了详解在vue-cli中使用graphql即vue-apollo的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论