自定义插件

  <template>
    <div>
      <Student/><hr>
      <MySchool></MySchool>
      <hr/>
    </div>
    插件:
      功能: 用于增强Vue
      本质: 包含install方法的一个对象,install的第一个参数是vue,
            第二个以后的参数是插件使用者传递的数据
      定义插件:
          对象.install = function (Vue,options){
            Vue.filter(...)
          }
      使用插件:Vue.use()
      createApp(App).use(plugins)

  </template>
  
  <script>
  // 引入school组件
import Student from './components/Student.vue'
import MySchool from './components/School.vue'
  export default {
    name: 'App',
    components: {
        Student,
        MySchool
    },
    data() {
      return {
      }
    },
    methods :{
    },
  
  }
  </script>
  
  <style>
  
  </style>

  --------------------------------------------------------------------------------------


<template>
  <div class="">
    <h2>学校名称:{{name}}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>

<script>
export default {
    name:'MySchool',
     props: {
    },
    data() {
        return {
            name:'越焦虑越无从下手',
            address:'大连',
        }
    },
    methods:{
     
    }

}
</script>

<style>

</style>

----------------------------------------------------------------------------------------

<template>
  <div class="">
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
  </div>
</template>

<script>
export default {
    name:'MyStudent',
     props: {
    },
    data() {
        return {
            name:'张三',
            sex:'男',
        }
    },
    methods:{
      
    }

}
</script>

<style>

</style>
----------------------------------------------------------------------------------------
main.js

//1. 按需导入createApp 函数
import { createApp } from 'vue'  // 没有vue 是因为直接从这里引入进来了方法 createApp  引入这个方法会返回个对象。
//2. 导入带渲染的 App.vue
// 引入Vue
// import App from './App.vue'     

 // 引用， 引入App组件，它是所有组件的父组件  使用的是相对路径
import App from './App.vue'
//  引入插件
import { plugins } from './plugins'

// 应用(使用)插件
// Vue.use( plugins )
createApp(App).use(plugins)
//关闭Vue的生产提示
// Vue.config.productionTip = false
/*
关于不同版本的Vue
1.vue.js与vue.runtime.xxx.js的区别
  (1.)vue.js是完整版的Vue,包含:核心功能+模板解析器
  (2.)vue.runtime.xxx.js是运行版的Vue, 只包含:核心功能:没有模板解析器

2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用
  render函数接收到的createElement函数去指定具体内容
*/
// 创建Vue实例对象  vm
// new Vue({
//   el:'app',
//   // 完成了这个功能，将App组件放入容器中
//   render: h => h(App),

    // render(createElement) {
    //   return createElement('h1','你好啊')
    // }

// })

//全局注册
  //导入需要被全局注册的组件

//3.调用createApp函数，创建SPA应用实例  调用app.amout() 把App组件的模板结构， 渲染到指定的 el区域中
createApp(App).mount('#app')//createApp创建应用，将配置对象App传进去， mount挂载App
//调用app.component()方法进行全局注册组件
//作为入口文件进行展示


----------------------------------------------------------------------------------------