---

插件全局注册

通用性组件通过插件方式全局注册

index.js:

//component中所有组件全局注册
//通过插件方式
import imgView from './imageView/index.vue'
import Sku from './XtxSku/index.vue'export const componentPlugins = {install(app) {//app.component('组件名字'，组件的配置对象)app.component('imgView', imgView)app.component('Sku', Sku)}
}

main.js:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'// 引入样式
import '@/styles/common.scss'//引入懒加载指令插件
import { lazyPlugin } from './directives'
import { componentPlugins } from './components/index'const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(lazyPlugin)
app.use(componentPlugins)
app.mount('#app')

注册持久化插件:xxx.use()

懒加载插件

import { useIntersectionObserver } from '@vueuse/core'export const lazyPlugin = {install(app) {app.directive('img-lazy', {mounted(el, binding) {// el:绑定的元素// binding：binding.value  指令等号后面的表达式的值console.log(el, binding);const { stop } = useIntersectionObserver(el,([{ isIntersecting }]) => {console.log(isIntersecting)if (isIntersecting) {// 进入视口区域el.src = binding.valuestop()}},)}})}
}

asios基础配置

http.js:

import axios from "axios";const httpInstance = axios.create({baseURL: 'http://xxxx',timeout: 5000,
})// 添加请求拦截器
httpInstance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
httpInstance.interceptors.response.use(function (