vue-cli -- 自定义配置全局组件

一、全局配置

1、创建公共组件

在components文件夹load中新建loading.vue和loading.js两个文件，vue文件用来写公共组件，js用来导出这个组件

2、导出公共组件

在loading.js中，规定了使用这个组件的名字，以及使用方法

import Loading from './loading.vue' const loading={ install:function(Vue){ // Vue.component()是用来注册全局组件的 Vue.component('loading',Loading) } // loading'这就是后面可以使用的组件的名字，install是vue实例上默认的一个方法 } export default loading

3、引入公共组件

// 在main.js中引入自定义配置的组件，并挂载到vue上 import Loading from './loading' Vue.use(Loading)

4、调用公共组件

可以在项目中的任何地方使用自定义的组件了

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

二、局部配置

1、写好全局组件

在components中创建一个loading.vue的文件，里面写好逻辑代码

2、局部引入组件

这里就比上面简单一点，我们在需要使用这个组件的vue文件中直接引入这个vue文件，然后在component中注册一下，就可以使用了

// 引入组件 import Loading from '@/components/loading' // 注册组件，一定要注册，不然没有效果 components: { Loading } // 调用这个组件 <loading></loading>

转载于:https://www.cnblogs.com/zjh-study/p/10647652.html