Vue：使用Element Plus ＜script lang=“ts“ setup＞ 加上lang=“ts“后编译错误

最新推荐文章于 2024-05-26 10:32:56 发布
最新推荐文章于 2024-05-26 10:32:56 发布
阅读量1.1k 收藏 3
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyyyyyyyyyy_9/article/details/132313350
版权

小白使用element plus的时候，将官网代码直接复制到编译器出现错误，检查问题之后发现，问题出在这里<script lang=“ts” setup>，element plus 不支持lang="ts"语法。

问题如下,

Module parse failed: The keyword "interface' is reserved (2:0)

截图如下所示，

在这里插入图片描述

经过查资料，发现了一下解决方法，特此记录一下。

  • 首先安装 typescript ts-loader，
npm install -D typescript ts-loader
  • 然后，照着这个教程，就可以解决。

https://blog.csdn.net/qq_61672548/article/details/125506231

_乐多_
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-loader加载不上问题
虔诚带着决然
08-27 7726
前言：webpack 整合vue 的时候，遇到了一个大坑，找了好多资料才弄好 我们知道 webpack - - -默认 无法解析 .vue 为后缀的文件，所有webpack需要下载一个解析 .vue 文件的 loader 下载 vue-loader 的方法有许多 ，我是 使用 vue-loader 是要依赖 vue 的，所以先下载 vue npm i vue -S cnpm i v...
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的文件位置决定的，我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次这个版本的vue.js才导致这样的。但是引入是没有任何问题的。 Vue、js版本这个是根据个人的需要来选择的，不是唯一的。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）
小程序引入外部组件后报loader和ts语法问题的处理
LittleMoon_lyy的博客
07-16 2333
小程序引入外部组件后报loader和ts语法问题的处理
vue3 使用＜script lang=“ts“ setup＞编译错误
最新发布
Violetto_Yan的博客
05-26 251
2、在src根目录新建一个tsconfig.json。3、在src根目录建vue-shim.d.ts文件。1、下载typescript和ts-loader。
uniapp vue3 setup下写interface报错：Parsing error: The keyword ‘interface‘ is reserved
liuyaofu7456的博客
11-10 2593
解决办法是添加 vue-eslint-parser 解析器，修改.eslintrc文件。
vue3的script lang=‘ts‘ setup或者script setup
热门推荐
weixin_44727080的博客
02-08 2万+
前言： vue3中提供了单文件组件 script setup ，这里来分享总结下他的用法。 官方入口：点我 一、基本语法：默认js方法里面都是setup方法内部方法 1、普通版 <script setup> // 变量 const msg = 'Hello!' // 函数 function log() { console.log(msg) } </script> 2、ts版本 <script lang="ts" setup> //...
vue3.2中setup语法糖＜script lang=“ts“ setup＞
南北极之间
06-12 8837
​ 官方网站： |维.js (vuejs.org) https://vuejs.org/api/sfc-script-setup.html 是一种编译时语法糖，用于在单文件组件 （SFC） 中使用组合 API。如果同时使用 SFC 和组合 API，则这是建议的语法。与正常语法相比，它提供了许多优点： 更简洁的代码，更少的样板 能够使用纯 TypeScript 声明 props 和发出的事件 更.........
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
HTML-引入Vue3和Element Plus
04-24
<script src="libs/element-plus/dist/index.js"></script> ``` 这将引入Element Plus的CSS样式文件和JavaScript库，确保所有组件样式和功能可以正常工作。 然后，在HTML中创建一个Vue实例，并挂载到页面元素上。...
vue-form-generator:vue3 + ts + element-plus表单生成器
04-10
Vue Form Generator是一款基于Vue.js的库，特别针对Vue 3、TypeScript以及Element Plus组件库设计的动态表单生成器。这个工具允许开发者通过JSON schema快速构建复杂的表单，极大地提高了开发效率，减少了手动编写...
vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装 上手即用
08-19
vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装 上手即用
Eslint：Parsing error: The keyword ‘interface‘ is reserved
qq_42566295的博客
08-18 5784
Parsing error: The keyword 'interface' is reserved
vue3 使用Element Plus ＜script lang=“ts“ setup＞加上lang=“ts“后编译错误
weixin_46411355的博客
09-18 5811
vue3 使用Element Plus
vue3 使用＜script lang=“ts“ setup＞加上lang=“ts“后编译错误
m0_53912016的博客
12-19 1769
【代码】vue3 使用＜script lang=“ts“ setup＞加上lang=“ts“后编译错误。
基于vite中＜script lang=‘ts‘ setup＞＜/script＞使用
MM_520131400的博客
10-20 3297
1. 发展历程 > ##### 注意多个script使用时 lang的值要一致 - **方法二：**unplugin-vue-define-options插件 第一步：安装，安装的方式很常规，就是npm的安装 ```javascript npm install unplugin-vue-define-options -D 第二步：集成，找到vite.config.ts文件，加入插件unplugin-vue-define-options import { defineConfig } f
学习script setup 语法糖
STATICHIT静砸的博客
03-14 6698
defineEmit ----> [子组件向父组件事件传递]使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。代码示列配置项的缺失，有时候我们需要更改组件选项，在setup中我们目前是无法做到的。我们需要在上方再引入一个script，在上方写入对应的export即可，需要单开一个 script。可以和普通的一起使用。普通的无法在声明的选项，例如或通过插件启用的自定义的选项。声明命名导出。
＜script lang=“ts“ setup＞使用setup语法糖引入组件爆红问题
m0_67391401的博客
03-10 1846
未使用setup语法糖前注册组件： <script lang ="ts"> import { defineComponent, ref, reactive } from "vue"; import AddPoints from './addPoints.vue' export default defineComponent({ components: { AddPoints, }, }) </script> 使用setup语法糖注册组件： <script l
Vue3.2 中的 setup 语法糖
qq_36668399的博客
07-19 1367
Vue3.2 中的 setup 语法糖
el-cascader动态加载回显 vue3 ts <script lang="ts" setup> 写法
06-09
如果你正在使用 Vue 3 并且使用 `<script lang="ts" setup>` 写法，你可以按照以下步骤实现 el-cascader 的动态加载回显： 1. 在 `<script setup>` 中声明需要用到的变量和函数，包括选项数据、默认选中的值、加载选项数据的函数和选项改变的事件处理函数。 ```html <script lang="ts" setup> import { ref } from 'vue'; import { CascaderNode, CascaderOption } from 'element-plus/lib/el-cascader'; const selectedOptions = ref<number[]>([1, 2, 3]); const options = ref<CascaderOption[]>([]); const loadOptions = async (selectedOptions: CascaderNode[], parentNode: CascaderNode | null): Promise<CascaderOption[]> => { // 根据 parentNode.value 从后端获取对应级别的选项数据，并添加到 selectedOptions 中 // 返回一个 Promise 对象，表示异步加载完成后的选项数据数组 }; const handleCascaderChange = (selectedOptions: number[]) => { // 根据当前选中的值，动态加载下一级别的选项数据 // 并更新绑定的 v-model 数据 }; </script> ``` 2. 在模板中使用 el-cascader 组件，并绑定相关的属性和事件。 ```html <template> <el-cascader v-model="selectedOptions" :options="options" :lazy="true" :lazy-load="loadOptions" @change="handleCascaderChange" ref="cascader" /> </template> ``` 3. 在组件挂载后，调用组件的 `loadData` 方法加载第一级别的选项数据。 ```html <script lang="ts" setup> import { ref, onMounted } from 'vue'; import { CascaderNode, CascaderOption } from 'element-plus/lib/el-cascader'; const selectedOptions = ref<number[]>([1, 2, 3]); const options = ref<CascaderOption[]>([]); const loadOptions = async (selectedOptions: CascaderNode[], parentNode: CascaderNode | null): Promise<CascaderOption[]> => { // 根据 parentNode.value 从后端获取对应级别的选项数据，并添加到 selectedOptions 中 // 返回一个 Promise 对象，表示异步加载完成后的选项数据数组 }; const handleCascaderChange = (selectedOptions: number[]) => { // 根据当前选中的值，动态加载下一级别的选项数据 // 并更新绑定的 v-model 数据 }; onMounted(() => { // 加载第一级别的选项数据 (this.$refs.cascader as any).loadData(); }); </script> ``` 完整的代码示例如下： ```html <template> <el-cascader v-model="selectedOptions" :options="options" :lazy="true" :lazy-load="loadOptions" @change="handleCascaderChange" ref="cascader" /> </template> <script lang="ts" setup> import { ref, onMounted } from 'vue'; import { CascaderNode, CascaderOption } from 'element-plus/lib/el-cascader'; const selectedOptions = ref<number[]>([1, 2, 3]); const options = ref<CascaderOption[]>([]); const loadOptions = async (selectedOptions: CascaderNode[], parentNode: CascaderNode | null): Promise<CascaderOption[]> => { // 根据 parentNode.value 从后端获取对应级别的选项数据，并添加到 selectedOptions 中 // 返回一个 Promise 对象，表示异步加载完成后的选项数据数组 }; const handleCascaderChange = (selectedOptions: number[]) => { // 根据当前选中的值，动态加载下一级别的选项数据 // 并更新绑定的 v-model 数据 }; onMounted(() => { // 加载第一级别的选项数据 (this.$refs.cascader as any).loadData(); }); </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值