- App.vue
首先我们要明白的是,页面是在 App.vue 开始启动的
<template>
<div id="app">
<router-view/>
</div>
</template>
上面的代码是 App.vue 的初始状态,需要注意的是 <template>
下还必须有一个父元素 <div>
包裹住页面的元素,然后页面中的所有元素都注入到这个 div 中;
其中的 <router-view/>
对应的是 routers 中不同的路由(模块)页面,切换到不同的路由,就把当前的路由页面 vue 结构替换 App.vue 中的 <router-view/>
。
- 组件化
如果项目中存在相似的地方,例如页面的 header,不只在单个页面存在,而且大致相同,我们可以将其封装成组件。
那么该如何封装组件呢?我们可以在 components 文件夹里新建文件 组件.vue
并写好想要的结构样式等;
接下来就是如何去使用封装好的组件呢?我们只需要在使用的地方将其引入并加入 component 属性即可:
<template>
<div id="app">
<Header></Header> // 使用组件
<router-view/>
</div>
</template>