The role of Vue3 & app.use and install functions

1. app.use

In vue3, the default way to initialize vue is like this

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

If we need to introduce vue-router, we need to modify it like this

// src/main.js
import {
    
     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 方法引入 Router
app.use(router)

Similarly, other plug-ins such as i18n, vuex, vant, etc. must be imported with the help of app.use.
The official also explained that app.use is used to import plug-ins, so I won’t go into details here.

2. install

Before introducing installthe method , we need to know that there is such a method , which meansapp.use(plugin, options)
to be passed , and the parameters are optional, which means that the definition of the method is inside, and the method will be automatically called by vue when the plug-in is introduced, and the vue instance and options will be passed. , the specific code is as follows:plugin插件对象options选项配置
install插件对象install

// src/plugins/my-plugin.js
const myPlugin = {
    
    
	install(app, options) {
    
    
		// { name: 'Jack' }
		console.log(options);

		// 有了 app，我们注入一个全局组件
		app.component('my-button', import('@/components/my-button.vue'))
		// 也可以声明一个全局属性/函数
		app.config.globalProperties.$Tools = () => console.log('Hello,world')
	}
}
// src/main.js
app.use(myPlugin, {
    
     name: 'Jack' })

The function of the above code is explained in the official vue, but it also hides a useful function related to the construction of vue-cli.
installIn addition to defining the method in the plug-in object, the method组件 can also be customized . Yes, the component itself is also installAn object,
so when the component is introduced, it will be triggered automatically install, the code is as follows

// src/components/my-buttonn.js
import MyButton from '@/components/my-button.vue'
MyButton.install = (app) => {
    
    
	app.component('MyButton', MyButton)
}

my-button.jsThe component is introduced above my-butgton.vue, and installthe method , which loads the my-buttoncomponent through the vue instance. What is the use of this? We can first look at the vue-cli build which
explains that when packaging vue, there is an option --target libcommand , which can package the file into a js library that can be imported as a dependency.
We can push this library to npm, and then pass npm install [name]Install it in the

// 例如：npm install cookcyq/MyButton

// 在代码中引入
// demo.vue
<template>
	<div class="main">
		<MyButton/>
	</div>
</template>
<script>
import MyButton from '@/cookcyq/Mybutton';
export default {
    
    
  components: {
    
    
	MyButton,
  }
}
</script>

When the dependency is introduced, installthe method to realize component self-citation. A library has more than one component. You can my-button.jsintroduce additional components in and
build your own component library, which can be maintained separately and reduce the amount of code in the main project. .

Students who are interested in the library can read Vue3 & explain in detail how vue-cli uses --target lib to package

over!