• Third party plug-ins are often used in Vue development. You can use this component on any Vue page by importing it in the main.js file using vue.use ().

Create a component folder anywhere in the current Vue project

  • Custom. vue: is a custom component UI, file name arbitrary, can be multiple
  • Index. js: The file name is recommended to be fixed. You only need to link to the folder later

The custom. Vue:

<template> <div class="custom-view"> custom UI component details </div> </template> <script> export default { // name: 'custom'} </script> <style scoped>. Custom -view {width: 100px; height: 100px; background-color: red; } </style>Copy the code

index.js :

Import CustomView from './custom.vue' //...... Const Custom = {// Install: Function (Vue) {Vue.component('Custom', CustomView) // Vue.component(customView.name, CustomView) // Vue.component('More', More)}} export default CustomCopy the code

Main.js imports the component you just defined

Import Vue from 'Vue' import App from './ app. Vue 'import router from './router' import store from './store' // pass Vue. Use () Import custom from './custom' Vue. Use (custom) // If custom is used // If the file does not contain the name index.js, it needs to be completed manually. For example, if I change the file index.js to index1.js, // import Custom from './ Custom /index1' // Vue. Use (Custom) Vue. store, render: h => h(App) }).$mount('#app')Copy the code

Make global components that use this import

  • Choose a display page and use it directly<custom></custom>component
<template>
  <custom></custom>
</template>

<script>
export default {

}
</script>

<style>

</style>
Copy the code

Custom global components come here and you’re done!!

Additional Information

  • Vue global import JS file use
  • NPM upload and publish custom components and use detailed process (included in Vue)