vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据

npm install unplugin-vue-components

import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig {
  // ...
  plugins: [
    // 按需引入
    Components({
      deep: true, // 搜索子目录
      dirs: ['src/components'], // 按需加载的文件夹
      resolvers: [ ElementPlusResolver() ] // ElementPlus按需加载
    })
  ],
  // ...
}

npm i -D unplugin-auto-import

import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
  plugins: [
    ...
     AutoImport ({
      imports: ["vue", "vue-router","pinia"], //自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
      resolvers:[ElementPlusResolver()]
    })
  ]
})

import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

const count = ref(0)
const doubled = computed(() => count.value * 2)

npm install -D vite-plugin-pages
npm install vue-router

import Pages from 'vite-plugin-pages'

export default {
  plugins: [
    // ...
    Pages({
      dirs: "src/views", // 需要生成路由的文件目录，默认就是识别src下面的pages文件
      exclude: ["**/components/*.vue"], // 排除在外的目录，上面配置目录的例子，里面有 components 目录，我们不希望他被解析为路由
      extendRoute(route, parent) {
        if(route.path==='/') return { ...route,redirect:'page1' }//给默认路由加一个redirect，默认为index.vue
      }
    }),
  ],
}

import { createRouter, createWebHistory } from "vue-router";
import routes from "~pages";
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

<route>
{
  name: "name-override",
  meta: {
    requiresAuth: false
  }
}
</route>

npm i mockjs -s
npm i vite-plugin-mock -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
  vue(),
  viteMockServe({
    mockPath: 'mock',//解析根目录下的mock文件夹
  }),
  ]
})

import mockJS from 'mockjs'
const userList = mockJS.mock({
    "data|100": [{
        name: '@cname',
        'id|+1': 1
    }]
})

const userListData = [{
    method: 'post',
    url: '/api/users',
    response: ({
        body
    }) => {
        return {
            code: 200,
            msg: 'success',
            data: userList
        }
    }
}]

export default userListData

<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
onMounted(() => {
  fetch("/api/users", { method: "post" }).then((res) => {
    console.log(res);
  });
});
</script>