vue全局註冊組件

創建Vue項目及運行

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 進入項目根目錄
$ cd my-project
# 安裝依賴
$ npm install
# 運行項目
$ npm run dev

第一步：在components文件下創建組件，及index.js文件，如下圖：

第二步：在index.js引入組件

import vHeader from '@/components/Header'
import vContent from '@/components/Content'
import vFooter from '@/components/Footer'
// 組件安裝
function vComponent(Vue) {
  // 組件是否已安裝
  if(vComponent.installed){
    return;
  }
  Vue.component('vHeader',vHeader);
  Vue.component('vContent',vContent);
  Vue.component('vFooter',vFooter);
}
// 導出組件
export default vComponent

第三步：在main.js中，全局註冊組件

import Vue from 'vue'
import App from './App'
import router from './router'
import vComponent from './components'

// 全局註冊組件
Vue.use(vComponent);

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

第四步：在頁面home.vue中直接運用組件，無需重新引入

<template>
  <div>
    <v-header></v-header>
    <v-content></v-content>
    <v-footer></v-footer>
  </div>
</template>
<script>
  export default{
    data(){
      return{

      }
    }
  }
</script>