我的框架:vue3+vite+ts+naiveUI
步骤一:
创建一个loading文件夹
index.vue
index.ts
//loading/index.vue
<script lang="ts">
import { NSpace, NSpin } from 'naive-ui'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'HsNavLoading',
components: {
NSpace,
NSpin
}
})
//loading/index.ts
import { App } from 'vue'
import loading from './index.vue'
export default {
install(app: App) {
app.component(loading.name, loading)
}
}
步骤二:
components文件夹下创建index.ts一次引入多个全局组件并导出
//components/index.ts
import { App } from 'vue'
import loading from '@/components/Loading/index'
const components = [loading]
export default {
install(app: App) {
components.map((item) => {
app.use(item)
})
}
}
步骤四:
main.js引入
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import components from '@/components/index'
const app = createApp(App)
app.use(router).mount('#app')
app.use(components)
步骤五:
在单页面中使用
<hsNavLoading :show="isLoading" />
遇到的坑:
一开始loading/index.vue使用setup语法糖,通过
defineExpose
来导出name
报错
Failed to resolve component: hsNavLoading If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
<script lang="ts" setup>
import { NSpace, NSpin } from 'naive-ui'
defineExpose({
name: 'HsNavLoading'
})
</script>
解决办法:如
步骤一
,把语法糖换掉