前端工程化–Vue-CLI自动生成页面
- 2020 年 4 月 10 日
- 筆記
背景
我们的项目是基于vue-cli搭建的，每次需要新加一个页面需要操作以下步骤：
- 在views文件夹下面新建一个文件夹，用来存放新页面的
.vue文件。 - 需要在
routes.js文件里面新添加一个路由。
按照上述操作以后，才可以正常访问新添加的页面，之后才开始对新页面进行正常开发。但是这样的机械化步骤我们完全可以用代码帮我们执行，更进一步，对于一些简单的页面，我们甚至可以一键生成页面，包括从后端请求数据等操作。
接下来我就一步步讲一下怎么样自动生成页面。
自动生成页面
我们可以按照模板的方式生成想要的页面，我这里说两种页面，
- 一种是什么都没有的空白页，生成空白页就相当于是初始化一个新页面然后接着开发。
- 另一种是生成一些比较固定布局的简单页面，比如我们的业务中经常会有需求是写一个页面，就一个表格展示一下后端返回的数据，顶多就是再加个删除，添加和编辑。像这种简单的页面，完全可以使用代码自动生成。
我这里主要是使用配置文件的方式来设置我们的模板。
一、生成表格页
为了操作方便，我们可以在项目根目录新建一个auto-build-page文件夹用来存放我们之后要写的所有代码和模板。
1. 编辑配置文件
我们在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
配置的含义在注释中已经详细说明了。
2. 按照配置文件生成页面.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 }
3. 添加路由
接下来是添加路由，在此之前我们还是需要添加一个路由的模板文件，在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>
后续需要其他页面，只需要添加相应的模板，修改一下生成的函数即可。
