Vue入门（九）---- 自定义组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39630587/article/details/79936687

一、初始化

vue init webpack-simple 文件名
cd 文件名
npm install
npm run dev

二、在src目录下创建

|--src
   |--components
      |--自定义组件名
          |--自定义组件名.vue
          |--index.js

三、自定义组件名.vue

<template>
  <div id="loading-box">
      loading...
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

四、index.js

// 引入vue文件
import LoadingComponent from './自定义组件名.vue'

// 自定义
const Loading = {
    install: function(Vue) {
        Vue.component("组件导出名",LoadingComponent)
    }
}
export default 组件导出名

五、在main.js引入