项目结构
build webpack的配置，在Vue cli项目里面，我们一般不需要改，如果需要自定义webpack loader，我们可以看build/webpack.base.conf.js文件。

config 项目的核心配置

src 我们的代码一般都写在这，里面有assets
.
├── build/ # webpack 配置文件
│ └── ...
├── config/
│ ├── index.js # 项目核心配置
│ └── ...
├── src/
│ ├── main.js # 程序入口文件
│ ├── App.vue # 程序入口vue组件（<template><script><style>）
│ ├── components/ # 组件
│ │ └── ...
│ └── assets/ # 模块资源 (会被webpack处理)
│ └── ...
├── static/ # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│ └── unit/ # 单元测试
│ │ ├── specs/ # 测试规范
│ │ ├── index.js # 测试入口文件
│ │ └── karma.conf.js # 测试运行配置文件
│ └── e2e/ # 端到端测试
│ │ ├── specs/ # 测试规范
│ │ ├── custom-assertions/ # 端到端测试自定义断言
│ │ ├── runner.js # 运行测试的脚本
│ │ └── nightwatch.conf.js # 运行测试的配置文件
├── .babelrc # babel 配置文件
├── .editorconfig # 编辑配置文件
├── .eslintrc.js # eslint 配置文件
├── index.html # index.html 入口模板文件，在开发环境中，webpack会生成相关资源，这些资源的URL会插入到模板来渲染最终的HTML
└── package.json # 运行的脚本与相关依赖（包含所有的依赖于构建命令）

生产环境（线上环境）、开发环境、测试环境
生产环境和开发环境的配置不一样，开发环境需要做一些debug之类的活，比如，Vue是生产环境所需要的依赖，而webpack不需要在生产环境打包，所以就有了dependencies和Devdependencies

vue-router 是在Vue的基础上，通过Vue.use方法才能用的，这也意味着它不能单独用，这跟渐进式是不是有点冲突。

index.html
app.vue
main.js
页面的执行顺序是这样下来的，index.html模板入口文件，从后缀名可以看出它是一个HTML的模板文件，这里是所有DOM的起点，所以肯定有下面这段代码。

  <div id="app">
    <router-view/>
  </div>

app.vue是入口文件Vue组件，这里是定义components里面模板的地方，所以页面是这样的结构。

  <template>
    <div id="app"> 这将会在浏览器中渲染出来，这里的ID好像不写app也没关系的
      <router-view/>
    </div>
  </template>
  <script>
  </script>
  <style>
  </style>

main.js整个项目的入口文件，创建整个项目的Vue实例，挂载Vue实例，需要引入Vue、模板是App，组件也是App，App就是app.vue文件，但是我不清楚组件为什么要这么写？

components: { App } 

app.vue，router里面的index.js，组件里面写的JS代码都要export default

在my-project项目中，会自动为每一个路由带上/#，然后才是我们自己定义的path，这是怎么设置的？

http://localhost:8080/#/la

<router-link>比<a>好在哪里
router和$route（路由信息对象）区别在哪里
$route.path

route map component
每一个route对应一个component，通过<router-view>渲染出来，

为什么在vue-cli项目中，不用<router-link>，只通过<router-view>，就可以把组件可以渲染出来？？？？？

用上name的话，一个route可以渲染多个component

初步理解redirect和alias
redirect 是有/a换成/b,URL地址换成/b，而且渲染的组件也换成/b
alias 是有/a换成/b，URL地址换成/b，但是渲染的组件不变