前言

我们的项目是基于vue-cli搭建的，每次需要新加一个页面需要操作以下步骤：

在views文件夹下面新建一个文件夹，用来存放新页面的.vue文件。

需要在routes.js文件里面新添加一个路由。

按照上述操作以后，才可以正常访问新添加的页面，之后才开始对新页面进行正常开发。但是这样的机械化步骤我们完全可以用代码帮我们执行，更进一步，对于一些简单的页面，我们甚至可以一键生成页面，包括从后端请求数据等操作。

自动生成页面

我们可以按照模板的方式生成想要的页面，我这里说两种页面，

一种是什么都没有的空白页，生成空白页就相当于是初始化一个新页面然后接着开发。

另一种是生成一些比较固定布局的简单页面，比如我们的业务中经常会有需求是写一个页面，就一个表格展示一下后端返回的数据，顶多就是再加个删除，添加和编辑。像这种简单的页面，完全可以使用代码自动生成。

我这里主要是使用配置文件的方式来设置我们的模板。

生成表格页

为了操作方便，我们可以在项目根目录新建一个auto-build-page文件夹用来存放我们之后要写的所有代码和模板。

编辑配置文件

我们在auto-build-page文件夹下新建一个addConfig.js文件，里面存放我们定义的配置：

var addConfig = [

{

// 测试生成表格页

open: true, // 参与生成 false表示改配置不参与生成页面

helloworld: false, // 是否是空白页

desc: '自动生成表格页', // 页面描述

name: 'autoTablepage', // 页面名称

getlist: {

// 表格数据请求相关

method: 'GET',

url: 'http://test.req/getlist',

},

},

{

// 测试生成空白页

open: true,

helloworld: true,

desc: '自动生成空白页面',

name: 'autoHellopage',

},

]

module.exports = addConfig

复制代码

配置的含义在注释中已经详细说明了

按照配置文件生成页面.vue文件

我们在auto-build-page文件夹下新建一个template-table.vue文件，存放我们的表格页模版，我们使用的是element-ui组件：

const CONFIG={

method:"%method%",

geturl:"%geturl%",

};

export default {

data() {

return {

tableData: [],

tableDataHeader: [],

};

},

methods: {

formatOther(row) {

return JSON.stringify(row, null, 2);

},

getList(params={}) {

axios({

method: CONFIG.method,

url: CONFIG.geturl,

data: params

}).then(res=>{ // 后端返回的数据需要按照这种格式

console.log(res);

this.tableData=res.data.tableData;

this.tableDataHeader=res.data.tableDataHeader;

});

}

},

mounted(){

this.getList();

}

};

复制代码

可以看见表格页模板里面有很多两个%包起来的变量，这是等下我们需要按照配置文件进行替换的变量。

我们继续在auto-build-page文件夹下新建一个build-page.js文件，里面写的是整个自动化操作的代码

var addConfig = require('./addConfig')

var fs = require('fs')

var path = require('path')

var shell = require('shelljs')

shell.echo('>>>>>>')

shell.echo('开始新建页面')

addConfig.forEach((ele) => {

if (ele.open) {

buildPage(ele)

}

})

复制代码

我们循环配置文件里面的配置，支持生成多个页面。对文件的操作我们直接使用node的fs模块完成。

读取模板文件，并根据配置文件，对模板文件里面的变量进行替换：

function buildPage(config){

var paths = path.resolve(`./src/views/${config.name}`)

shell.echo('页面地址:' + paths)

mkdirSync(paths, function(){

var str = ''

if (config.helloworld) {

// 新建空白页，读取空白页模版

str = handleStr(

readF(path.resolve('./template-helloworld.vue')),

config

)

} else {

str = handleStr(

readF(path.resolve('./template-table.vue')),

config

)

}

// 写入文件

writeF(paths + '/index.vue', str)

shell.echo('开始新增路由……')

addRou(`./views/${config.name}/index.vue`, config)

})

}

复制代码

根据配置文件替换%包起来的变量：

function handleStr(str, config){

if (config.helloworld) {

return str

}

str = str.replace('%title%', config.desc)

str = str.replace('%method%', config.getlist.method)

str = str.replace('%geturl%', config.getlist.url)

return str

}

复制代码

添加路由

接下来是添加路由，在此之前我们还是需要添加一个路由的模板文件，在auto-build-page文件夹下新建一个template-route.txt文件：

{

path: '%path%',

component: Home,

name: '%name%',

redirect: { path: '%repath%' },

children: [

{

path: '%repath%',

component: (resolve) =>

require(['%requirepath%'], resolve),

name: '%name2%'

}

]

},

复制代码

里面根据我们路由规则，写入模板。

回到build-page.js文件，我们继续书写添加路由的操作，我们先读取路由模板：

function addRou(paths, config){

var templateStr = handleRouStr(

readF(path.resolve('./auto-build-page/template-route.txt')),

config,

paths

)

// 添加到路由文件

addToConf(templateStr)

}

function handleRouStr(str, config, paths){

str = str.replace(/%path%/g, `/${config.name}`)

str = str.replace(/%name%/g, config.desc)

str = str.replace(/%name2%/g, `${config.desc}首页`)

str = str.replace(/%repath%/g, `/${config.name}/index`)

str = str.replace(/%requirepath%/g, paths)

return str

}

复制代码

将路由添加到vue项目src下的routes.js文件里面：

function addToConf(str){

str += '// add-flag' // 添加的位置标记

var confStr = handleConfRouStr(readF(path.resolve('./src/addRoute.js')), str)

writeF(path.resolve('./src/addRoute.js'), confStr)

shell.echo('路由添加成功!')

shell.echo('结束生成页面')

shell.echo('>>>>>>')

}

function handleConfRouStr(ori, str){

ori = ori.replace('// add-flag', str)

return ori

}

复制代码

我这里是为了避免原来的routes.js文件，我新建了一个addRoute.js文件，然后在routes.js文件中引入，和原来的合并以下即可。

routes.js：

// 自动生成页面--自动添加路由

import addRoute from './addRoute'

let routes = []

let lastRoute = routes.concat(addRoute)

export default lastRoute

复制代码

addRoute.js：

const addRoute = [

// add-flag

// 不能删除

]

export default addRoute

复制代码

接下来我们需要在package.json文件里面的scripts里面添加运行的脚本，这样，只需要执行npm run 命令就可以运行自动生成的操作：

复制代码

"scripts": {

"dev": "vue-cli-service serve",

"build": "vue-cli-service build",

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

},

现在执行npm run bpage 控制台输出：

>>>>>>

开始新建页面

页面地址:./src/views/autoTablepage

页面地址:./src/views/autoHellopage

开始新增路由……

路由添加成功!

结束生成页面

>>>>>>

复制代码

生成空白页

只需要添加一个空白页的模板就行，在auto-build-page文件夹下新建一个template-helloword.vue文件：

data() {

return {};

},

methods: {},

mounted() {}

};

复制代码