Vue3 & app.use 与 install 函数的作用

Vue3 & app.use 与 install 函数的作用 1. app.use

推荐整理分享Vue3 & app.use 与 install 函数的作用，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

在 vue3 中，默认初始化 vue 的方式是这样的

// src/main.jsimport { createApp } from 'vue'import App from '@/App.vue'const app = createApp(App)app.mount('#app')export default app

如果我们需要引入 vue-router 则需要修改成比如这样

// src/main.jsimport { createApp } from 'vue'...++++++++import Home from '@/pages/Home.vue'import { createRouter, createWebHistory} from "vue-router"const routes = [ { path: '/home', component: Home },]const router = createRouter({ history: createWebHistory('/'), routes})// 最后通过 app.use 方法引入 Routerapp.use(router)

类似的，其它插件如 i18n、vuex、vant 等都要借助 app.use 引入， 官方也解释了 app.use 就是用来引入插件，这里不在赘述。

2. install

在介绍 install 方法前，我们需要知道有这么一个方法 app.use(plugin, options) 其中 plugin 表示要传递的插件对象， options 参数是可选的，表示选项配置， install 方法的定义就插件对象里面，install 方法会在引入插件时自动被 vue 调用， 并传参 vue 实例和 options ，具体代码如下：

// src/plugins/my-plugin.jsconst myPlugin = {install(app, options) {// { name: 'Jack' }console.log(options);// 有了 app，我们注入一个全局组件app.component('my-button', import('@/components/my-button.vue'))// 也可以