Vue.js自定义组件

Vue.js自定义组件大体分三步：

1、建立组件文件（**.vue）

<template>
  <div>
      Loading……
  </div>
</template>

2、组件的定义：建立一个组件的调用文件**.js

import LoadingComponent from 'components/common/loading'　　// 导入vue文件
const Loading = {
  install: (Vue) => {
    Vue.component('Loading', LoadingComponent)
  }
}

export default Loading

3、注册组件（全局组件）：在main.js引入、应用

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import Loading from './common/js/loading'　　// 引入Loading组件
Vue.use(Loading)　　// 应用Loading组件

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

最后，就能够在你想用的地方使用这个自定义组件了

<Loading></Loading>
　　　　或
<loading></loading>

最终效果如图：