初学VUE：VUE启动流程

vue启动流程

1. package.json
   在执行npm run dev的时候（启动vue项目的时候）,会在当前项目的目录中找到package.json，包含一些项目的版本信息、项目依赖及npm版本要求等

{	#版本信息
  "name": "test-ui",
  "version": "1.0.0",
  "description": "test uo project",
  "author": "test",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "echarts": "^4.2.0-rc.2",
    "element-ui": "^2.3.7",
    "js-cookie": "^2.2.0",
    "normalize.css": "^8.0.0",
    "nprogress": "^0.2.0",
    "v-charts": "^1.19.0",
    "v-distpicker": "^1.0.20",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  #项目依赖
  "devDependencies": {
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  #node npm版本要求
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

2.webpack.dev.conf.js
package.json里面，会找到这个webpack.dev.conf.js配置并启动webpack-dev-server

3. build/config.js*
webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。

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

5. index.html
index.html 的内容很简单，主要是提供一个 div 给 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.HelloWord.vue
HelloWorld 中主要是一些 Vue 介绍显示内容，可以是用户登录的首页。