初始化实例+全局注册组件

142 阅读1分钟

1、全局注册组件

该文件通过require.context加载模块,第二个参数为是否检索子文件。通过app.component全局注册自定义组件。

对于类似elment-ui的插件,可通过Vue.use安装(通过Vue.use安装 Vue.js 插件,如果插件是一个对象,那么对象当Vue.use(插件)之后,插件的install方法会立即执行;如果插件是一个函数,当Vue.use(插件)之后,函数会被立即执行)。

image.png

2、初始化实例

上图中文件是位于components下的index.js,通过import components from '@/components'引入,由于上图的插件是一个对象,在下图中使用Vue.use()后,其install函数立即执行进行安装。下图中initRouter是一个函数不是一个对象,当使用Vue.use()后,该函数立即被执行。 vue3采用createApp返回一个提供应用上下文的应用实例,use安装插件,最后挂载实例。使用方式可以为: createApp(App).use(store).use(router).mount('#app')

image.png

3、多页面应用可采用以上方式进行封装函数,这样在每一个页中,采用引入上图中的方式进行实例化每一个页面,由于每一个页面只有实例以及路由不同,所以封装函数时仅暴露两个属性。

image.png