【Vue】项目自动创建文件以及路由

package.json 

"scripts": {
    ...
    "new": "node .electron-vue/bin/newPage",
    ...
}

.electron-vue/bin/newPage.js

/**
 * 创建组件
 * 命令： npm run new 【moduleName@moduleName@moduleName】 pageName 【module中文名@module中文名】
 * 作用：
 * 1、创建页面文件，并添加到路由
 * 2、moduleName@moduleName@moduleName 最多三层 最少两层
 * 3、module中文名@module中文名 和 moduleName@moduleName@moduleName 一一对应
 *
 * npm 包：
 *   https://www.npmjs.com/package/file-save
 *   https://www.npmjs.com/package/uppercamelcase
 */

// 没有输入页面名称
if (!process.argv[2] && !process.argv[3]) {
    console.log('[模块名/页面名]必填 - Please enter new module/page name');
    process.exit(1)
}

var path = require('path')
var _ = require('lodash')
var fileSave = require('file-save')
// var moduleName = process.argv[2]        //模块名称
var moduleName = process.argv[2].split('@');
var PageName = process.argv[3] // 页面名称
var chineseName = process.argv[4].split('@') || PageName // 组件中文名称
var needParam = process.argv[5]
var pagePath = path.resolve(__dirname , '../../src/renderer/pages' , moduleName.join('/'));



if(moduleName.length > 3) {
    console.log('不能创建超过3层的页面，请手动创建！');
    process.exit(1)
}


var Files = [
    {
        filename : PageName,
        content : `<template>
    <div class="${moduleName[moduleName.length - 1]}_${PageName}">
        
    </div>
</template>

<script>
    export default {
        name: "${moduleName[moduleName.length - 1]}_${PageName}" ,
    }
</script>

<style lang="scss" scoped>

</style>`
    }
]



var RouteFiles = require('../../src/renderer/router/route.config')
moduleName[1] = moduleName[1] ? moduleName[1] : 'default';

let moduleItemsIndex = RouteFiles.findIndex(item => {
    return item.name == moduleName[0];
});


let moduleItems = moduleItemsIndex !== -1 ? RouteFiles[moduleItemsIndex] : {
    name : moduleName[0],
    title : chineseName[0] ? chineseName[0] :  moduleName[0],
    group : []
}

let groupItemsIndex = moduleItems.group.findIndex(module => {
    return module.name == moduleName[1]
})

groupItems =  groupItemsIndex !== -1 ? moduleItems.group[groupItemsIndex] : {
    name : moduleName[1] ,
    title : chineseName[1] ? chineseName[1] : moduleName[0] + '_' + moduleName[1] ,
    children : []
};


var hasPage = false;            // 判断改文件是否已存在
var hasSecond = null;             // 寻找三层文件夹
var secondRouteItem = null;
var newRouteItem = {
    "name": PageName ,
    "title" : chineseName[2] ? chineseName[2] : chineseName[1],
    "route_name": moduleName[0] + '_' + moduleName[1] ,
    "route_params" : needParam ? needParam.split('@') : null
}

if(groupItems.children.length) {
    _.each(groupItems.children , (child , i) => {
        if(!moduleName[2]) {         // 如果没有三层文件夹
            if(child.name == PageName) {
                hasPage = true
            }
        }else if(child.name == moduleName[2]) {
            hasSecond = i
        }
    })
}



if(moduleName[2]) {
    secondRouteItem = newRouteItem;
    secondRouteItem.route_params = null
    if(hasSecond !== null) {
        newRouteItem = groupItems.children[hasSecond];
    }else {
        newRouteItem = {
            name: moduleName[2] ,
            title : chineseName[2] ? chineseName[2] : chineseName[1],
            route_name: moduleName[0] + '_' + moduleName[1] ,
            route_params : needParam ? needParam.split('@') : null ,
            children : []
        }
    }

    if(newRouteItem.children.length) {
        _.each(newRouteItem.children , child => {
            if(child.name == PageName) {
                hasPage = true;
            }
        })
    }
    if(!hasPage) {
        if(hasSecond == null) {
            newRouteItem.children.push(secondRouteItem);
        }else {
            newRouteItem.children.splice(hasSecond , 1 , secondRouteItem);
        }
    }
}

if(hasPage) {
    console.log('当前已存在该路由，请检查配置');
    process.exit(1)
}

groupItems.children.push(newRouteItem)
if(groupItemsIndex == -1) {
    moduleItems.group.push(groupItems)
}else {
    moduleItems.group.splice(groupItemsIndex , 1 , groupItems);
}


if(moduleItemsIndex == -1) {
    RouteFiles.push(moduleItems);
}else {
    RouteFiles.splice(moduleItemsIndex, 1 , moduleItems);
}


// 创建文件
Files.forEach(function (file) {
    fileSave(path.join(pagePath, file.filename + '.vue'))
        .write(file.content, 'utf8')
        .end('\n')
})
fileSave(path.resolve(__dirname , '../../src/renderer/router/route.config.json'))
    .write(JSON.stringify(RouteFiles, null, '  '), 'utf8')
    .end('\n')


console.log('New DONE!')

使用举例

npm run new [moduleName1@moduleName2@moduleNam3] pageName [module中文名@module中文名@module中文名]  routerParam

• moduleName ：
  • 为 src/renderer/pages 下的一级文件夹名称，@ 作为分割符，@ 后面以此为 第二级文件夹名称和第三级文件夹名称（最多支持三级）
• pageName ：
  • 为当前要创建的文件名称
• module中文名 ：
  • 需要 【moduleName】 一一对应，如果【moduleName】为三级，则【module中文名】为 【moduleName】的前两级和【pageName】的中文名称（中文名称一般应用于菜单和tab栏）
• routerParam ：
  • 如果路由需要类似 /:id 这种传参方式，添加此项即可，值为路由的param的名称（如不需要可以忽略不传）

使用此命令生成的文件会直接生成对应路由，路由地址为 /moduleName1/moduleName2/moduleNam3/pageName

如果有routerParam，则路由地址为  /moduleName1/moduleName2/moduleNam3/pageName/:routerParam

注意：在项目根目录下执行此命令

注意：如果要删除文件，必须要删除 /src/renderer/roter/route.config.json 中对应的数据

举例

 1、

                 

         当前，index为vue文件名称，前面 【financial@prontPayment@edit】为index文件所在的文件夹目录 【财务结算@预付款单】对应 【financial@prontPaymen】的中文名称，【@新增预付款单】为对应的 index.vue文件的中文
 2、

  

  3、