unplugin-vue-components 实现 Vue 3 组件自动导入：扫描指定目录（如 src/components）、生成注册逻辑并注入应用，无需手动 import 和 components 选项；Vite 中安装后配置 dirs 和 dts 即可支持自动引入、按需加载样式及 TypeScript 类型提示。

用 unplugin-vue-components 实现 Vue 3 组件自动导入，核心是让插件在构建时扫描指定目录、生成注册逻辑、注入到应用中，开发者无需写 import 和 components 选项，模板里直接用组件名即可。

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

安装与基础配置

在 Vite 项目中执行：

• 安装插件：npm install -D unplugin-vue-components
• 在 vite.config.ts 中引入并启用：

import Components from 'unplugin-vue-components/vite'
export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'], // 扫描路径，支持嵌套子目录
      dts: true, // TypeScript 项目建议开启，生成 components.d.ts
    })
  ]
前端免费学习笔记（深入）”；

• 安装对应解析器，例如：npm install -D @unplugin-vue-components/resolvers
• 配置中加入 resolver：

import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
Components({
  resolvers: [NaiveUiResolver()],
  dirs: ['src/components']