import { createApp,h } from 'vue' //引入 创建vue实例的api

import App from './App.vue'  //引入  根组件

let app = createApp(App)  // 创建vue实例对象 =>用户vue实例给你提供的方法

console.log(app);  //对象

import BackTop from './HeightComponent/BackTop.vue'

// 1vue 操作的 虚拟dom => js 对象

//注册全局组件

console.log(BackTop);

app.component('BackTops',BackTop)

app.mount('#app')   //将vue 挂载到 html 指定的元素上

import { createApp,h } from 'vue' //引入 创建vue实例的api

import App from './App.vue'  //引入  根组件

let app = createApp(App)  // 创建vue实例对象 =>用户vue实例给你提供的方法

console.log(app);  //对象

import BackTop from './HeightComponent/BackTop.vue'

// 1vue 操作的 虚拟dom => js 对象

// 2 vue的组件 解析成 一个对象 ={}

//注册全局组件

console.log(BackTop);

app.component('BackTops',{   // render =>  就是将vnode 变成真实dom

    // h 函数 =》 创建  vnode

    //语法  h(元素名称 ,这个元素的数据,子集)

    render(){

        return  h('h2',{id:'apps'},'同学',h('span',{},'111'))  //  =》<h2> <span><span></h2>

    }

})

app.mount('#app')   //将vue 挂载到 html 指定的元素上

// 这个文件 就是自动给我们注册全局组件文件

// 自己写一个插件  app.use

// app.use作用

// 注册插件的=》 就是我们自己写的一个方法和vue项目进行关联，在自己的放中可以使用vue 提到api

//app.use 作用

//app.use（对象的形式）

// 特点

//1 如果这个对象中有一个属性  install,这个install 属性的值是一个方法，会自动执行这个方法

// 并且这个方法的第一个参数就是当前vue 实例对象

//2 如果app.use这个 里面放的是一个方法，并且这个方法的第一个参数就是当前vue 实例对象,就是自定执行这个方法

// let obj = {

//     install(App){

//         console.log(1000,App); //使用vue 提供的方法

//     }

// }

  //引入组件  我这个插件 模块化=》

  import  BackTop from './BackTop.vue'

  import  Winput from './Winput.vue'

  let arrs = [

    {

    name:'BackTop',com:BackTop

  },

  {

    name:'Winput',com:Winput

  },

]

function obj(App){

    console.log(66666,App);

    // 自动注册 全局组件 多个 =》数组

    arrs.forEach((item)=>{

        App.component(item.name,item.com)

    })

}

export default obj

//自动的方法

//  require.context('文件路径','布尔值','正则')

//语法：require.context('文件路径','布尔值','正则')

//api 两个  keys() =>文件路径 =》数组结构  webpack(文件路径).default 这个文件内容

//

function  getArrs(){

   let arrs = []

   let webpacks=   require.context('./',true,/\.vue/)

     console.log(webpacks.keys());

     webpacks.keys().forEach((item,index)=>{

        // ./BackTop.vue

        arrs.push({name:item.replace('./','').replace('.vue',''),com:webpacks(item).default})

     })

     return arrs

}

function obj(App){

    console.log(66666,App);

    //1 自动获取到 arrs 结构

   let comList =  getArrs()

   console.log(comList);

    comList.forEach((item)=>{

        App.component(item.name,item.com)

    })

}

export default obj

import { createApp,h } from 'vue' //引入 创建vue实例的api

import App from './App.vue'  //引入  根组件

// 3 引入文件暴露的内容

import obj from './HeightComponent/index.js'

import Wfonction from './HeightComponent/Wfonction'

let app = createApp(App)  // 创建vue实例对象 =>用户vue实例给你提供的方法

console.log(app);  //对象

// 3 全局注册组件

app.use( obj)

app.component('WfoN',Wfonction)

app.mount('#app')   //将vue 挂载到 html 指定的元素上