Vue 는 전역 구성 요 소 를 만 들 고 Vue.use()불 러 오 는 방식 을 사용 합 니 다.

import Vue from ‘vue' import upperFirst from ‘lodash/upperFirst'
import camelCase from ‘lodash/camelCase'

const requireComponent = require.context( //           
‘./components', //          false, //                
/Base[A-Z]\w+.(vue|js)$/ )

requireComponent.keys().forEach(fileName => { //        const
componentConfig = requireComponent(fileName)

//       PascalCase    const componentName = upperFirst(
camelCase(
//          ./        
fileName.replace(/^./(.*).\w+$/, ‘$1')
) )

//        Vue.component(
componentName,
//             export default    ，
//          .default，
//            。
componentConfig.default || componentConfig ) })

/**
 *  vue.extend  
 *       Vue    ，    “  ”。              。
 *    ：              
 */

 const Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
  firstName: 'Walter',
  lastName: 'White',
  alias: 'Heisenberg'
  }
 }
 })
 //    Profile   ，         。
 new Profile().$mount('#opp')

let navbar = {
 template: `<div class='nav'>
     <input type="text" placeholder="      "/>
    </div>`, 
 data:()=>{
  return {
  }
 },
 mounted() {
  console.log(this.$parent)
 }
};

const MyPlugin = {
 install:(vue, arguments)=>{
  console.log(arguments);
  vue.component('navbar', navbar);
 }
}

Vue.use(MyPlugin, {a:1, b:2}); //       

// logo  
Vue.component("logo", {
 template: `<div class='logo'>
     <img v-bind:src="logoSrc">
    </div>`,
 inject: ['logoSrc'],  
 data:()=>{
  return {
  }
 },
 mounted() {
  console.log(this.$parent)
 }
})
// header        provie inject  
Vue.component("buttoncounter", {
 template: `<div class='header'>
    <logo></logo>
    {{header}}
    </div>`,
 provide:{
  logoSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582433251882&di=de459decf2e157552b97a4879ae4135d&imgtype=0&src=http%3A%2F%2Fwww.suntop168.com%2Fblog%2Fzb_users%2Fupload%2F2014%2F2%2Fadf89182.jpg'
 },
 data:()=>{
  return {
   header:'       '
  }
 },
 mounted() {
  console.log(this.$parent)
 }
});

// vue   
let vm = new Vue({
 el:"#app",
 data:{
  name: 'Marry'
 },
 mounted(){
  console.log('vue        ')
 }
})

console.log(vm);