全局注册vue组件

我有一个使用 vue-cli 创建的 vue 应用程序

我正在创建一些组件，我想像这样使用它们：

<template>
    <oi-list>
        <oi-list-header>Task ID</oi-list-header>
        <oi-list-header>Tasks Title</oi-list-header> 
        <oi-list-header>Task Status</oi-list-header> 
        <div v-for="task in tasks">
            <oi-list-item>{{ task.id }}</oi-list-item>
            <oi-list-item>{{ task.title }}</oi-list-item>
            <oi-list-item>{{ task.status }}</oi-list-item>
        </div>
    </oi-list>
</tempalte>

我遇到的问题是，无论在哪里使用列表组件，我都必须编写以下内容：

<script>
    import List from '@/components/List'
    import ListHeader from '@/components/ListHeader'
    import ListItem from '@/components/ListItem'

    export default {
    name: "Tasks",
    components: {
        'oi-list': List,
        'oi-list-header': ListHeader,
        'oi-list-item': ListItem
    }
<script>

我想要的是可重用组件可以全局注册，这样我就不必每次想使用它们时都导入它们及其子组件，或者在使用它们时如何动态加载它们。这可能吗？

我用过Vuetify https://vuetifyjs.com/en/过去，这并不需要您导入每个组件才能使用它。

请有人指出我正确的方向吗？谢谢。

这很容易实现。您可以在 main.js 文件中全局注册组件。

import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

现在你可以使用<my-component-name />到处。

一种更干净的方式，不会让你臃肿main.js，就是将组件导入到组件文件夹中的index.js 文件中，如下所示。

import Vue from 'vue'
import MyComponent from '@/components/MyComponent'

Vue.component('my-component-name', MyComponent)

稍后您可以将此行添加到您的main.js加载已注册的组件。

import '@/components'

文档：https://v2.vuejs.org/v2/guide/components-registration.html https://v2.vuejs.org/v2/guide/components-registration.html