vue去哪网项目开发二之单文件组件与vue中的路由

vue去哪网项目开发二
单文件组件与vue中的路由

19.png 20.png

el:'#app':指的是index文件中的id为app的div元素。
components：{App：App }:指的是 我在我的项目里用了一个局部组件名字叫做App 然后在我这个外层的vue实例里面给这个组件的名字也叫做App
template：‘<App/>’模板里面我们直接把App这个 局部组件渲染出来，

根实例就会做一件事情，把App这个局部组件 显示在页面上，那App这个局部组件从当前目录下的App的位置导入进来的即import App from ‘./App’ 21.png

当一个文件以vue结尾的时候，我们把这种文件叫做单文件组件，实际上里面放的是一个vue的组件

路由就是根据网址的不同，返回不同的内容给用户。 22.png 23.png
指的是当前项目的路由配置文件如下图： 24.png 25.png
通过上面几张图我们可以看到，路由的配置 都放在router这个文件夹下面的index.js文件里面,app.vue是整个应用的一个的一个根组件. 26.png