1-unplugin-auto-import

1.下载

npm i -D unplugin-auto-import

2.vite.config.ts配置

import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
  plugins: [
    ...
     AutoImport ({
      imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
      dts: "src/auto-import.d.ts" // 生成 `auto-import.d.ts` 全局声明
    })
  ]
})

3.现在vue组件中可以直接使用composition api

  <button @click="add">add</button>
  <button @click="routerPush">go</button>
  {{count}}
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const count = ref(0)
const router = useRouter()
function add() {
  count.value++
}
function routerPush(){
	router.push('a')
}
</script>

<template>
  <button @click="add">add</button>
  <button @click="routerPush">go</button>
  {{count}}
</template>

<script lang="ts" setup>
const count = ref(0)
const router = useRouter()
function add() {
  count.value++
}
function routerPush(){
	router.push('a')
}
</script>

2-unplugin-vue-components

描述：  按需组件自动导入 Vue。
作用：  省略import导入
未转换的：

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

转换后：

<template> 
    <div> 
        <HelloWorld msg="Hello Vue 3.0 + Vite" />
    </div>
</template>

<script> 
    export default { name: 'App' } 
</script>

3-vite-plugin-pages

npm i -D vite-plugin-pages 

import Pages from "vite-plugin-pages"
export default defineConfig({
  plugins: [
    ...
       Pages({
          pagesDir: [{ dir: 'src/views', baseRoute: '' }],
          exclude: ['**/components/*.vue'],
          nuxtStyle: true,
          extendRoute(route) {
            if (route.path === '/') return { ...route, redirect: '/home/a' }
          },
       }),
  ]
})

import { createApp } from "vue"
import App from "./App.vue"

import { createRouter, createWebHashHistory } from "vue-router"
// 这里就是vite-plugin-pages生成的路由信息，正常使用即可
import routes from "virtual:generated-pages"

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

createApp(App).use(router).mount("#app")