vue3 学习

每次写 import {ref,.....} from ‘vue’的操作比较繁琐  可使用插件完成这一步操作

npm install unplugin-auto-import -D

安装后需要再vite.config.js中进行配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import AutoImport from "@vitejs/plugin-vue"
import AutoImport from 'unplugin-auto-import/vite'//引入插件
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      //vue(),
      AutoImport({
        imports:["vue","vue-router"],
        dts:'src/auto-import.d.ts'    // 路径下自动生成文件夹存放全局指令
      }),
 
  ],
})

动态组件 使用<compontent  :is='组件名'> 控制显示的组件  可使用KeepAlive内置组件进行缓存

（组件要引入）

异步组件：

需要安装@vueuse/core插件  并在使用异步引入组件的vue文件中引入 useIntersectionObserver

引入组件时使用异步引入方式

const mycomponents = defindeAsyncComponent(()=>{import('组件路径')})