一、初始化

1
2
3
4
vue init webpack-simple 文件名
cd 文件名
npm install
npm run dev

二、在src目录下创建 

1
2
3
4
5
|--src
   |--components
      |--自定义组件名
          |--自定义组件名.vue
          |--index.js

三、自定义组件名.vue 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div id="loading-box">
      loading...
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

四、index.js

1
2
3
4
5
6
7
8
9
10
// 引入vue文件
import LoadingComponent from './自定义组件名.vue'

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

五、在main.js引入

1
2
3
4
5
6
7
8
9
10
// 引入vue文件
import LoadingComponent from './自定义组件名.vue'

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