VUE3.0关于vscode保存时script标签上写的setup自动消失的问题

最新推荐文章于 2024-07-16 17:45:46 发布
最新推荐文章于 2024-07-16 17:45:46 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： vue3.0 文章标签： vscode 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/harleypear/article/details/125508877
版权

VSCode Vue3 script setup 保存问题 格式化插件
关键词由CSDN通过智能技术生成

VUE3.0关于vscode保存时script标签上写的setup自动消失的问题

最近换了vscode写代码，结果在保存的时候，写在script标签上的setup自动丢失了，怀疑是某个格式化插件导致的，排查了一下之后发现是这个：
在这里插入图片描述
禁用掉之后上述问题就解决了，但是具体原因是什么没去探究。这个插件还挺好用的，就此弃用有点可惜。如果有大佬发现真正原因和解决办法欢迎交流。

HarleyPear
关注
专栏目录
Vue3.0实现todolist
ll666888999的博客
03-31 1642
项目准备 Vue3.0环境搭建 1、官网安装node，进入node.js官网安装长期支持版 打开终端输入：node -v 如果出现node版本号，表明安装成功 安装node自带npm,包管理工具 输入npm -v 出现npm的版本号 2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v 会出现一系列版本号，说明安装成功 3、安装vue环境：cnpm i -g vue @vue/cli 输入vue -
vue3 中的script setup
m0_67401606的博客
03-06 4293
script setup <script setup>是 Vue3 新出的语法糖，类型是Vue的Git RFC中的建议。需要明确的是，这并不是要完全替代任何当前写法。其目的是为开发人员提供更简洁的语法，简化使用Composition API时冗长的模板代码，以编写其单个文件组件。 在不使用 <script setup>, 我们代码是： <template> <h1 v-text="count"></h1> <p v-text=
Vue3 - setup script
IT界中的一枝梅的博客
10-20 803
前言 Vue3其中比较大的一个特性就是setup方法，可以让我们非常直观和方便的组合我们的业务逻辑和hooks。在setup里面返回的变量可以直接在template里面使用。大多数情况下，我们的大部分逻辑都集中在setup方法里面，所以官方提供了一个实验性的写法，直接在script里面写setup的内容，即：setup script。 使用 我们之前的组件可能是这样的： <template> <div class="flex items-center justify-center h-
(vue)保存代码后表格数据及页码丢失
nyf_unknow的博客
08-19 212
方法：给表格数据和页码增加监听。
vscode 保存 去除自动格式化（配置不自动保存 还保存）
最新发布
weixin_44019706的博客
07-16 322
2、settings.json配置了 “editor.formatOnSave”: false 也不行。（因为这个这个工作区有问题，所以复制出一个新的工作区2.0，一个插件一个插件的禁用得以发现）保存突然自动格式化，就上一分钟和下一分钟的时间，很离谱。1、这里没有勾选，勾上再勾掉也不行。
VS Code 终端光标消失问题
weixin_44066534的博客
07-27 3859
VSCode终端光标消失
vue cli3.0代码格式化
写点什么好
07-01 815
方法1：关闭掉代码检查 找到.eslintrc.js文件 extends: [ 'plugin:vue/essential', '@vue/standard'//注释掉，就不会代码检查问题了 ], 方法2：在vscode中的格式化代码配中加入自己代码的样式 先声明：这个方法也是网上找的，但不记得是谁写的了，抱歉了。 步骤有点繁琐，我就直接放截图了。 点击文件，找到首选项，点击设置。 点击第一个，进入settings.json文件。 复制下面代码 { // vscode默认启
vue3.0，国内前端框架的迭代的趋势
Lin_25937的博客
11-05 1059
vue3.0 前端工程师必了解的框架之一
Vue3.0 全面探索 - 基于 Visual Studio Code 的代码片段开发插件
Wscats
12-04 2087
Vue3 Snippets for Visual Studio Code Vue3 Snippets, This extension adds Vue3 Code Snippets into Visual Studio Code. Snippets / 代码片段 Including most of the API of Vue3. You can type reactive, choose rea...
vue3.0+ts 实现简易的盒子拖拽并记录位置
bad985664的博客
04-26 615
代码如下： template部分： <template> <div class="box" ref="box" :style="{top:y+'px',left:x+'px'}"></div> </template> script部分： <script setup lang="ts"> import { ref, onMounted, onBeforeMount } from "vue" const box = ref<HTMLDiv
vue3无法使用语法糖setup
weixin_48927323的博客
06-06 824
卸载这个东西安装
vue组件下面的dom消失
yuru974882032的博客
08-15 851
使用组件时必须有结束标签 <remark-input th:value="${entity?.remark}"/>//有些时候会干扰到该标签下面的dom <remark-input th:value="${entity?.remark}"></remark-input>//需要改成这样
【Vue3.0】- 2 setup函数
YhWyl527的博客
11-24 825
1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 　　 2、setup函数是 CompositionAPI（组合API）的入口 　　 3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用** 注意点： 1、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用.
vscode自动保存
热门推荐
雾隐雾现的至渝博客
12-25 2万+
        最近在做一个网页，发现每次修改都要 ctrl+s 保存一遍，我这个懒人不想手都按痛，所以就想着有没有自动保存 方法1 文件----单击自动保存，点完后自动保存前面有一个勾 方法2 文件----首选项------设置------输入autosave ...
解决vsCode格式化vue代码的问题
zhiyikeji的博客
03-05 1545
1.首先安装两个必要的插件: eslint Vetur 2.配置 eslint,按如下步骤打开配置文件: 文件-&amp;gt;首选项-&amp;gt;设置，在搜索设置中输入 eslint,如图: 点击图中红色勾选的按钮之后,来到下图所示的位置: 点击红色勾选的设置: 进行如下设置: { &quot;workbench.iconTheme&quot;: &quot;material-icon-theme&quot;, &quot;w
vscode 快速生成 Vue2、vue3(setup函数)、vue3(setup语法糖)模板
放弃不难，但坚持一定很酷！
04-28 770
vscode 快速生成 Vue2、vue3(setup函数)、vue3(setup语法糖)模板
vscode vue文件 script标签不高亮显示
qq_45600228的博客
07-07 455
vscode vue文件 script标签不高亮显示
vue3 setup语法糖请注意在script标签里加setup，不用return
qq_54753561的博客
10-29 1万+
虽然Composition API用起来已经非常方便了，但是我们还是有很烦的地方，比如 组件引入了还要注册 属性和方法都要在setup函数中返回，有的时候仅一个return就十几行甚至几十行 不想写啊怎么办 好办，Vue3官方提供了script setup语法糖 只需要在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，甚至export default都不用写了，不仅是数据，计算属性和方法，甚至是自定义指令也可以在我们的te
vue3.0中script标签添加setup ，生命周期该怎样写？
06-06
在Vue 3.0中，使用`<script setup>`标签来编写组件的逻辑。`<script setup>`标签是Vue 3.0中的新特性，它可以更好地支持组合式 API，并且可以自动地将组件的 props、data、computed、methods等等都声明为响应式的变量。 在`<script setup>`标签中，不需要再像Vue 2.x中那样定义生命周期函数，而是使用特定的API来实现相同的功能。以下是Vue 3.0中常用的生命周期函数及其对应的API： - `beforeCreate`: 可以使用`onBeforeMount`函数来代替 - `created`: 可以使用`onMounted`函数来代替 - `beforeMount`: 可以使用`onBeforeMount`函数来代替 - `mounted`: 可以使用`onMounted`函数来代替 - `beforeUpdate`: 可以使用`onBeforeUpdate`函数来代替 - `updated`: 可以使用`onUpdated`函数来代替 - `beforeUnmount`: 可以使用`onBeforeUnmount`函数来代替 - `unmounted`: 可以使用`onUnmounted`函数来代替 例如，如果要在组件挂载之前执行某些逻辑，可以使用`onBeforeMount`函数，例如： ```vue <template> <div>{{ message }}</div> </template> <script setup> import { ref, onBeforeMount } from 'vue' const message = ref('Hello, world!') onBeforeMount(() => { console.log('组件即将挂载') }) </script> ``` 这样，在组件挂载之前会输出一条日志。 当然，在Vue 3.0中还有其他的API可以用来实现更精细化的控制，例如`onActivated`、`onDeactivated`、`onErrorCaptured`等等。具体可以参考官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值