vue 添加全局组件_自定义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里面定义自己的组件模板

这里简单定义一下

loading...loading...

在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定义加载了

welcome loading

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