vue3.x 减少import使用

vue3.x 减少import使用

大家在写vue时，各种api的导入比如ref,reactive还有生命周期函数等，还有类似element-plus导入等重复无聊的操作，下面介绍个插件，减少import

npm install -D unplugin-vue-components unplugin-auto-import

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
    plugins: [
        vue(),
        cesium(),
        AutoImport({
            resolvers: [ElementPlusResolver()], 
            imports: ['vue', 'vue-router'],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        })
    ]
})

unplugin-auto-import 配置

{
    // targets to transform
    include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/, /\.vue\?vue/, // .vue
        /\.md$/, // .md
    ],

    // global imports to register
    imports: [
        // presets
        'vue',
        'vue-router',
        // custom
        {
            '@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',
            ],
            '[package-name]': [
                '[import-names]',
                // alias
                ['[from]', '[alias]'],
            ],
        },
        // example type import
        {
            from: 'vue-router',
            imports: ['RouteLocationRaw'],
            type: true,
        },
    ],
    // Enable auto import by filename for default module exports under directories
    defaultExportByFilename: false,

    // Auto import for module exports under directories
    // by default it only scan one level of modules under the directory
    dirs: [
        // './hooks',
        // './composables' // only root modules
        // './composables/**', // all nested modules
        // ...
    ],

    // Filepath to generate corresponding .d.ts file.
    // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
    // Set `false` to disable.
    dts: './auto-imports.d.ts',

    // Cache the result of resolving, across multiple vite builds.
    // A custom path is supported.
    // When set to `true`, the cache will be stored in `node_modules/.cache/unplugin-auto-import.json`.
    cache: false,

    // Auto import inside Vue template
    // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
    vueTemplate: false,

    // Custom resolvers, compatible with `unplugin-vue-components`
    // see https://github.com/antfu/unplugin-auto-import/pull/23/
    resolvers: [
        /* ... */
    ],

    // Generate corresponding .eslintrc-auto-import.json file.
    // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
    eslintrc: {
        enabled: false, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
    },
}