🔓 unplugin-vue-setup-extend-plus库TS报错问题

前言 📝

大家需要先有一个自己的github账号，并且要简单熟悉一下vue的语法。

github账号申请：https://github.com/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home

vue3官网：https://cn.vuejs.org/guide/introduction.html

过年那段时间，博主闲来无事想写一个vue3的项目玩一玩。在写vue3项目的时候，找到了一个给组件命名的工具库==unplugin-vue-setup-extend-plus==。简单介绍一下如何使用：

找到vite.config.ts文件

// name->setup
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
export default defineConfig({
  plugins: [
    vueSetupExtend({
      enableAutoExpose: true
    }),
  ],
})

找到main.ts文件

1	import autoExpose from 'unplugin-vue-setup-extend-plus/dist/client/index'

使用

1
2
3

<script setup lang="ts" name="HomeView">

</script>

但是，就是第二步引入文件的时候官方奖励了我一个大大的红色波浪线。

提示的很明显了，就是我们没有导入对应的ts声明类型。

小编刚开始怎么解决的问题呢？

我是在自己的本地项目中，把他node_moduls下面的类型声明导入进来了。

找到项目中的ts配置文件

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],
  "exclude": ["src/**/__tests__/*", "node_modules"],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      // 这是找到了node_modules下面unplugin-vue-setup-extend-plus工具库打包之后生成的ts声明文件
      "unplugin-vue-setup-extend-plus/*": ["node_modules/unplugin-vue-setup-extend-plus/*"]
    }
  }
}