搭建Vue+Express双模板脚手架00

背景

在不同的项目中好几次需要使用Vue前端+Node后端的工程实现，每一次都是从现有的类似项目中抄一份基础的框架代码过去，这种方式的弊端主要有两点：（1）麻烦，项目之间熟悉还比较好操作，那么对于那些同公司但是不熟悉的项目之间如何获取？（2）不够标准化、规范化，每个这种架构的工程项目理论上应该要保持基本的架构一致，而不是每个项目都各自搞一个版本。基于种种因素，就考虑是否可以参考Vue-cli写（改）一个脚手架Vue-Express-cli出来，所有需要使用类似架构的项目只需要全局安装该脚手架即可以命令的方式生成一个前端Vue，后端Node的标准工程。

分步走

1.读Vue-cli的源码以及webpack模板的源码，理清相互的调用关系。

2.修改express原生的server目录结构，使其更加符合目前项目使用的结构，进一步修改前端 和后端，使其可以相互配合得到一个前后端的demo。

3.将标准化的server代码置于模板中，与前端目录同级，并修改脚手架与模板代码，在使用脚手架生成项目代码时，能够直接生成前端（webapp）和后端（server）两个微服务。

4.改变脚手架，提供与用户的交互，可以选择是否需要node的server端，根据用户的选择进行渲染工程目录，若用户选择使用server，则自动帮助用户安装依赖。

推送脚手架与模板

将脚手架推送到NPM镜像源，并且将模板源代码推送到远程代码仓库，至此，其他人就可以全局安装脚手架并生成标准的Vue+Express项目代码结构。

总结

综上，针对每一个步骤，分别进行，大家在看的时候也不会感觉到太长，并且这样也会比较容易理解。