Auto Import Tool

Introduction

The Auto Import Tool is a CLI utility that automatically configures on-demand imports for component libraries in Vue projects. It helps quickly set up popular component libraries like Element Plus, Ant Design Vue, etc., without manual configuration file modifications.

Features

  • Dependency Management: Automatically detects and installs required dependencies
  • Vite Configuration: Automatically adds necessary import statements and plugin configurations
  • TypeScript Support: Updates tsconfig.json file automatically
  • Declaration Files: Generates component and API declaration files

Installation 

npm install -g ew-auto-import-tool

Or run directly using npx:

npx ew-auto-import-tool

Usage

Basic Usage

Run in Vue project root:

ew-auto-import-tool

The tool will guide you to select component libraries and complete configuration automatically.

CLI Options 

ew-auto-import-tool --library element-plus

Available Options

  • -l, --library : Specify component library (element-plus, ant-design-vue, naive-ui, vant)
  • -p, --path : Specify project path (default: current directory)
  • -v, --version: Show version
  • -h, --help: Display help

Supported Libraries

Implementation

  1. Project Detection: Verifies Vue + Vite + TypeScript project setup
  2. Dependency Installation: Installs unplugin-auto-import, unplugin-vue-components and component libraries
  3. Configuration Update: Modifies vite.config.ts with auto-import plugins
  4. TypeScript Support: Updates tsconfig.json declaration file references
  5. File Generation: Creates components.d.ts and auto-imports.d.ts

Example

Before configuration:

<script setup lang="ts">
import { ElButton, ElInput } from "element-plus";
import "element-plus/es/components/button/style/css";
import "element-plus/es/components/input/style/css";
script>

<template>
  Button
   placeholder="Input content" />
template>

After configuration:

<script setup lang="ts">
// No manual imports needed
script>

<template>
  Button
   placeholder="Input content" />
template>

Let’s take a look at an example screenshot:

Image description

You can see an example here.Source code is here.