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

前言

我们的项目是基于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文件，存放我们的表格页模版&