这个提升效率宝藏级工具一定要收藏使用

Auto Import Tool (自动化按需导入工具)

简介

自动化按需导入工具是一个命令行工具,用于自动配置 Vue 项目中组件库的按需导入。它可以帮助你快速设置 Element Plus、Ant Design Vue 等组件库的按需导入,无需手动修改配置文件。

功能特点

  • 依赖管理:自动检测并安装所需依赖
  • Vite 配置修改:自动添加必要的 import 语句和插件配置
  • TypeScript 支持:自动更新 tsconfig.json 文件
  • 声明文件生成:自动生成组件和 API 的声明文件

安装

bash 复制代码
npm install -g ew-auto-import-tool

或者使用 npx 直接运行:

bash 复制代码
npx ew-auto-import-tool

使用方法

基本用法

在 Vue 项目根目录下运行:

bash 复制代码
ew-auto-import-tool

工具会引导你选择要配置的组件库,并自动完成配置。

命令行选项

bash 复制代码
ew-auto-import-tool --library element-plus
可用选项
  • -l, --library <library>: 指定要配置的组件库 (element-plus, ant-design-vue, naive-ui, vant)
  • -p, --path <path>: 指定项目路径,默认为当前目录
  • -v, --version: 显示版本号
  • -h, --help: 显示帮助信息

支持的组件库

工作原理

  1. 项目检测:检查是否为 Vue + Vite + TypeScript 项目
  2. 依赖安装:安装 unplugin-auto-import、unplugin-vue-components 和组件库
  3. 配置修改:更新 vite.config.ts 文件,添加自动导入插件
  4. TypeScript 支持:更新 tsconfig.json,添加声明文件
  5. 声明文件生成:生成 components.d.ts 和 auto-imports.d.ts 文件

示例

配置前:

vue 复制代码
<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>
  <el-button>按钮</el-button>
  <el-input placeholder="请输入内容" />
</template>

配置后:

vue 复制代码
<script setup lang="ts">
// 无需手动导入组件和样式
</script>

<template>
  <el-button>按钮</el-button>
  <el-input placeholder="请输入内容" />
</template>

来看一个如下截图的示例:

你前往这里可以查看示例。

最后

如果觉的这个工具有用,希望不要吝啬点赞收藏哦,工具源码在这里

ps: 本文档由tare编写,然后本人改了一些。

相关推荐
hemoo12 分钟前
如何让echart的lengend在指定位置换行
javascript·echarts
老前端的功夫13 分钟前
# HTTP缓存:从懵懵懂懂到了如指掌
前端
安卓开发者13 分钟前
Docker与Nginx:现代Web部署的完美二重奏
前端·nginx·docker
Dorian_Ov014 分钟前
GeoPandas+DataFrame实现shapefile文件导入PostGIS数据库
前端·gis
哟哟耶耶16 分钟前
Starting again company 03
前端·javascript·vue.js
葡萄城技术团队16 分钟前
SpreadJS 赋能在线 Excel:协同编辑与精细化权限管控的技术实现
前端
Chloe_lll24 分钟前
threejs(七)PBR材质
开发语言·javascript·材质
转转技术团队35 分钟前
转转商品中心微前端升级之路
前端
love530love41 分钟前
【笔记】解决 ComfyUI 安装节点 ComfyUI-Addoor (葵花宝典)后启动报错:No module named ‘ComfyUI-Addoor’
linux·运维·前端·人工智能·windows·笔记·python
zzywxc7871 小时前
解锁 Rust 开发新可能:从系统内核到 Web 前端的全栈革命
开发语言·前端·python·单片机·嵌入式硬件·rust·scikit-learn