vue3-quickstart-cli/bin/plugins/elementPlus.js

一个用于快速创建 Vue3 项目的脚手架工具。

import path from 'path';
import fs from 'fs-extra';
import chalk from 'chalk';
const plugin = {
    name: 'elementPlus',
    apply(targetDir, pkg) {
        pkg.dependencies['element-plus'] = '^2.7.7';
        pkg.devDependencies = pkg.devDependencies || {};
        pkg.devDependencies['unplugin-vue-components'] = '^0.25.1';
        pkg.devDependencies['unplugin-auto-import'] = '^0.17.4';
        // 修改 main.ts/main.js 引入样式
        const mainTs = path.join(targetDir, 'src/main.ts');
        const mainJs = path.join(targetDir, 'src/main.js');
        let mainPath = fs.existsSync(mainTs) ? mainTs : mainJs;
        if (fs.existsSync(mainPath)) {
            let mainCode = fs.readFileSync(mainPath, 'utf-8');
            if (!mainCode.includes("import 'element-plus/dist/index.css'")) {
                mainCode = `import 'element-plus/dist/index.css';\n` + mainCode;
            }
            fs.writeFileSync(mainPath, mainCode, 'utf-8');
        }
        // 修改 vite.config.ts 支持自动按需引入
        const viteConfig = path.join(targetDir, 'vite.config.ts');
        if (fs.existsSync(viteConfig)) {
            let viteCode = fs.readFileSync(viteConfig, 'utf-8');
            if (!viteCode.includes('unplugin-vue-components')) {
                viteCode = viteCode.replace(/plugins: \[/, `plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),`);
                viteCode = `import Components from 'unplugin-vue-components/vite';\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers';\n` + viteCode;
            }
            fs.writeFileSync(viteConfig, viteCode, 'utf-8');
        }
        console.log(chalk.green('已集成 Element Plus（自动按需引入）！'));
    }
};
export default plugin;