首先创建一个项目
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打开的页面即可看到效果
