vite 自动导入组件 api

<meta charset="utf-8">

解决开发中经常使用的ref, computed等需要频繁引入的问题

1. 插件

unplugin-auto-import：auto import api for vite，webpack，rollup and esbuild。官网

// import { computed, ref } from 'vue'  不再需要
const ruleForm = reactive({
  password: null,
  account: null,
  code: null,
  key: null
})
const codeValids = ref(false)
const codeKey = ref(null)

unplugin-vue-components: auto import for vue，支持按需引入各类vue的组件库、自定义组件 官网

vite 配置项

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 plugins: [
      vue(),
      AutoImport({
        resolvers: [ElementPlusResolver()], // api
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
          /\.md$/, // .md
        ],
          // global imports to register
        imports: [
          // presets
          'vue',
          'vue-router',
          'pinia',
          {
            '@vueuse/core': [
              // named imports
              'useMouse', // import { useMouse } from '@vueuse/core',
              // alias
              ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
            ],
            'axios': [
              // default imports
              ['default', 'axios'], // import { default as axios } from 'axios',
            ],
            // 自定义导入
            'vue-router': ['createRouter'],     // 导入指定的api
            '@/api/index.ts': [['*', 'api']],        // 导入指定文件下的api，并重命名
            '@/stores/index.ts': [['*', 'store']], 
            '@/plugins/require/index.ts':[['require','require']]
          },
          {
            from: 'vue-router',
            imports: ['RouteRecordRaw'],
            type: true,
          },
        ],
        // 生成auto-import.d.ts声明文件
        dts: 'types/auto-import.d.ts',
        // Array of strings of regexes that contains imports meant to be filtered out.
        ignore: [
          'useMouse',
          'useFetch'
        ],
        eslintrc:{
          enabled:false
        }

      }),
      Components({
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        resolvers: [
          ElementPlusResolver(),
        ],
        // dirs: ['src/components/**/index.vue', 'src/pages/**/!(index.vue)/'],
        dirs:['src/components'],
        extensions: ['vue'],
        dts: 'types/components.d.ts', 
        // 遍历子目录。可省略
        deep: true
      })
    ],