前言

后台系统中，表单需求不会少，表格 + 分页器 + 筛选条件。

（今天我们不加班）

（今天我们不开发）

以此为目标

写一个命令行，让他替我们‘自动开发’

基于 vue+element-ui 进行开发

参考的文章：

[vue-cli3 项目从搭建优化到 docker 部署](https://juejin.im/post/5c4a6fcd518825469414e062)

这篇文章对于学习 vue-cli3 脚手架有很大的帮助，受教了

操作指南

[toc]

安装

npm i automation-template -D
npm link automation-template // 此命令的作用是使操作命令可以在项目内直接使用

使用

以下命令缺一不可

autopage -h
Usage: autopage [options]

Options:
  -V, --version     output the version number
  -s --save [save]  文件输出的位置
  -n --name [name]  文件名称
  -k --key [key]    文件唯一标识
  -h, --help        output usage information
  
/**
*  @example  autopage --save src/main/views/userAnalysis/loadPageAnalysis --name dddd --key 11121212
**/

自定义功能
包括分页、筛选条件配置等
最后会输出结果 json，拿去给后端！！！交互

原理

其实很简单，整个插件分为两个大步骤

1、nodejs 进行命令行交互，并返回 JSON 数据格式
2、写一个标准的模板，获取参数生成文档流进行写入

nodejs 部分

主要使用两个插件进行交互

"dependencies": {
"chalk": "^2.4.2",  // 命令行有颜色
"commander": "^2.20.0", // 命令行 option
"inquirer": "^6.3.1" // 命令行交互}

具体不详细叙述，遇到的坑有

1、异步问题，使用 promise async 可以有效解决

2、nodejs 读写流部分

template 部分

目前的流程是基于 vue+elemet-ui 实现的
其实可以替换不同的 template，甚至可以配置。
后期会进化一下流程。
主要作用在于输出一个字符串，根据标准，能够节省我们引用组件，对于数据操作的繁琐性。

感谢我的伙伴～～ 这一部分是由她开发的。
嘻嘻嘻

并且最后进行自动路由挂载，其实方法有很多，这里提供一种

const components = require.context('./views/table', false, /\.vue$/);

写在后面

源码

github 项目地址
感谢我的伙伴和我一起完成这个小 demo。

一些废话

从事前端的时间并算不长，写的文章也比较粗浅。

刚刚从事前端的时候，会有一些迷茫，不知道前端的道路到底有多远。

所谓刚入江湖，天下无敌。

哈哈，在每天颠覆的前端技术栈折磨以后，才真正的开始热爱前端。

希望自己每天都能进步一点点，在公司里创造一个好的前端环境。

在未从事前端之前，我曾质疑热爱某种职业是虚幻的。

加油啊！！！