自动化按需导入工具是一个命令行工具,用于自动配置 Vue 项目中组件库的按需导入。它可以帮助你快速设置 Element Plus、Ant Design Vue 等组件库的按需导入,无需手动修改配置文件。
npm install -g ew-auto-import-tool
或者使用 npx 直接运行:
npx ew-auto-import-tool
在 Vue 项目根目录下运行:
ew-auto-import-tool
工具会引导你选择要配置的组件库,并自动完成配置。
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
: 显示帮助信息配置前:
<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>
配置后:
<script setup lang="ts">
// 无需手动导入组件和样式
</script>
<template>
<el-button>按钮</el-button>
<el-input placeholder="请输入内容" />
</template>
来看一个如下截图的示例:
你前往这里可以查看示例。
工具详细使用在线文档网站前往这里查看。
如果觉的这个工具有用,希望不要吝啬点赞收藏哦,工具源码在这里。
ps: 本文档由tare编写,然后本人改了一些。