Vue.js: two way to import a component

[sunmingtao]

1. In main.js -- less preferred.

import Header from './components/Header.vue'
import Servers from './components/Servers.vue'

Vue.component('my-header', Header);
Vue.component('my-servers', Servers);

2. In vue file (e.g. App.vue) -- preferred.

<script>
    import Header from './Header.vue';
    import Footer from './Footer.vue';
    import Servers from './Servers.vue';
    import ServerDetails from './ServerDetails.vue';

    export default {
        components: {
            'app-header': Header,
            'app-servers': Servers,
            'app-server-details': ServerDetails,
            'app-footer': Footer
        }
    }
</script>