VUE启动流程vue-cli

先后顺序：package.json > webpack.dev.conf.js > config/*.js > config/index.js > index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > route 目录下的 index.js > HelloWorld.vue > 组成 index.html 单页SPA应用首页

SPA：单页面web应用，一般整个应用只有一个html页面，通过前端路由实现无刷新跳转。
Vue就是SPA应用的典型代表，特别是配合webpack等前端构建工具，加载页面的时候将JavaScript、CSS统一加载，然后通过监听url的hash实现内容切换。
优点：
无刷新切换内容，提高用户体验。
符合前后端分离的开发思想，通过ajax异步请求数据接口获取数据，后台只需要负责数据，不用考虑渲染。前端使用vue等MVVM框架渲染数据非常合适。
减轻服务器压力，展示逻辑和数据渲染在前端完成，服务器任务更明确，压力减轻。
后端数据接口可复用，设计JSON格式数据可以在PC、移动端通用。
缺点：
不利于SEO（搜索引擎优化），应用数据是通过请求接口动态渲染，不利于SEO。
首页加载慢，SPA下大部分的资源需要在首页加载，造成首页白屏等问题。

1. package.json
   在当前项目执行npm run dev的时候，会寻找 package.json 文件, 包含项目的名称版本、项目依赖等相关信息

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js"
},

2. webpack.dev.conf.js
   build/webpack.dev.conf.js 配置并启动 webpack-dev-server

const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

3. config/*.js
   config 目录下服务器环境的配置文件。
4. config/index.js
   index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是8080，这里可以进行修改。

host: 'localhost', 
port: 8080,

5. index.html
   index.html 的内容很简单，主要是提供一个 div的ID #app 给 vue 挂载。
6. main.js
   main.js 中， 引入了 vue、App 和 router 模块， 创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下， 并绑定了一个路由配置。
7. App.vue
   上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view，router-view 的内容将由 router 配置决定。
8. index.js
   查看 route 目录下的 index.js，我们发现这里配置了一个路由， 在访问路径 / 的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view中。
9. HelloWorld.vue
   HelloWorld 中主要是一些 Vue 介绍显示内容。
10. 页面组成
    所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。