首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端工程化-自动生成vue页面

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

作者头像
江一铭
发布于 2022-06-16 02:04:09
发布于 2022-06-16 02:04:09
1.4K11
代码可运行
举报
文章被收录于专栏:技术社区技术社区
运行总次数:1
代码可运行

前言

我们的项目是基于vue-cli搭建的,每次需要新加一个页面需要操作以下步骤:

  • 在views文件夹下面新建一个文件夹,用来存放新页面的.vue文件。
  • 需要在routes.js文件里面新添加一个路由

按照上述操作以后,才可以正常访问新添加的页面,之后才开始对新页面进行正常开发。但是这样的机械化步骤我们完全可以用代码帮我们执行,更进一步,对于一些简单的页面,我们甚至可以一键生成页面,包括从后端请求数据等操作。

自动生成页面

我们可以按照模板的方式生成想要的页面,我这里说两种页面,

  • 一种是什么都没有的空白页,生成空白页就相当于是初始化一个新页面然后接着开发。
  • 另一种是生成一些比较固定布局的简单页面,比如我们的业务中经常会有需求是写一个页面,就一个表格展示一下后端返回的数据,顶多就是再加个删除,添加和编辑。像这种简单的页面,完全可以使用代码自动生成。

我这里主要是使用配置文件的方式来设置我们的模板。

生成表格页

为了操作方便,我们可以在项目根目录新建一个auto-build-page文件夹用来存放我们之后要写的所有代码和模板。

编辑配置文件

我们在auto-build-page文件夹下新建一个addConfig.js文件,里面存放我们定义的配置:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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组件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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文件,里面写的是整个自动化操作的代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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模块完成。 读取模板文件,并根据配置文件,对模板文件里面的变量进行替换:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)
  })
}
复制代码

根据配置文件替换%包起来的变量:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  path: '%path%',
  component: Home,
  name: '%name%',
  redirect: { path: '%repath%' },
  children: [
    {
      path: '%repath%',
      component: (resolve) =>
        require(['%requirepath%'], resolve),
      name: '%name2%'
    }
  ]
},
复制代码

里面根据我们路由规则,写入模板。 回到build-page.js文件,我们继续书写添加路由的操作,我们先读取路由模板:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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文件里面:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 自动生成页面--自动添加路由
import addRoute from './addRoute'
let routes = []
let lastRoute = routes.concat(addRoute)
export default lastRoute

addRoute.js:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const addRoute = [
  // add-flag
  // 不能删除
]
export default addRoute

接下来我们需要在package.json文件里面的scripts里面添加运行的脚本,这样,只需要执行npm run 命令就可以运行自动生成的操作:

代码语言:javascript
代码运行次数:0
运行
复制

"scripts": { "dev": "vue-cli-service serve", "build": "vue-cli-service build", "bpage": "node ./auto-build-page/build-page.js" },

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
现在执行npm run bpage 控制台输出:
>>>>>>
开始新建页面
页面地址:./src/views/autoTablepage
页面地址:./src/views/autoHellopage
开始新增路由……
路由添加成功!
结束生成页面
>>>>>>
复制代码

生成空白页

