一、項目文件目錄結(jié)構(gòu)

mycli項目目錄結(jié)構(gòu)

二、修改根組件文件 App.vue

1）刪除自動生成的 nav 布局，及其相關(guān)樣式
2）僅留下 router-view 標簽，該標簽自動匹配默認主頁對應(yīng)的路由頁面

• App.vue

<template>
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

三、新建頁面及配置路由

（1）新建頁面文件

在 src/views 目錄下新建三個頁面文件，可刪除自動生成的 HomeView.vue 及 AboutView.vue 文件

• LolView.vue

<template>
  <div>
    <h1>英雄聯(lián)盟</h1>
  </div>
</template>

• MobaView.vue

<template>
  <div>
    <h1>王者榮耀</h1>
  </div>
</template>

• MineView.vue

<template>
  <div>
    <h1>我的</h1>
  </div>
</template>

（2）配置路由

在 src/router/index.js 文件中配置路由，設(shè)置LolView為默認首頁

import { createRouter, createWebHistory } from 'vue-router'
import LolView from '../views/LolView.vue'

const routes = [
  {
    path: '/',
    name: 'lol',
    component: LolView
  },
  {
    path: '/moba',
    name: 'moba',
    component: () => import('../views/MobaView.vue')
  },
  {
    path: '/mine',
    name: 'mine',
    component: () => import('../views/MineView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

（3）訪問地址并測試

默認首頁： http://localhost:8080/

王者榮耀頁面： http://localhost:8080/moba

我的 頁面：http://localhost:8080/mine

三、定義全局樣式

修改根組件文件 App.vue，定義全局樣式內(nèi)容

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, #app{
  width: 100%;
  height: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* 定義縱向彈性布局 */
  display: flex;
  flex-direction: column;
}
/* 所有子頁面，中間內(nèi)容容器均使用 myContent 樣式 */
.myContent{
  background-color: #ccc;
  flex-grow: 1;
}

四、制作頭部、腳部組件

Vue組件基礎(chǔ) https://cn.vuejs.org/guide/essentials/component-basics.html#using-a-component

在 src/components 文件夾中，新建頁頭及頁腳對應(yīng)的兩個布局文件，可刪除自動生成的 HelloWorld.vue 文件

(1) 創(chuàng)建頁頭組件

• MyHeader.vue 文件

<template>
    <div class="myHearder">
        <div>{{ strHeader }}</div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    const strHeader = ref("WellCome to MyGame !");
</script>

<style>
    .myHearder{
        height: 140px;
        width: 100%;
        display: flex;
        align-items: center;
    }
</style>

（2）創(chuàng)建頁腳組件

• MyFooter 文件

<template>
    <div class="myFooter">
        <div>MyGame @ 2023</div>
    </div>
</template>

<style>
    .myFooter{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        height: 100px;
        color: white;
        background-color: #666;
    }
</style>

（3）在頁面中引入組件

在 src/views/LolView.vue 文件中，引入頁頭與頁腳組件

<template>
  <!-- 頁頭組件 -->
  <MyHeader />

  <!-- 中間內(nèi)容容器使用 App.vue 中定義的 myContent 樣式  -->
  <div class="myContent">
    <h1>英雄聯(lián)盟</h1>
  </div>

  <!-- 頁腳組件 -->
  <MyFooter />
</template>

<script setup>
  // 引入頁頭頁腳組件文件
  import MyHeader from '@/components/MyHeader.vue'
  import MyFooter from '@/components/MyFooter.vue'
</script>

(4) 訪問首頁地址測試

• 每次啟動時，端口號可能不同，需要根據(jù)啟動結(jié)果提示的端口號訪問

http://localhost:8082