首先創(chuàng)建一個(gè)項(xiàng)目

vue init webpack-simple define-demo //define-demo 項(xiàng)目名稱
cd define-demo     
npm install //安裝本次所有需要的模塊
npm run dev  //自動(dòng)打開網(wǎng)頁，驗(yàn)證項(xiàng)目創(chuàng)建成功

定義組件文件夾

在項(xiàng)目src目錄下新建文件夾components用于存放所有的自定義組件，接著在components下新建loading文件夾，用于存放Loading組件，之所以創(chuàng)建loading文件夾是因?yàn)?，你的Loading組件可能還需要依賴一些其他的文件時(shí)可放在loading文件夾中。最后在loading文件夾下新建index.js 和 Loading.vue 兩個(gè)文件。

loading：組件文件夾
index.js：組件人口加載文件
Loading.vue：組件模板

在main.js中引入并Vue.use()

webpack首先會加載main.js，所以我們在main.js里面引入

// 引入自定義組件。index.js是組件的默認(rèn)入口
import Loading from './components/loading/'
Vue.use(Loading)

在Loading.vue里面定義自己的組件模板

這里簡單定義一下

<template>
  <div>
    loading...loading...
  </div>
</template>

在index.js文件里面添加install方法,定義Vue.use()并且export Loading

import LoadingComponent from './Loading.vue'
const Loading = {
  install:function (Vue) {
    Vue.component('Loading',LoadingComponent)
  }
};
// 導(dǎo)出組件
export default Loading

在任意地方使用全局組件

比如在App.Vue里面使用組件，此時(shí)Loading組件已經(jīng)在main.js定義加載了

<template>
  <div id="app">
    <h3>welcome loading</h3>
    <Loading></Loading>
  </div>
</template>

刷新npm run dev打開的頁面即可看到效果