专栏首页前端逗逗飞前端工程化-自动生成页面

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

前言

我们的项目是基于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组件:

<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文件:

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
script>
复制代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    按照上述操作以后,才可以正常访问新添加的页面,之后才开始对新页面进行正常开发。但是这样的机械化步骤我们完全可以用代码帮我们执行,更进一步,对于一些简单的页面,我...

    从入门到进错门
  • 使用API自动生成工具优化前端工作流

    在工作中,我们的前端工作流一般开始于前后端协商好Api文档之后,再针对这个Api文档做mock模拟数据,然后用做好的mock进行开发,后端开发完毕之后再改一下A...

    前端下午茶
  • React多页面应用4(webpack自动化生成多入口页面)

    本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包...

    前端人人
  • 前端成神之路-vue前端工程化

    小结:推荐使用ES6模块化,因为AMD,CMD局限使用与浏览器端,而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

    海仔
  • 前端自动化测试工具 overview

    本文作者:IMWeb 邝伟科 原文出处:IMWeb社区 未经同意,禁止转载 总结最近了解的前端测试的相关内容,如有问题,欢迎指出。 TDD vs BD...

    IMWeb前端团队
  • Gulp 前端自动化构建工具

    Gulp 是基于 NodeJS 的前端自动化构建工具,在项目开发过程中自动化地完成 html / css / js / image / sass / less ...

    Nian糕
  • 前端自动化测试工具 overview

    TDD(Test Drivin Development)是测试驱动开发,强调的是一种开发方式,以测试来驱动整个项目,即先根据接口完成测试编写,然后在完成功能时要...

    IMWeb前端团队
  • 前端自动化构建工具Grunt

    Grunt 是一个基于任务的JavaScript工程命令行构建工具。 Grunt和Grunt插件,是通过npm安装并管理的,npm是Node.js的包管理器。...

    奋飛
  • React多页面应用5(webpack4 多页面自动化生成多入口文件)

    本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

    前端人人
  • 工程化能力必备技能,前端 jenkins 自动化部署持续集成

    https://segmentfault.com/a/1190000038525808

    @超人
  • 使用gulp构建前端自动化工作流程

    最近在研究python的Django框架,有点头绪,开始记录一些bug和难搞的问题,后续看时间再记录从零开始python建站的过程。其实更熟悉的是Drupal...

    文科生的python自学之路
  • 文章页面目录自动生成方案

    需求本身并不难,不过想把这个东西做得通用一些,也就是以后再有别的页面需要加导航,不用再重新写很复杂的逻辑了。下面说一下具体实现思路,并且文末会给出简便易用的导航...

    winty
  • 大前端的自动化工厂(1)——Yeoman

    Yeoman是现代化前端项目的脚手架工具,用于生成包含指定框架结构的工程化目录结构。它是整个前端自动化工厂的第一站。

    大史不说话
  • 大前端的自动化工厂(3)—— babel

    babel是ES6+语法的编译器,官方网址:www.babeljs.io,用于将旧版本浏览器无法识别的语法和特性转换成为ES5语法,使代码能够适用更多环境。

    大史不说话
  • Phantomjs网页前端自动化测试之利器

    描述:Phantomjs /ˈfæntəm/js是一个基于webkit的JavaScript API实现网页前端自动化测试。它使用QtWebKit作为它核心浏览...

    WeiyiGeek
  • 前端工程化概述,带你全面深刻了解前端工程化思想

    大家好,今天我来和大家一起来了解前端工程化的知识,如有疑问和错误,欢迎指正,一起交流探讨哈!

    全栈加加
  • 使用nodejs自动生成前端项目组件

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • 前端自动化工具 -- Gulp 使用简介

    而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用。

    书童小二
  • 前端自动化工具 -- Grunt 使用简介

    grunt是基于nodejs的,所以需要一个 nodejs 环境,未了解的可以 来这看看

    书童小二

扫码关注云+社区

领取腾讯云代金券