- App.vue
首先我們要明白的是，頁(yè)面是在 App.vue 開(kāi)始啟動(dòng)的
<template>
<div id="app">
<router-view/>
</div>
</template>
上面的代碼是 App.vue 的初始狀態(tài)骇两，需要注意的是 <template> 下還必須有一個(gè)父元素 <div> 包裹住頁(yè)面的元素寿酌，然后頁(yè)面中的所有元素都注入到這個(gè) div 中掉瞳；
其中的 <router-view/> 對(duì)應(yīng)的是 routers 中不同的路由(模塊)頁(yè)面，切換到不同的路由它抱，就把當(dāng)前的路由頁(yè)面 vue 結(jié)構(gòu)替換 App.vue 中的 <router-view/>秕豫。
- 組件化
如果項(xiàng)目中存在相似的地方，例如頁(yè)面的 header观蓄，不只在單個(gè)頁(yè)面存在混移，而且大致相同，我們可以將其封裝成組件侮穿。
那么該如何封裝組件呢歌径？我們可以在 components 文件夾里新建文件 組件.vue 并寫(xiě)好想要的結(jié)構(gòu)樣式等；
接下來(lái)就是如何去使用封裝好的組件呢亲茅？我們只需要在使用的地方將其引入并加入 component 屬性即可：
<template>
<div id="app">
<Header></Header> // 使用組件
<router-view/>
</div>
</template>
<script>
import Header from '@/components/header' // 將組件引入
export default {
name: "App", // 這里是 App.vue
components: {
Header // 加入到 components 屬性中
}
}
</script>
這里需要注意的是：vue 本身存在
<header>標(biāo)簽回铛，所以如果是將組件直接命名為header應(yīng)該會(huì)出錯(cuò)，所以這里使用了<Header>大寫(xiě)來(lái)區(qū)分克锣。
項(xiàng)目中公用的樣式和基礎(chǔ)樣式可以提取出來(lái)放到 assets 文件夾中茵肃，然后再在頁(yè)面中引入：
<style lang="less">
@import url("./assets/common.less");
// 等價(jià)于
@import "./assets/common.less"; // 這里必須寫(xiě)上分號(hào)
</style>
