Vue学习-项目化

插件全局注册

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

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.value
              stop()
            }
          },
        )

      }
    })
  }
}

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 (