Vue.js自定义组件大致分三步:
一、创建组件文件(**.vue)
<template>
<div>
Loading……
</div>
</template>
二、组件的定义:创建一个组件的调用文件**.js
import LoadingComponent from 'components/common/loading' // 导入vue文件 const Loading = { install: (Vue) => { Vue.component('Loading', LoadingComponent) } } export default Loading
三、注册组件(全局组件):在main.js引入、应用
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import Loading from './common/js/loading' // 引入Loading组件 Vue.use(Loading) // 应用Loading组件 /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
最后,就可以在你想用的地方使用这个自定义组件了
<Loading></Loading>
或
<loading></loading>
最终效果如图: