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

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

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

3.3 如何在Vscode中运行项目