<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()方法进行全局注册组件
//作为入口文件进行展示
----------------------------------------------------------------------------------------
自定义插件
最新推荐文章于 2024-09-03 21:44:01 发布