How to customize global components in Vue.use

This article mainly introduces the relevant knowledge of "how to customize global components in Vue.use". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to customize global components in Vue.use" can help you solve the problem.

First, take a look at the current project structure:

Webpack loads main.js first, so we introduce it into main's js. I will use element ui as a comparison.

Import Vue from 'vue'import App from'. / App.vue'// introduces element-ui components import ElementUi from 'element-ui'import' element-ui/lib/theme-default/index.css'// introduces custom components. Index.js is the default entry for components import Loading from'.. / components/loading'Vue.use (Loading); Vue.use (ElementUi); new Vue ({el:'# app', render: h = > h (App)})

Then define your own component template in Loading.vue

Loading...

Add the install method to the index.js file

Import MyLoading from'. / Loading.vue'// here is the focus const Loading = {install: function (Vue) {Vue.component ('Loading',MyLoading)}} / / Export component export default Loading

The next step is to use the component in App.Vue, which has been loaded in the main.js definition

Default button

The following is the effect picture

So much for the introduction of "how to customize global components in Vue.use". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.