前端工程化-自动生成vue页面
前言
我们的项目是基于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组件:
<template>
<div class="deduction">
<header>%title%</header>
<main>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="expand">
<template v-slot="props">
<pre v-html="formatOther(props.row)"></pre>
</template>
</el-table-column>
<el-table-column v-for="(item,index) in tableDataHeader" :key="index" :prop="item.prop" :label="item.col">
<template slot-scope="scope">
{{scope.row[scope.column.property]}}
<!-- {{scope.row}}
{{scope.column.property}} -->
<!-- 渲染对应表格里面的内容 -->
</template>
</el-table-column>
</el-table>
</main>
</div>
</template>
<script>
import axios from "axios";
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();
}
};
</script>
复制代码
可以看见表格页模板里面有很多两个%包起来的变量,这是等下我们需要按照配置文件进行替换的变量。 我们继续在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文件:
<template>
<div>
hello world
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
mounted() {}
};
</script>