前言
本文按源码文件分解解读了vue-hackernews-2.0开源项目中的一些知识点，作为对项目源码解读的细节补充。
package.json解读
该文件提供了四种命令
# install dependencies
npm install # or yarn
# serve in dev mode, with hot reload at localhost:8080
npm run dev
# build for production
npm run build
# serve in production mode
npm start
执行npm install
查找package.json中的dependencies和devDependencies字段，然后依次安装里面的模块。
Tips:dependencies与devDependencies的区别
devDependencies下的模块，是开发环境需要的依赖项，主要是webpack打包，js语言转码(ES6代码转为ES5代码)等模块，这些模块不会被部署到生产环境。
dependencies下的模块，是生产环境需要的依赖项，即运行该包时所需要的依赖项。
这里可能有疑问，难道生产环境不需要webpack，js语言转码等模块吗？
答案是：需要，但这些模块不需要部署到生产环境，仅仅在生成生产环境所需的部署文件时被使用。
执行npm run dev
"scripts": {
"dev": "node server",
"start": "cross-env NODE_ENV=production node server",
"build": "rimraf dist && npm run build:client && npm run build:server",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
},
查找package.json中的scripts字段对应的对象，找到dev属性，并执行dev属性对应的脚本：node server即node server.js，即执行server.js
执行npm run build
同样，找到build属性，并执行：rimraf dist && npm run build:client && npm run build:server，即删除dist目录并执行npm run build:client和npm run build:server
对应功能是：设置环境变量为production，同时webpack根据config.js配置打包生产环境所需的部署文件
执行npm start
同样，找到start属性，并执行：cross-env NODE_ENV=production node server，即通过cross-env模块设置NODE_ENV环境变量为production，并执行node server
Tips:为什么是
npm start而不是npm run start?
1.两者都可以，因为start为npm内置支持的命令，所以可以直接执行，参见npm --help
2.其他三个命令都不是内置命令，需要经由npm run去执行。
index.template.html解读
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="shortcut icon" sizes="48x48" href="/public/logo-48.png">
<meta name="theme-color" content="#f60">
<link rel="manifest" href="/manifest.json">
这段html代码功能：移动端浏览器适配及PWA适配
Tips:PWA (progressive web apps)-本质上仍然是个网站，但允许直接被放置到移动设备的桌面上（例如通过chrome浏览器的Add to HomeScreen），而不需要用户去app store下载安装应用才能使用，而这与一个网址的快捷方式完全不同，因为这种web app提供了一种接近原生app的用户体验。
接下来我们在手机(Nexus 6P/Android 7.1)上分别示范下浏览器体验及PWA体验分别是怎样的。
浏览器体验：
在Chrome浏览器地址栏中输入项目地址，效果如下：
PWA体验：
通过Chrome的Add to Homescreen功能，将该站点添加到桌面。效果如下：
点击桌面生成的应用图标后，可以看到具备了过渡启动图界面，而且进入后，不再是浏览器内看网站的体验，地址栏消失了，看起来像是一个原生应用。
现在我们对manifest.json配置做一下改动，来学习几个参数的作用。以下三张电机图标后的启动图界面变更分别对应manifest.json的如下三种配置改动：
//1. 主题色：绿色 启动图背景色：白色
"background_color": "#f2f3f5",
"display": "standalone",
"theme_color": "#48BB74"
//2. 主题色：绿色 启动图背景色：绿色
"background_color": "#48BB74",
"display": "standalone",
"theme_color": "#48BB74"
//3. 主题色：橙色 启动图背景色：橙色
"background_color": "#f60",
"display": "standalone",
"theme_color": "#f60"
Tips:
这里用到的manifest.json不要与作为离线缓存的manifest混淆。
最后来对比感受下非PWA的百度站点VsPWA站点的hackernews在Add to HomeScreen后，体验上的差异。
概括下主要的差异：
1.增加了同原生应用一样的启动图过渡界面
2.进入站点后，像是原生应用一样，没有了地址栏等浏览器体验的痕迹。
3.从点击图标开始到浏览页面，整体的体验上，PWA更接近原生应用。
注：PWA更多的特性这里并未应用，其实PWA可以做的更多。
