vue3插件json2ts

分享一些vue3+ts项目的插件(持续更新)

vscode 插件 json2ts

这个插件主要是为了让我们更高效的开发，具体请往下看

• 这个插件快捷键可能会跟其他插件的快捷键冲突，建议修改一下

使用方法

• 在控制台把打印的需要定义类型数据，复制一下obj

• 然后在ts文件里面直接使用快捷键，就会把对应类型定义好再粘贴出来

注意点 –> 就是复制的根对象名默认是RootObject，记得要改名

Vite 插件 script setup name

说明：一款能让 script setup 添加组件名 name 的插件。

插件地址：github.com/vbenjs/vite…

在我们使用script setup的时候，在控制台devtools调试的时候，很多组件都是Index，比较麻烦找到对应组件

像vue2我们可以加个name属性，就可以展示对应组件名

export default {
  name:'Home',
};

但是在vue3中setup语法糖中没有地方加这个name属性，所以这个时候可以用到插件

• 安装插件

yarn add vite-plugin-vue-setup-extend -D

• 配置插件：vite.config.ts

import vueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    vueSetupExtend()
  ],
})

• 配置后在script标签上加个name属性就可以了

  <script setup lang="ts" name="Home">
    const a = 1
  </script>

<template>
  <div>hello world {{ a }}</div>
</template>

OK，结束！