只需要添加一个空白页的模板就行,在auto-build-page文件夹下新建一个template-helloword.vue文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div>
    hello world
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-07-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
很6
很6
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
前端工程化-自动生成页面
按照上述操作以后,才可以正常访问新添加的页面,之后才开始对新页面进行正常开发。但是这样的机械化步骤我们完全可以用代码帮我们执行,更进一步,对于一些简单的页面,我们甚至可以一键生成页面,包括从后端请求数据等操作。
前端逗逗飞
2021/04/30
9450
前端工程化--Vue-CLI自动生成页面
按照上述操作以后,才可以正常访问新添加的页面,之后才开始对新页面进行正常开发。但是这样的机械化步骤我们完全可以用代码帮我们执行,更进一步,对于一些简单的页面,我们甚至可以一键生成页面,包括从后端请求数据等操作。
从入门到进错门
2020/04/10
2.2K0
Tomcat下部署vue项目[history模式]
第一种: IP+端口直接访问的方式,如 http://192.168.1.107:8080/ 第二种:IP+端口+项目名,如 http://192.168.1.107:8080/saas/
leader755
2022/03/07
3.5K0
Tomcat下部署vue项目[history模式]
解决:VUE同一路由强制刷新页面
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/157499.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/14
3.6K0
前端工程化-打造企业通用脚手架
随着前端工程化的概念越来越深入FEer心,前端开发过程的技术选型、代码规范、构建发布等流程的规范化、标准化是需要工具来保驾护航的,而不是每次都对重复工作进行手动复制粘贴。脚手架则可作为工程化的辅助工具,从很大程度上为前端研发提效。
Careteen
2022/02/14
8570
前端工程化-打造企业通用脚手架
10分钟简单的了解下 Vite 相关内容
Vite已经出来很久了,新版本也比较稳定,有没有打算入手一下,推荐下面这篇文章。
前端达人
2021/08/10
8330
Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由
2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。
FungLeo
2022/05/05
4290
Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由
Vue cli 配置与列表的渲染 原
安装完Vue cli后会生成很多文件,大部分文件我们不需要管它,我们往往需要修改的是跟目录下的
tianyawhl
2019/04/04
5330
Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。
FungLeo
2022/05/05
5720
Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
Vue Element入门教程
其中node_modules是你安装的依赖,也就是你执行完npm install命令安装的东西;assets可以存放一些公共的样式、图标等;components里放的是你写的组件;router放的是页面的路由;views里可以放你自己写的一些页面;App.vue是页面的入口;main.js是js文件的入口,你需要在这里面把你写的js引进去;static可以放一些图片、图标等。
全栈程序员站长
2022/08/26
4490
Vue Element入门教程
关于VUE前端项目的优化
今天终于得空了,我要把 kui 说明文档这个项目优化下。打开太慢了,就是这个 http://k-ui.cn
chuchur
2022/10/25
4690
关于VUE前端项目的优化
vue-spa项目在github实现配置展示
也许你肯定熟悉github-page ,并知道github支持自定义域名,前提是你新建了这样的一个同名git项目,名称是你的git用户名 ,格式是这样的name.github.io,然后可以通过name.github.io/proname访问到其他的项目。
RobinsonZhang
2018/08/28
7850
vue-spa项目在github实现配置展示
如何更有效率和质量地开发Vue项目
自总结完了上篇前端工程化的思想,并在vue全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发vue项目,以及其中踩过的一个个坑。。。 基于vue-cli的自定义模板(Custom Templates)
用户1065635
2019/03/21
1K0
如何更有效率和质量地开发Vue项目
Vue项目预渲染机制引入实践
周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末..... 这篇文章就记录一下最后是怎么配置的 T.T
前端下午茶
2018/10/22
2K0
vue 随记(6):构建的艺术
做过vue项目的人都知道,当项目越变越大,或者变成多页面应用时,热更新打包速度奇慢无比,每次保存都要几分钟。
一粒小麦
2020/07/28
1K0
vue 随记(6):构建的艺术
【Webpack】315- 手把手教你搭建基于 webpack4 的 vue2 多页应用
前司和现司都会存在这种业务场景:有很多 H5 页面是不相关的,如果使用 SPA 的话,对于很多落地页和活动页不太友好,有一些纯前端页面加载过慢,所以就萌生了创建一个多页面 MPA 的框架。
pingan8787
2019/08/14
1.2K0
使用 Vue.js 和 Flask 实现全栈单页面应用
在本教程中,我将向大家展示如何使用前端的 Vue.js 单页面应用和后端的 Flask 进行交互。
疯狂的技术宅
2019/03/27
2.9K0
使用 Vue.js 和 Flask 实现全栈单页面应用
快速配置webpack多入口脚手架
当我们基于vue开发单个项目时,我们会init一个vue-cli,但当我们想在其他项目里共用这套模板时,就需要重新init一个,或者clone过来,这非常不方便,而且当多人开发时,我们希望所有的开发代码都在一个git目录下,这时就有了对webpack进行配置的需求,当有些页面需要多入口时,我们又产生了对多入口配置的需求,这里提供一种配置方案,希望能帮助到有需要的人,废话不多说,我们开始吧!
吴裕超
2019/01/02
9600
从 0 搭建 Vite 3 + Vue 3 前端工程化项目
Vue 3 正式版已经发布有一段时间了,随着 Vite 脚手架注定成为下一代前端工具链,许多用户都想基于 Vite 来构建 Vue 项目,如果想基于 Vite 构建 Vue 3 项目,社区模板完全满足您的需求,如果想构建 Vite 3 + Vue 3 + JavaScript 项目,那社区模板不太能满足您的需求,因为社区模板提供 Vue 3 项目几乎是基于 Vite 2 + TypeScript 构建,对于不熟悉 TypeScript 语言的用户不是很友好,因此接下来从 0 开始手把手带大家搭建一套规范的 Vite 3 + Vue 3 + JavaScript 前端工程化项目环境。
前端老道
2023/02/27
3.8K0
从 0 搭建 Vite 3 + Vue 3 前端工程化项目
vite+Vue3+ts搭建通用后台管理系统
本文主要讲解使用vite来作为脚手架开发。(动手能力强的小伙伴完全可以使用vite做开发服务器,使用webpack做打包编译放到生产环境)
ConardLi
2021/09/08
7070
vite+Vue3+ts搭建通用后台管理系统
相关推荐
前端工程化-自动生成页面
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验