项目结构
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，但是渲染的组件不变
网友评论