前端工程化-自动生成页面

前言

咱们的项目是基于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>复制代码