Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目

Electron + Vue + Vscode构建跨平台应用（一）知识点补充
Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建

  1： 什么是Node.js应用，创建Node.js应用

  既然Electron基于Chromium 和Node.js,那么我们还是稍微了解一下什么是Node应用，如何创建Node应用

  1.1 Node.js 应用是由哪几部分组成的：

  在我理解上Node.js应用就是驻扎在Server端的App，它主要由三部分组成

  . 引入 required 模块 这个就跟java当中的import一样

  . 创建服务器，通过这个我们可以简单开发一个服务端程序，你在开发移动App的时候，就不用费心思去让服务端同学配合你了，自己搞定就好

  . 接收请求与响应请求

  1.2 一个简单的Node.js App：

我们新建一个server.js的文件，文件内容如下

	var http = require('http');
	http.createServer(function (request, response) {
	    response.writeHead(200, {'Content-Type': 'text/plain'});
	    response.end('Hello World\n');
	}).listen(8888);

第1行，通过require引入http模块
第2行，调用createServer方法，创建一个服务器， 函数通过request, response 参数来接收和响应数据
第5行，使用 listen 方法绑定 8888 端口

在命令行中执行

node server.js

可以发现一个服务端程序已经运行起来，此时如果你通过浏览器访问http://127.0.0.1:8888/，那么他会给客户端返回 hello world，现在是不是觉得以后客户端开发不用等服务端开发好在调试了，我们可以自己搞了

  2： 如何利用Vue_cli创建Vue项目

  vue-cli是为了帮助我们快速构建Vue项目用的，那么他是不是有什么模板可供我们选择，来生成固定样式的代码

  2.1 vue 可用命令行

   . vue help ： 查看vue可用命令
   . vue list ： 查看可用的构建vue项目的模板
   . vue init ： 根据模板来创建vue项目

 这里我们输入 vue list来看下，vue_li给我们提供了哪些模板

可见vue_li为我们提供了6种模板供我们选择，不同的模板会生成不同的项目代码，这里我们将以webpack为模板，新建一个vue项目

  2.2 以webpack为模板新建vue项目

  在E盘electronworkspace文件夹中利用webpack模板新建一个名为vueProject的项目，接下来他会有一些后续信息需要输入

? Project name vuelearningproject
? Project description 这是我的vue学习项目
? Author huangwangjian
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? Yes? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

  第5行，Vue build是让你选择已那种模式构建项目，这里我们选择的是第一个，即搭建+编译
  第6行，是否使用路由
  第7行，是否预置ESLint来进行语法检测
  第11行，在创建完项目之后运行npm install来下载依赖

  在这里出现几个比较新颖的名字，他们是 路由 ， EsLint ，Nightwatch ， es2 他们具体是什么意思？

   . 路由： 允许我们通过不同的 URL 访问不同的内容，即通过push不同的url去访问不同的页面 vue 路由简介

   . EsLint： 代码规范和错误检查工具，类似checkstyle

   . es2：end to end，端到端，前端到后端整个过程的测试（也叫功能测试/连接测试）,由Nightwatch + Selenium 搭建的测试环境;

  现在一个完整的基于webpack模板的vue项目就新建好了

  3： 生成的项目导入到 Vscode

  3.1 如何导入vue项目

   . 打开vscode，选择文件，选择打开文件夹选项即可打开我们刚建立好的工程

  3.2 调整字体大小/字体样式

  . 打开设置页面，搜索font

  . 点击右侧的省略号，选择打开settings.json

  . 点击右侧的省略号，选择打开settings.json

  . 编辑区分右侧为默认用户设置，左侧为可编辑区；在左右修改如红色方框内容及表示修改字体问Courier New，字号为16；
  . 在左侧你可以发现"editor.fontFamily": “Consolas, ‘Courier New’, monospace”,出现了多个字体，他表示依次选择，如果有consolas则显示consolas，如果没有则查看Courier New

  3.3 如何在Vscode中运行项目

  上图是我们通过vscode软件打开的刚新建的vue项目，在终端下输入

npm run dev

  编译完成之后，会有如下提示

  此时在浏览器打开http://localhost:8080，就可以发现你的app主页

  3.4 如何打包Vue项目，打包生成了什么

   . 在终端下输入

npm run build

   编译完成之后，你会发现在工程里面多了一个dist的文件夹，该文件就是项目打包生成的内容；

   但是你会发现在浏览器中我们无法打开dist目录下生成的index.html；到这里产生了两个疑问：

  . npm run dev 和 npm run build有什么区别，他是怎么执行的的 ？

npm run dev 和 npm run build都是执行配置在package.json中的脚本

  . npm run dev是执行webpack命令，他可以在开发模式下运行项目，可以加载一些调试的模块如hotload

  . npm run build是执行build.js脚本，是项目打包命令，运行这个命令后会生成可以进行上线的打包文件

  . 为什么dist目录下的index.html无法打开？

  首先我们打开index.html文件看一下里面是什么内容

  很显然这里面body部分引入了很多js文件，看这个内容肯定无法显示出完整的html页面；因此我们一个载体，这个载体的目的是加载我们打包出来的内容，以显示完整的html页面，这个载体我们可以选择express-generator，express-generator的配置也比较简单，分如下几步

   . 1 npm 安装express
   . 2 创建express-generator工程
   . 3 npm 安装依赖
   . 4 拷贝上面生成dist文件夹到express-generator工程的public目录下
   . 5 执行npm run start运行dist文件夹中的html

   但是这里又产生了一个疑问，我们如何做到跨端？难道一个vue项目不能打包成exe, apk等跨端文件格式？

这里就要说到文章的重点了，Electron-vue