从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、web端（一）

摘要：随着前端技术的飞速发展，越来越多的技术领域开始被前端工程师踏足。从NodeJs问世至今，各种前端工具脚手架、服务端框架层出不穷，“全栈工程师”对于前端开发者来说，再也不只是说说而已。在NodeJs及其衍生技术高速发展的同时，Nw和Electron的问世，更是为前端发展提速不少，依稀记得哪位前辈说过，“能用Js改写的，终将用Js改写”，这不，客户端来了！使用Electron也有一段时间了，各种简单复杂的问题，也都或多或少的遇见过，下决心整理出一套客户端模板出来，一是加深一下自己的理解，二是供小伙伴们参考指正。本文选择Electron6.x+Webpack4+vue全家桶为技术栈，一套代码可以分别打包在客户端和web端，结合webpack，支持热更新，打包为exe安装包，过程中会涉及vue全家桶、electron的常见问题、配置和优化，webpack的对应配置等。从零开始，把electron、vue、webpack统统纳入自己的知识体系！项目完整代码：https://github.com/luohao8023/electron-vue-template

说明：本着模拟从零开始的过程，最开始的架构或者代码设计可能不是最优解，有可能只适用于当前情况，后续会一步步完善，也可能会部分重构，关键是体会这个从零到一，再到完善的过程。

下面开始~~~

一、新建工程

　　1、说好的从零开始，就从新建文件夹开始吧，新建electron-vue-template文件夹。

　　2、cmd进入文件夹，执行npm init，初始化一个node项目。

　　3、完善工程目录结构：

　　项目根目录的结构大致就是上面这个样子，后续完善过程中，会在对应目录下增加相应的子目录，后面会有讲到。下面介绍一下各个目录的作用：

　　　　app：webpack编译后的整个项目的代码，包