![cover](https://img-blog.csdnimg.cn/ac90c2f981d24497b0895bd73f4050d4.jpeg)
在webpack中通过 unplugin-vue-define-options 插件, 实现 在Vue3 setup语法糖中,自定义组件的 name 属性,最后实现组件的全局自动注册,
Vue3 setup语法糖中,自定义组件的 name 属性,最后实现组件的全局自动注册
·
①、安装插件 npm install unplugin-vue-define-options -D
②、在vue.config.js中配置插件
//vue.config.js
configureWebpack: {
plugins: [
require('unplugin-vue-define-options/webpack')()
]
}
③、需要ts类型的可在tsconfig中进行如下配置(未使用ts的忽略此步骤)
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-define-options" /* ... */]
}
}
④、直接在组件中使用
<template lang="">
<div>
test
</div>
</template>
<script lang="ts" setup>
defineOptions({
name: 'AppPagination'
})
</script>
<style lang="">
</style>
⑤、在组件出口中进行组件自动全局注册
import { App } from 'vue'
const importFn = require.context('./', false, /\.vue$/)
export default {
install (app:App) {
// 根据keys批量注册
importFn.keys().forEach(path => {
// 导入组件
const component = importFn(path).default
// 进行注册
app.component(component.name, component)
})
}
}
注意:此方法用起来不方便,如果仅仅想实现自动注册的话可以用下面的方法
在获取组件name上做了改进,以前是获取组件的name, 现在是获取该组件的名称,
import { App } from 'vue'
const ret = require.context('../', false, /\.vue$/)
export default {
install (app: App) {
// 根据keys批量注册
ret.keys().forEach(path => {
// 导入组件
const component = ret(path).default
// 获取组件名称
const name = path.split('.')[1].slice(1)
app.component(name, component)
})
}
}
更多推荐
所有评论(0)