封装一个自动注册插件

功能说明

能自动注册指定目录下的所有js和vue文件

• js注册为指令，指令名称就是文件名
• vue注册为组件，组件名为文件名的大驼峰形式

使用

vue2 版本

在main.js中引入后使用即可

import autoRegister from './autoRegister'

Vue.use(autoRegister)

第二个值可以传入一个数组，指定自动注册的文件夹内容，如：

Vue.use(autoRegister, [
    require.context('@/components-bak', true, /\.vue$/)
])

如无配置或者指定为空数组，则默认自动注册以下三个文件夹（无论深度）：

• src/components 文件夹开始，以下的所有vue文件注册为组件，组件名称为文件名转大驼峰
• src/directives 文件夹开始，以下的所有js文件注册为指令，指令名称就是文件名
• src/auto-register 文件夹开始，以下的所有vue和js对应注册

vue3 版本

同理使用use

import autoRegister from './autoRegister'

const app = createApp(App)
app.use(autoRegister)

第二个参数同上，但是自定义需要使用import.meta.glob，而且必须开启eager：

app.use(autoRegister, [
    import.meta.glob('@/components-bak/**/*.vue', { eager: true })
])

import.meta.glob是vite的独有功能，见文档：https://cn.vitejs.dev/guide/features.html#glob-import

引入规则见：https://github.com/mrmlnc/fast-glob#pattern-syntax

autoRegister.js

vue2 版本

/**
 * @author Xin-FAS
 */

// 放入require引入的对象，自动注册，js = 指令，vue = 组件
export default {
    install (instance, requireDirectives = []) {
        // 初始化，默认注册 components下的所有vue为组件 directives下的所有js为指令 auto-register下的js和vue
        if (!requireDirectives.length) {
            try {
                requireDirectives.push(require.context('@/components', true, /\.vue$/))
            } catch (e) {}
            try {
                requireDirectives.push(require.context('@/directives', true, /\.js$/))
            } catch (e) {}
            try {
                requireDirectives.push(require.context('@/auto-register', true, /\.(js|vue)$/))
            } catch (e) {}
        }
        // 注册
        requireDirectives.forEach(directive => directive.keys().forEach(filePath => {
            // 完整文件名 . 分割
            const fullFilename = /.*[/\\](.*?)$/.exec('/' + filePath)[1].split('.')
            ;(
                {
                    // js文件注册
                    js: (name, content) => instance.directive(name, content),
                    // vue文件注册，先转大驼峰
                    vue: (name, content) => instance.component(
                        (str => (
                            str = str.trim(),
                                str = str[0].toUpperCase() + str.slice(1),
                                str.replaceAll(/-(.)/g, (_, val) => val.toUpperCase())
                        ))(name), content
                    )
                }[fullFilename[1]]
            )(
                // 简单闭包，别慌
                fullFilename[0],
                (content => content?.default || content)(directive(filePath))
            )
        }))
    }
}

vue3 版本

/**
 * @author Xin-FAS
 */

// 放入import.meta.glob引入的对象，自动注册，js = 指令，vue = 组件
export default {
    install (instance, requireDirectives = []) {
        // 初始化，默认注册 components下的所有vue为组件 directives下的所有js为指令 auto-register下的js和vue
        if (!requireDirectives.length) {
            try {
                requireDirectives.push(import.meta.glob('@/components/**/*.vue', { eager: true }))
            } catch (e) {}
            try {
                requireDirectives.push(import.meta.glob('@/directives/**/*.js', { eager: true }))
            } catch (e) {}
            try {
                requireDirectives.push(import.meta.glob('@/auto-register/**/*.(vue|js)', { eager: true }))
            } catch (e) {}
        }
        requireDirectives.forEach(directive => {
            for (const [ filePath, importContent ] of Object.entries(directive)) {
                // 完整文件名 . 分割
                const fullFilename = /.*[/\\](.*?)$/.exec('/' + filePath)[1].split('.')
                ;(
                    {
                        // js文件注册
                        js: (name, content) => instance.directive(name, content),
                        // vue文件注册，先转大驼峰
                        vue: (name, content) => instance.component(
                            (str => (
                                str = str.trim(),
                                    str = str[0].toUpperCase() + str.slice(1),
                                    str.replaceAll(/-(.)/g, (_, val) => val.toUpperCase())
                            ))(name), content
                        )
                    }[fullFilename[1]]
                )(
                    // 上面执行完传入
                    fullFilename[0],
                    (content => content?.default || content)(importContent)
                )
            }
        })
    }
}