自动化构建vue页面

1.创建autoConfig.js,并填写设置数据

var addConfig = [{
    // 测试自动生成页面
    open: true, // 参与生成 false表示改配置不参与生成页面
    addFile: true, // false 不加文件夹  true 新增文件夹-----组件文件夹
    templateName: 'auto_home.vue', //使用模板的名称
    pagePath: 'businessAnalysis', //创建页面的文件夹地址
    name: 'autoTablepage', // 文件夹名称
    VueName: 'index.vue', // Vue文件名称
    routeFile: 'businessAnalysis', //路由对应文件
    routePath: 'Management', //路由对应地址
    routeName: 'RouteTest', //路由name名称
    /* 路由参数配置 */
    title: '测试路由', //mate的title内容
    icon: 'middlequan', //mate的icon内容
    auth: ['Procured.procuredOrder'], //mate的auth内容
    pageInfo: {
        // 表格数据请求相关
        title: '自动生成',
        url: '', //页面获取数据接口
        tableJson: "autoTable.json", //table的数据
    },
}]
module.exports = addConfig

2.新建build-page.js文件,引入需要的内容

var addConfig = require('./addConfig')
var fs = require('fs')
var path = require('path')
var shell = require('shelljs')

3.遍历数据，判断是否生成文件或文件夹

addConfig.forEach((config) => {
    if (config.open) {
        var paths
        if (config.addFile) {
            /* 生成文件夹 */
            paths = path.resolve(`./src/views/${config.pagePath}/${config.name}`)
        } else {
            /* 不生成文件夹 */
            paths = path.resolve(`./src/views/${config.pagePath}`)
        }
        shell.echo('页面地址：' + paths)
        shell.echo('文件状态：' + fs.existsSync(paths))
        if (fs.existsSync(paths)) {
            /* 存在相同文件 删除后新建文件夹 */
            removeDir(config, paths)
            buildPage(config, paths)
        } else {
            /* 不存在相同文件 新建文件夹 */
            buildPage(config, paths)
        }
    }
})

3.1删除相同文件

/* 删除文件夹 */
function removeDir(config, paths) {
    shell.echo(config.addFile)
    if (config.addFile) {
        /* 新增目录 */
        let files = fs.readdirSync(paths)
        for (var i = 0; i < files.length; i++) {
            let newPath = path.join(paths, files[i]);
            shell.echo('删除文件：' + newPath)
            let stat = fs.statSync(newPath)
            if (stat.isDirectory()) {
                //如果是文件夹就递归下去
                removeDir(config, newPath);
            } else {
                //删除文件
                fs.unlinkSync(newPath);
            }
        }
        fs.rmdirSync(paths) //如果文件夹是空的，就将自己删除掉
    } else {
        /* 新增文件 */
        let newPath = path.join(paths, `/${config.VueName}`);
        if (fs.existsSync(newPath)) {
            fs.unlinkSync(newPath);
        }
    }
}

4.构建vue读取生成模板auto_add.vue，定义替换设置数据

 5.读取模板内容作为字符串输出，准备修改

function buildPage(config, paths) {
    shell.echo('页面地址:' + paths)
    if (config.addFile) {
        /* 新增文件夹后新增文件 */
        fs.mkdirSync(paths, (function () {
            fs.readFile(path.resolve(`./src/auto-build-page/template/${config.templateName}`), (err, data) => {
                if (!err) {
                    writePage(data.toString(), paths, config)
                }
            })
        }()))
    } else {
        /* 直接新增文件 */
        fs.readFile(path.resolve(`./src/auto-build-page/template/${config.templateName}`), (err, data) => {
            if (!err) {
                writePage(data.toString(), paths, config)
            }
        })
    }

}

 6.替换指定数据内容，修正模板字符串

