自动生成后台管理页面，zash-cli工具包介绍，基于Vue

站长

2024年03月23日 08:23 · 阅读数 2

前言

这些后台管理页面都是相似的，为何要反复的拷贝来拷贝去？好不容易拷贝完，还得为新增的页面添加路由、左侧菜单和面包屑导航的功能，555...不甘心将时间浪费在这些细枝末节上，于是擦干眼泪，撸起袖子做了一套自动化生成页面的工具，希望能给后面的读者一些启示。

特性

这是一款为公司内部vue项目特定的CLI工具，亦可基于此进行改造，现支持create <new-file-name>命令，可生成单页或带tab的多页面，自动注入新页面功能至路由、面包屑及菜单导航等组件内（通过占位符实现）

如何使用

全局安装zash-cli。npm install -g zash-cli

git clone https://github.com/zwf193071/zash-cli.git

cd zash-cli && npm install

npm link

打开terminal或 cmd ，输入zash or zash -h ，你将看到如下信息:

  Usage: zash [options] [command]

  Options:
    -h, --help              output usage information

  Commands:
    create <new-file-name>  create a new file powered by zash-cli

    Run zash <command> --help for detailed usage of given command.

若在win10系统的git bash里运行该命令，会发现没有颜色区别，这是因为在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作，此时，你必须通过winpty zash.cmd create xxx启动该命令。为了解决该问题，需要在C:\Users\用户名内找到.bashrc文件(若无该文件，则手动创建一个)里输入以下命令 alias zash='winpty zash.cmd'，重启Git Bash窗口，再次运行该命令，发现已经有了颜色

命令安装完毕后，在你想生成页面的项目内的根目录下，新建pageConf.js文件，代码如下所示：

/**
 * 自动生成文件的相关配置信息
 * @param parentFolderPath 父文件地址，相对于根路径
 * @param routerPath 路由文件地址
 * @param breadPath 面包屑导航地址
 * @param parentName 父菜单名字
 * @param leftMenuPath 左侧菜单文件路径
 * @param author 当前文件的创建者
 * @param title 文件标题，与增删改的提示信息相关
 * @param isDrawer 是否有抽屉，默认为true，表示增删改功能皆有
 * @param getUrl 列表请求接口地址
 * @param addUrl 新增接口地址
 * @param editUrl 编辑接口地址
 * @param deleteUrl 删除接口地址
 * @param childrenValues 子页面的模块名称
 * @param childrenNames 子页面的标题
 * @author zhuwenfang
 * @createtime 2020-07-28
 */
exports.conf = {
    parentFolderPath: 'src/views/Content/Monitor',
    routerPath: 'src/router/routes.js',
    breadPath: 'src/components/BreadLink/config.js',
    parentName: '网络服务',
    leftMenuPath: 'src/views/Home/LeftMenu/LeftMenu.config.js',
    author: 'zhuwenfang',
    title: '测试一',
    isDrawer: true,
    getUrl: '',
    addUrl: '',
    editUrl: '',
    deleteUrl: '',
    // 下面针对是多页面的配置
    childrenValues: ['child1', 'child2', 'child3', 'child4'],
    childrenNames: ['子页面1', '子页面2', '子页面3', '子页面4']
};

再在该后台项目内运行以下命令

$ zash create Test

运行成功后，会在src/views/Content/Monitor目录下生成Test组件，结构如下所示：

自动生成后台管理页面，zash-cli工具包介绍，基于Vue

上述页面为单页面，若为多页面，则需要在下面命令行选择Multiple

自动生成后台管理页面，zash-cli工具包介绍，基于Vue

核心代码原理

该项目的入口文件为bin/zash.js文件，里面会引入lib/create，并将用户输入的options参数传给create方法

const chalk = require('chalk')
const program = require('commander');

program
    .command('create <new-file-name>')
    .description('create a new file powered by zash-cli')
    .action((name, cmd) => {
        const options = cleanArgs(cmd);
        require('../lib/create')(name, options);
    })

program.on('--help', () => {
    console.log();
    console.log(`  Run ${chalk.cyan(`zash <command> --help`)} for detailed usage of given command.`);
    console.log();
})

program.commands.forEach(c => c.on('--help', () => console.log()))

program.parse(process.argv)

if (!process.argv.slice(2).length) {
    program.outputHelp()
}

lib/create向外暴露了create方法，该方法首先检查pageConf.js里设置的父级目录是否存在，若存在，则通过inquirer库，获取到用户的选项之后，从模板库里选择相应的文件（模板库为templates目录下的handlebars文件），再将模板文件通过fs.outputFileSync方法导出到后台项目内即可。

async function create (fileName, options) {
    const cwd = process.cwd();
    const pageConf = require(path.resolve(cwd, 'pageConf.js')).conf;
    const parentPath = pageConf.parentFolderPath;
    const targetDir = path.resolve(cwd, parentPath);
    const filePath = `${targetDir}/${fileName}`;

    if (!fs.existsSync(targetDir)) {
        console.log(chalk.red(
            '\nThe path of parent folder doesn\'t exist, please make sure you have configured it in the pageConf.js file'
        ));
        return;
    }
    const { action } = await inquirer.prompt([
        {
            name: 'action',
            type: 'list',
            message: 'Please Pick the appropriate template:',
            choices: [
                { name: 'Single', value: 'single' },
                { name: 'Multiple', value: 'multiple' }
            ]
        }
    ]);
    if (!action) {
        return
    } else {
        const source = getTemplate(action)({
            ...pageConf,
            createTime: formateTime(),
            fileName
        });
        if (fs.existsSync(filePath)) {
            errorExit(`The folder:${fileName} has already existed!`);
            return;
        } else {
            logWithSpinner(`✨`, `Busy creating folder-${fileName} in ${chalk.yellow(targetDir)}...`);
            autoInjectNavs(pageConf, parentPath, fileName);
            fs.outputFileSync(`${filePath}/index.vue`, source, 'utf8');
            if (action === 'multiple') {
                pageConf.childrenValues.forEach((item, i) => {
                    const childSource = getTemplate('child')({
                        childName: item,
                        childTitle: pageConf.childrenNames[i],
                        author: pageConf.author,
                        createTime: formateTime()
                    });
                    fs.outputFileSync(`${filePath}/${item}.vue`, childSource, 'utf8');
                });
            }
            stopSpinner();
            console.log(chalk.green(
                `✔ You have created folder: ${chalk.yellow(fileName)} successfully`
            ));
            process.exit(1);
        }
        
    }
}

module.exports = (...args) => {
    return create(...args);
}

模板库文件内容如下图所示：

自动生成后台管理页面，zash-cli工具包介绍，基于Vue

其中child.handlebars为多页面时的子页面模板文件

个人项目地址

zash-cli