背景

當我為每個Vue項目使用ui組件庫的時候，都會使用按需導入的方式來使用ui組件庫。但是每次按需導入，不可避免的就需要做以下三步。我們以element plus ui組件庫為例。

1. 安裝依賴

第一步，當然是需要安裝依賴。命令如下:

pnpm add unplugin-vue-components unplugin-auto-import // npm和yarn同理

2. 添加vite配置

第二步，就是往vite的配置里面添加配置，如下所示:

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

3. 修改ts配置

第三步，就是寫入ts的配置，如下所示:

{"include": ["components.d.ts", "auto-imports.d.ts"]
}

雖然說這三步實際也花費不了多少時間，但是每個項目都這么做，那不是太費時間了嗎？這個工具的出現就是為了解決這個問題。

有了這個工具，我們只需要一個命令就可以完成以上三個步驟。如下所示:

// 當然前提需要安裝這個工具
ew-auto-import-tool --library element-plus

rust版本的出現

在這之前，我也將這個工具發布了一個npm包，并且也寫了一篇介紹使用文章。

這個版本的工具源碼是使用typescript編寫的，為了提升性能和加快編譯效率，我特意又花時間完成了rust版本。

讓我們一起來看看rust版本是如何使用這個工具更高效的完成按需導入的自動化吧。

編寫一個sh腳本，代碼如下所示:

#!/bin/bash# 顏色定義
GREEN="\033[0;32m"
BLUE="\033[0;34m"
YELLOW="\033[0;33m"
RED="\033[0;31m"
NC="\033[0m" # No Color# 打印帶顏色的消息
function print_message() {echo -e "${BLUE}===> ${1}${NC}"
}# 檢查命令是否存在
function check_command() {if ! command -v $1 &> /dev/null; thenecho -e "${RED}錯誤: $1 未安裝，請先安裝它。${NC}"exit 1fi
}# 檢查必要的命令
check_command "cargo"
check_command "npm"# 設置工作目錄
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
RUST_DIR="$(dirname "$SCRIPT_DIR")"
EXAMPLE_PROJECT="my-vue-app"
EXAMPLE_DIR="$SCRIPT_DIR/$EXAMPLE_PROJECT"print_message "開始運行 Auto Import Tool 示例"# 編譯 Rust 工具
print_message "編譯 Rust 工具"
cd "$RUST_DIR"
cargo build --release
if [ $? -ne 0 ]; thenecho -e "${RED}編譯失敗，請檢查錯誤信息。${NC}"exit 1
fi
echo -e "${GREEN}編譯成功!${NC}"# 創建示例 Vue 項目
print_message "創建示例 Vue 項目"
cd "$SCRIPT_DIR"# 如果項目已存在，詢問是否刪除
if [ -d "$EXAMPLE_PROJECT" ]; thenecho -e "${YELLOW}警告: $EXAMPLE_PROJECT 目錄已存在。${NC}"read -p "是否刪除并重新創建? (y/n) " -n 1 -rechoif [[ $REPLY =~ ^[Yy]$ ]]; thenrm -rf "$EXAMPLE_PROJECT"elseecho -e "${YELLOW}使用現有項目繼續。${NC}"fi
fi# 如果項目不存在，創建新項目
if [ ! -d "$EXAMPLE_PROJECT" ]; thenecho -e "${GREEN}創建新的 Vue + TypeScript 項目...${NC}"npm create vite@latest $EXAMPLE_PROJECT -- --template vue-tscd "$EXAMPLE_PROJECT"npm install
elsecd "$EXAMPLE_PROJECT"
fi# 運行 Auto Import Tool
print_message "運行 Auto Import Tool 配置 Element Plus"
TOOL_PATH="$RUST_DIR/target/release/ew-auto-import-tool"echo -e "${YELLOW}選擇運行模式:${NC}"
echo "1) 自動模式 (使用 Element Plus)"
echo "2) 交互模式 (手動選擇組件庫)"
read -p "請選擇 (1/2): " -n 1 -r
echoif [[ $REPLY =~ ^[1]$ ]]; then"$TOOL_PATH" --library element-plus --path "$EXAMPLE_DIR"
else"$TOOL_PATH" --path "$EXAMPLE_DIR"
fi# 創建示例組件
if [ $? -eq 0 ]; thenprint_message "創建示例組件以驗證配置"# 創建一個使用組件庫的示例組件cat > "$EXAMPLE_DIR/src/App.vue" << EOL
<template><div class="container"><h1>Element Plus 自動導入示例</h1><div class="card"><el-form><el-form-item label="用戶名"><el-input v-model="username" placeholder="請輸入用戶名"></el-input></el-form-item><el-form-item label="密碼"><el-input v-model="password" type="password" placeholder="請輸入密碼"></el-input></el-form-item><el-form-item><el-button type="primary" @click="handleSubmit">登錄</el-button><el-button>取消</el-button></el-form-item></el-form></div></div>
</template><script setup lang="ts">
import { ref } from 'vue'const username = ref('')
const password = ref('')const handleSubmit = () => {if (!username.value || !password.value) {ElMessage.warning('請輸入用戶名和密碼')return}ElMessage.success('登錄成功!')
}
</script><style>
.container {max-width: 800px;margin: 0 auto;padding: 20px;
}.card {padding: 20px;border-radius: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
EOLprint_message "示例創建完成"echo -e "${GREEN}現在你可以運行項目來測試自動導入功能:${NC}"echo -e "cd $EXAMPLE_PROJECT && npm run dev"
fiprint_message "示例運行完成"

整個腳本代碼的核心就是使用cargo build --release命令編譯出工具的可執行文件，然后初始化一個vue項目并執行該可執行文件，這樣就完成了一個示例。

使用步驟

前提條件

• 已安裝 Rust 和 Cargo
• 已編譯 Auto Import Tool 的 Rust 版本

使用方法

1. 編譯工具

在?rust?目錄下運行以下命令編譯工具：

cargo build --release

編譯后的可執行文件將位于?target/release?目錄下。

2. 創建一個 Vue 項目

使用 Vite 創建一個新的 Vue 項目：

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install

3. 使用工具配置組件庫

運行編譯后的工具，并指定要配置的組件庫和項目路徑：

# 使用相對路徑運行工具
../target/release/ew-auto-import-tool --library element-plus --path ./my-vue-app

或者使用交互式方式：

../target/release/ew-auto-import-tool --path ./my-vue-app

然后按照提示選擇要配置的組件庫。

如果覺得本工具有用，感謝大家使用，點贊收藏不迷路，點個小star吧，工具源碼地址在這里。

感興趣的可以看看源碼，后期我再寫文章詳細講解源碼的實現，今天就到此為止，謝謝大家閱讀。