vue项目内自动生成页面，zash-cli

zash-cli

A simple CLI for generating pages into your projects

Author：zwf193071

E-mail: 997131679@qq.com

date: 2020/07/29

Preface

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

Feature

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

Usage

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

or

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.

在你想生成页面的项目内的根目录下，新建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/SFC',
    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']
};

Commands

create

这个命令会创建新页面组件Test.

$ zash create Test

在你想注入路由的文件内，写上// $h和// $f，当执行命令成功后，会在该路由文件，根据该注释语句占位符，自动导入Test的路由

左侧菜单和面包屑导航亦是根据上述原理自动注入生成

Thanks to

• vue-cli