自定义vue全局组件(Loading为例)

首先创建一个项目

vue init webpack-simple define-demo //define-demo 项目名称
cd define-demo     
npm install //安装本次所有需要的模块
npm run dev  //自动打开网页，验证项目创建成功

定义组件文件夹

在项目src目录下新建文件夹components用于存放所有的自定义组件，接着在components下新建loading文件夹，用于存放Loading组件，之所以创建loading文件夹是因为，你的Loading组件可能还需要依赖一些其他的文件时可放在loading文件夹中。最后在loading文件夹下新建index.js 和 Loading.vue 两个文件。

loading：组件文件夹
index.js：组件人口加载文件
Loading.vue：组件模板

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

webpack首先会加载main.js，所以我们在main.js里面引入

// 引入自定义组件。index.js是组件的默认入口
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)
  }
};
// 导出组件
export default Loading

在任意地方使用全局组件

比如在App.Vue里面使用组件，此时Loading组件已经在main.js定义加载了

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

刷新npm run dev打开的页面即可看到效果

自定义vue全局组件(Loading为例)

推荐阅读更多精彩内容