/* 替换vue模板中指定内容 */
function handleStr(str, config) {
    if (config.helloworld) {
        return str
    }
    let map = config.pageInfo
    for (let k in map) {
        if (k == "tableJson") {
            var jsonList = require(`./tableJson/${map[k]}`)
            str = str.replace('%el-table-column%', handleTable(jsonList))
        } else {
            str = str.replace(`%${k}%`, map[k])
        }
    }
    r

7.新增vue并写入内容,准备添加路由

function writePage(vueStr, paths, config) {
    str = handleStr(
        vueStr,
        config
    )
    fs.writeFile(`${paths}/${config.VueName}`, str, (e) => {})
    shell.echo('开始新增路由……')
    /* 新增路由异步执行 */
    addToConf(config)
}

8.读取路由文件，对内容进行处理

function handleConfRouStr(ori, config) {
    let str = ori.split('export default')
    let routeMap = eval('(' + str[1] + ')')
    if (routeMap.children) {
        routeMap.children = recurRoute(routeMap.children, `${config.routePath}/${config.routeName}`, config)
        // shell.echo('修改的路由>>>')
        // shell.echo(routeMap.toString())
    }
    routeMap = `{${StringRoute(routeMap)}}`
    var pagePath = config.addFile ? `${config.pagePath}/${config.name}` : config.pagePath
    let url = `@/views/${pagePath}/${config.VueName}`
    shell.echo("地址 :" + url)
    routeMap = routeMap.replace('newChangeUrl', url)
    routeMap = routeMap.replace('fileName', config.routeFile)
    ori = [str[0], routeMap].join('export default')
    return ori
}

9.递归路由数据，通过设置数据进行路由配置

/* 递归处理路由 将新增内容填充至合适位置 */
function recurRoute(children, routePath, config) {
    let routeLeve = routePath.split('/').filter((v, i) => i > 0)
    /* 修改路由之后的内容不变 */
    if (routeLeve.length <= 0) {
        return children
    }
    /* 找到需要继续向下找的对应路径 */
    if (children.some(item => item.path === routeLeve[0])) {
        /* 是否存在children */
        let result = children.map(item => {
            if (item.path === routeLeve[0] && routeLeve.length === 1) {
                item.path = routeLeve[0]
                item.name = config.routeName
                item.component = () => import( /* webpackChunkName: 'fileName' */ "newChangeUrl")
                item.meta = {}
                item.meta.title = config.title
                item.meta.icon = config.icon
                item.meta.auth = config.auth
                if (config.sidebar == true || config.sidebar == false) item.meta.sidebar = config.sidebar
                return item
            } else if (item.path === routeLeve[0] && routeLeve.length > 1) {
                if (!item.children) {
                    item.children = []
                    item.children = recurRoute(item.children, routeLeve.join('/'), config)
                    return item
                } else {
                    item.children = recurRoute(item.children, routeLeve.join('/'), config)
                    return item
                }
            } else {
                return item
            }
        })
        return result
    }
    /* 找不到对应路径路由，新增路由地址 */
    if (children.every(item => item.path !== routeLeve[0])) {
        /* 新增路由 */
        let routeMap = {}
        routeMap.path = routeLeve[0]
        routeMap.name = config.routeName
        routeMap.component = () => import( /* webpackChunkName: 'fileName' */ "newChangeUrl")
        routeMap.meta = {}
        routeMap.meta.title = config.title
        routeMap.meta.icon = config.icon
        routeMap.meta.auth = config.auth
        if (config.sidebar == true || config.sidebar == false) routeMap.meta.sidebar = config.sidebar
        children.push(routeMap)
        return children
    }
}

10.将对象编译为字符串，准备内容输出

/* 将路由json对象编译成字符串 */
function StringRoute(routeMap) {
    let str = "" + ' \r\n   '
    for (let k in routeMap) {
        if (k === "children") {
            routeMap[k] = StringRoute(routeMap[k])
            str += k + ":" + "[" + routeMap[k].toString() + "]" + "," + ' \r\n   ' + "    "
        } else if (routeMap[k] instanceof Array) {
            str += k + ":" + "['" + routeMap[k].toString() + "']" + "," + ' \r\n   ' + "    "
        } else if (typeof routeMap[k] == 'function') {
            str += k + ":" + routeMap[k].toString() + "," + ' \r\n   ' + "    "
        } else if (typeof routeMap[k] == 'object') {
            routeMap[k] = StringRoute(routeMap[k])
            if (!isNaN(Number(k)) && (routeMap.length - 1) == Number(k)) {
                /* 当前为数组 && 最后一个对象    不加逗号 */
                str += "{" + routeMap[k] + "}" + ' \r\n  ' + "    "
            } else if (!isNaN(Number(k)) && (routeMap.length - 1) != Number(k)) {
                /* 当前为数组 && 不是最后一个对象 */
                str += "{" + routeMap[k] + "}" + "," + ' \r\n  ' + "    "
            } else {
                /* 属于对象 */
                str += k + ":" + "{" + routeMap[k] + "}" + "," + ' \r\n  ' + "    "
            }
        } else {
            if (k == "sidebar") {
                str += k + ":" + routeMap[k] + "," + ' \r\n  ' + "    "
            } else {
                str += k + ":'" + routeMap[k] + "'" + "," + ' \r\n  ' + "    "
            }

        }
    }
    return str
}

11.完成路由配置，生成结束

/* 新增路由 */
function addToConf(config) {
    var routeFile = `./src/router/modules/${config.routeFile}.js`
    var result = fs.readFileSync(path.resolve(routeFile), "utf-8");
    let confStr = handleConfRouStr(result.toString(), config)
    fs.writeFileSync(path.resolve(path.resolve(routeFile)), confStr)
    shell.echo('结束生成页面')
    shell.echo('>>>>>>')
}

12.在package.json当中配置运行代码

 文章来源地址https://www.toymoban.com/news/detail-654928.html

"bpage": "node ./src/auto-build-page/build-page.js",

13.运行代码,生成vue文件并配置路由

npm run bpage

 

到了这里，关于自动化构建vue页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！