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>

最終效果如圖：