(前端)vue3提升工作效率的好用插件

工欲善其事，必先利其器

Vue函数自动引入工具(unplugin-auto-import)

相信各位使用Vue3的前端开发都遇到过这种问题
频繁的引入ref、reactive、watch

这样写下去，重复的引入，感觉非常枯燥，且没有意义。

unplugin-auto-import的出现就非常好的解决了这个问题
接下来，让我们来看看如何使用它吧

安装

npm install unplugin-auto-import -D

在Vite内引入

// vite.config.js
import AutoImport from "unplugin-auto-import/vite";
// plugins内加入AutoImport
plugins: [ AutoImport({
    include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
      /\.vue$/, /\.vue\?vue/], // .vue,
    imports: [
      "vue",
    ]
}),

如上配置后，我们再去Vue内看看效果
这是没有使用AutoImport的Vue
当我们直接使用时，它会报这个错误，页面上什么也没有显示

这是使用了AutoImport的vue

我们可以看到，即使没有引入ref和reactive，页面上也显示出内容了，同时，控制台也没有报错了
unplugin-auto-import的好用之处不仅仅只有这点，同时，还有vue-router，pinia等等。除了vite之外，还支持webpack,rollup,vue/cli等等。如果感兴趣的同学可以去npm搜索它，来解锁它的更多使用方式。

Vue组件的自动引入(unplugin-vue-components)

这个东西跟上面的unplugin-auto-import功能很像，不过，它是专门为组件服务的，让我们不必在main.js内引入在用use挂载到vue上

安装

npm i unplugin-vue-components -D

在vite.config.js内引入

// vite.config.js
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
// plugins内加入Components
 Components({
    resolvers: [
    	// 安装ElementPlus后使用
      ElementPlusResolver()
    ],
    dts: "./src/@types/unplugin-vue-components"
  })

这样，我们在vue内可以尽情使用组件了
它可以引入的组件如下

同时，还可以配置自己本地目录下的组件。只需要配置dirs:[]。
使用后，它并不影响treeshaking。绝对是前端开发必备的良品插件。
感兴趣的同学可以去npm搜索unplugin-vue-components查看它的详细用法。

下期，我们来推荐一下VScode内好用的插件

好了，今天的推荐就到这里了。祝各位前端开发天天都能摸大鱼

本篇博客由yy编写
遇到Bug需要帮助，
欢迎加wx：
xmzl1988
备注"csdn博客“
温馨提示此为有偿服务;