解決開發(fā)中經(jīng)常使用的ref, computed等需要頻繁引入的問題

1. 插件

unplugin-auto-import：auto import api for vite，webpack，rollup and esbuild。官網(wǎng)

// import { computed, ref } from 'vue'  不再需要
const count = ref(0)
const doubled = computed(() => count.value * 2)

unplugin-vue-components: auto import for vue，支持按需引入各類vue的組件庫、自定義組件 官網(wǎng)

<template>
  <div>
   <!-- 組件可直接使用 -->
   <a-input v-model:value="name" />
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
const name = ref('')  // ref可直接使用
</script>

2. 自動引入組件庫

如ant design vue，使用時無需import

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [AntDesignVueResolver()], // api
    }),
    Components({
      resolvers: [AntDesignVueResolver()], // 組件
    }),
  ],
})

3. 自動導(dǎo)入components下的組件

// vite.config.js
 Components({
        // 指定組件所在位置，默認(rèn)為 src/components?？墒÷?        // 使用自己定義組件的時候免去 import 的麻煩
        // path可以使用通配符，'!' 表示排除條件
        dirs: ['src/components/**/index.vue', 'src/pages/**/!(index.vue)/'],
        // 配置需要將哪些后綴類型的文件進(jìn)行自動按需引入，'vue'為默認(rèn)值。可省略
        extensions: ['vue'],
        // 解析組件，這里以 AntDesignVue 為例，不同的組件需要不同的resolver
        resolvers: [AntDesignVueResolver()],
        // 生成components.d.ts, 可省略
        // components.d.ts是代碼中用到的組件的聲明文件，默認(rèn)在根目錄，也可指定文件路徑。 默認(rèn)為true，可省略。
        dts: true,  // boolean | string
        // 遍歷子目錄?？墒÷?        deep: true
      }),

dts：true 或者為 'src/components.d.ts'時，則會自動生成components.d.ts文件
components.d.ts：**.d.ts為全局聲明文件，包含了按需導(dǎo)入的組件的聲明。內(nèi)容：

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    // ant-design-vue的組件
    AButton: typeof import('ant-design-vue/es')['Button']
    ASelect: typeof import('ant-design-vue/es')['Select']
    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
    // vue-router的組件
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    // components目錄下的自定義組件
    Svgicon: typeof import('./src/components/svgicon/index.vue')['default']
  }
}

4 自動導(dǎo)入api

AutoImport可自動導(dǎo)入指定的api

AutoImport({
   // 自動導(dǎo)入vue相關(guān)的Api
   imports: [
       'vue',   // 導(dǎo)入內(nèi)置的所有api
       'vue-router',
       'pinia',
       '@vueuse/core',
       {
            'vue-router': ['createRouter'],     // 導(dǎo)入指定的api
            /* 自定義模塊 */
            '@/hooks/api.ts': ['defineApi'],    // 導(dǎo)入指定文件下的指定api
            '@/api/index.ts': [['*', 'api']],        // 導(dǎo)入指定文件下的api，并重命名
            '@/store/index.ts': [['*', 'store']], 
       }
     ],
     include: [/\.[tj]sx?$/, /\.vue$/], // 匹配的文件，也就是哪些后綴的文件需要自動引入
     // 生成auto-import.d.ts聲明文件
     dts: 'src/auto-import.d.ts',
     resolvers: [AntDesignVueResolver()]
   }),

做了以上聲明后，使用時無需手動引入

<script setup lang="ts">
// 可直接使用
const userApi = api.user
const userStore = store.user
const name = ref()
</script>

auto-imports.d.ts列出按需自動導(dǎo)入的api的聲明

export {}
declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
  const api: typeof import('@/api/index')
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const createPinia: typeof import('pinia')['createPinia']
  const customRef: typeof import('vue')['customRef']
  ...
}
// for type re-export
declare global {
  // @ts-ignore
  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
}

5 校驗(yàn)

如果出現(xiàn)undef的提示，可嘗試

• 確?！痑uto-import.d.ts‘ 在tsconfig.json的include之內(nèi)
• eslint里配置

// vite.config.js
AutoImport({
    eslintrc: {
      enabled: false, // 若沒此json文件，先開啟，生成后在關(guān)閉
      filepath: './.eslintrc-auto-import.json', // 設(shè)置eslintrc-auto-import.json生成路徑 Default `./.eslintrc-auto-import.json`
      globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
   })

// .eslintrc.js
extends: [ ...
  ./.eslintrc-auto-import.json
]

• 在d.ts中定義的聲明，在ts文件正常，但.vue中提示未定義
  在.eslintrc.js中禁用 no-undef: 'off'， ts已經(jīng)做了undef的校驗(yàn)，不再需要eslint
• vue的template中自動導(dǎo)入的api無法識別
  需要在ts代碼中引入

<template>
  {{ store.user.name }}  // 報錯 store == undefined
 {{ userStore.name }}  // 需在ts里調(diào)用
</template>
<script setup lang="ts">
const userStore = store.user
</script>