Vue registers global components

Directory structure:

test

Index. Js

Product. The vue

product.vue

<template>
  <div>
    hello world
  </div>
</template>

<script>
export default {
  name: "product"
}
</script>

<style scoped>

</style>
Copy the code

index.js

import product from "@/components/test/product";

const productCom = {
  install:function (Vue){
    Vue.component('el-product',product)
  }
}

export default productCom

Copy the code

main.js

import productCom from '@/components/test/index'
Vue.use(productCom) 
Copy the code

In the home file

<template>
    <el-product></el-product>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>

</style> 
Copy the code