第一个webApp项目！

        开发的第一个webapp还是比较简单，但鉴于被坑了一回所以打算记录下来以帮助更多的同行在遇到我这个问题的时候能够顺利度过难关。

        我是从事android开发的，在webapp这一块可以说就是文盲，刚开始接触的时候走了一点弯路，在此也一并记录。

        首先，在我的概念里，webapp需要熟悉html5、js、css三门基础语法，这个说法并没有冲突，但是在我经过了大量尝试之后，我发现了对于webapp开发最快上手并不是这种传统的开发方式，因为有一种上手更快更便捷的方法能够让我们快速的进入到webapp开发领域，也就是我下面想要介绍的。

        我认为上手最快的开发方式是直接通过VUE、JS进行webapp开发上手，因为VUE开发学习简单、易上手，不管你是老司机还是新手都可以快速入门。下面是我对webapp开发的学历历程，希望有所帮助：

一、环境安装

       nodejs、npm环境安装 ：https://nodejs.org/en/集成包安装      

      安装完成之后可以使用终端进行检测：node -v   npm -v，显示版本号就说明安装成功。

二、VUE学习 

         1小时的入门学习（因为视频学习比较耗时间，所以我是用x2看完的）：慕课网课程视频：https://www.imooc.com/learn/980

         视频看完之后基本就能够运行简单的webapp项目了。

三、第一个项目创建

        有了npm环境我们就可以进行vue-cli安装：

        根目录全局安装vue-cli : npm install --global vue-cli      

        可以使用终端 vue -V 进行检测，显示版本号说明安装成功。

        切换到对应目录创建一个基于webpack 模板项目，项目名称叫todolist

        vue init webpack todolist

        切换到目录结构下运行项目：cd todolist

        [mobile:todolist mac$ npm run dev

        

        这样我们的web项目就创建好了，默认访问地址：http://localhost:8088/

 

四、下面我们来完善android部分     

       1.配置java环境

       2.下载安装jdk1.8以上、下载sdk

       3.下载开发工具：android studio 、eclipse  建议使用android studio

       4.项目运行设备：模拟器、手机、平板电脑

       5.Android基本常识：比如：四大组件的了解等…自行补脑!

      6.创建一个android项目，里面控件使用webview进行Url地址加载，使用url地址：http://localhost:8088/

      7.进行apk打包完成之后一个webapp项目就算开发完成。

五、爬坑处理

      主要问题还是集中在web项目：

      1.有人说可以进行离线编译，但我离线编译就是不能成功。

> todolist@1.0.0 dev /Users/mac/webApp_space/todolist

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 

 10% building modules 1/1 modules 0 activeevents.js:167                       i       throw er; // Unhandled 'error' event

      ^

 

Error: getaddrinfo ENOTFOUND localhost

    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:26)

Emitted 'error' event at:

    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1457:12)

    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:17)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! todolist@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

npm ERR! Exit status 1

npm ERR! 

npm ERR! Failed at the todolist@1.0.0 dev script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/mac/.npm/_logs/2018-11-13T06_52_41_316Z-debug.log

日志记录：

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using npm@6.4.1
3 info using node@v10.13.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle todolist@1.0.0~prestart: todolist@1.0.0
6 info lifecycle todolist@1.0.0~start: todolist@1.0.0
7 verbose lifecycle todolist@1.0.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle todolist@1.0.0~start: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/mac/webApp_space/todolist/node_modules/.bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/git/bin:/Users/mac/Library/Android/sdk/platform-tools:/usr/local/mysql/bin:/usr/local/bin/
9 verbose lifecycle todolist@1.0.0~start: CWD: /Users/mac/webApp_space/todolist
10 silly lifecycle todolist@1.0.0~start: Args: [ '-c', 'npm run dev' ]
11 silly lifecycle todolist@1.0.0~start: Returned: code: 1  signal: null
12 info lifecycle todolist@1.0.0~start: Failed to exec start script
13 verbose stack Error: todolist@1.0.0 start: `npm run dev`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:962:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid todolist@1.0.0
15 verbose cwd /Users/mac/webApp_space/todolist
16 verbose Darwin 17.5.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
18 verbose node v10.13.0
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 1
22 error todolist@1.0.0 start: `npm run dev`
22 error Exit status 1
23 error Failed at the todolist@1.0.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

此问题有人说是hosts的问题，需要关联hosts路径：

127.0.0.1 localhost

255.255.255.255 broadcasthost

我进行设置调试之后并没有效果，然后我考虑到是不是因为node、npm、webpack-dev-server版本不匹配的问题，然后对他们进行升级：

node升级：

$  sudo npm cache clean -f  清楚node缓存

sudo npm install n -g

指定版本升级：

$  sudo n stable  （安装node最新版本）

$  sudo n 8.9.4 （安装node指定版本8.9.4）

npm升级：

$npm cache clear --force 清楚npm缓存

npm install -g npm

升级到指定版本：

npm -g install npm@2.9.1

webpack安装更新：

npm install -g webpack

指定版本：

 npm i webpack-dev-server@3.1.9

考虑到缓存问题，进行过清理缓存，重装等等一系列操作，结果并没什么用。

后面通过种种分析以及大量的百度发现，其实就是hosts的问题，但是反复查看对比了hosts文件的关联设置是正确的。

实在是没撤了，最后面只有一个可能，那就是我使用的是wifi网络，是不是因为这个原因导致的问题，遂使用转换器接入网络的方式

进行测试，发现秒编译成功。

最后总结：咨询同行，他们手上的项目是可以进行离线编译的，但我的项目却不行，目前还没找到原因，在我的概念里编译也是需

要网络的，并且只能是连网线的那种，使用wifi可能会导致hosts指向地址错误，遂记录于此，希望遇到和我同样问题的朋友能够看

到我的这篇文章，尽早解决问题。

刚接触web项目，如果错误的地方望指正并谅解，谢谢。

 

==============================

今天找到了问题的根本，发现web项目在编译的时候是可以进行离线编译的，也就是说编译的时候是不需要网络的，主要原因是我使用的是mac电脑，在修改hosts文件的时候我直接拖出来修改替换（win电脑是没问题的），这样就改变了hosts文件的结构，导致系统无法识别，也就直接导致了设置localhost路径失败！找同事要一份相同的文件修改，注意要使用命令行修改，不能替换修改。最终问题解决。