Vue 神仙插件：解放双手🙌🏻

前言

最近在工作上发现了几个神仙插件，故推荐给大家，使用后会有以下几点优势：

unplugin-vue-components：

1. 避免重复引入 src/components 文件内的组件
2. 避免组件全局注册带来的性能消耗

unplugin-auto-import：

1. 避免重复引入 APIs

unplugin-vue-components

该插件可实现自动引入 src/components 文件夹内部的组件，实例：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

使用该插件后将自动转换为：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

使用方法

参考：

1. unplugin-vue-components
2. Element Plus 按需引入

unplugin-auto-import

该插件可以自动帮我们引入 ref、watch 等 APIs

未使用前：

import { computed, ref } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

使用后：

const count = ref(0)
const doubled = computed(() => count.value * 2)

使用方法

参考：

1. unplugin-auto-import
2. Element Plus 按需引入

需要进行部分配置：link

配置之后，需要 npm run dev 之后才会更新 auto-imports.d.ts 文件

如果出现 ts 提示错误，可参考：unplugin-auto-import typescript，将 auto-imports.d.ts 加入 ts 配置文件内。如果没生效，可关闭编辑器再打开。