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

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

import path from 'path';
import fs from 'fs-extra';
import chalk from 'chalk';
export default function genElementPlus(targetDir, pkg) {
    pkg.dependencies['element-plus'] = '^2.7.2';
    // 生成/修改 vite.config.ts
    const viteConfigPathTs = path.join(targetDir, 'vite.config.ts');
    const viteConfigPathJs = path.join(targetDir, 'vite.config.ts');
    let viteConfigPath = viteConfigPathTs;
    let isTs = true;
    if (!fs.existsSync(viteConfigPathTs) && fs.existsSync(viteConfigPathJs)) {
        viteConfigPath = viteConfigPathJs;
        isTs = false;
    }
    let viteConfig = '';
    if (fs.existsSync(viteConfigPath)) {
        viteConfig = fs.readFileSync(viteConfigPath, 'utf-8');
    }
    else {
        viteConfig = isTs
            ? `import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n  plugins: [vue()]\n});\n`
            : `import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n  plugins: [vue()]\n});\n`;
    }
    // 插入 unplugin-vue-components 和 unplugin-auto-import 配置
    if (!viteConfig.includes('unplugin-vue-components')) {
        const importStr = isTs
            ? `import Components from 'unplugin-vue-components/vite';\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers';\nimport AutoImport from 'unplugin-auto-import/vite';\n`
            : `import Components from 'unplugin-vue-components/vite';\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers';\nimport AutoImport from 'unplugin-auto-import/vite';\n`;
        viteConfig = importStr + viteConfig;
        // 插件数组插入
        viteConfig = viteConfig.replace(/plugins:\s*\[([^\]]*)\]/, (m, p1) => {
            return `plugins: [${p1},\n      Components({\n        resolvers: [ElementPlusResolver()]\n      }),\n      AutoImport({\n        resolvers: [ElementPlusResolver()]\n      })\n    ]`;
        });
    }
    fs.writeFileSync(viteConfigPath, viteConfig, 'utf-8');
    // main.ts/main.ts 自动引入 ElementPlus
    const mainTs = path.join(targetDir, 'src/main.ts');
    const mainJs = path.join(targetDir, 'src/main.ts');
    let mainPath = fs.existsSync(mainTs) ? mainTs : mainJs;
    if (fs.existsSync(mainPath)) {
        let mainCode = fs.readFileSync(mainPath, 'utf-8');
        if (!mainCode.includes('element-plus/dist/index.css')) {
            mainCode = `import 'element-plus/dist/index.css';\n` + mainCode;
        }
        fs.writeFileSync(mainPath, mainCode, 'utf-8');
    }
    console.log(chalk.green('已集成 element-plus 及按需引入配置！'));
    pkg.devDependencies = pkg.devDependencies || {};
    pkg.devDependencies['unplugin-vue-components'] = '^0.25.1';
    pkg.devDependencies['unplugin-auto-import'] = '^0.17.4';
}