一、项目文件目录结构

mycli项目目录结构

目录/文件	说明
node_modules	npm 加载的项目依赖模块
public	公共资源目录
src/assets	静态资源目录，如图片、css、js等
src/components	项目公共组件目录
src/router	路由管理目录
src/store	vuex状态管理目录
src/views	页面文件 (.vue)
src/App.vue	根组件文件
src/main.js	项目核心入口文件
package.json	项目信息管理及依赖包管理文件
vue.config.js	项目配置文件

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

1）删除自动生成的 nav 布局，及其相关样式
2）仅留下 router-view 标签，该标签自动匹配默认主页对应的路由页面

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>英雄联盟</h1>
  </div>
</template>

MobaView.vue

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

MineView.vue

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

（2）配置路由

在 src/router/index.js 文件中配置路由，设置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，定义全局样式内容

<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;
}
/* 所有子页面，中间内容容器均使用 myContent 样式 */
.myContent{
  background-color: #ccc;
  flex-grow: 1;
}

四、制作头部、脚部组件

Vue组件基础 https://cn.vuejs.org/guide/essentials/component-basics.html#using-a-component

在 src/components 文件夹中，新建页头及页脚对应的两个布局文件，可删除自动生成的 HelloWorld.vue 文件

(1) 创建页头组件

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）创建页脚组件

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 />

  <!-- 中间内容容器使用 App.vue 中定义的 myContent 样式  -->
  <div class="myContent">
    <h1>英雄联盟</h1>
  </div>

  <!-- 页脚组件 -->
  <MyFooter />
</template>

<script setup>
  // 引入页头页脚组件文件
  import MyHeader from '@/components/MyHeader.vue'
  import MyFooter from '@/components/MyFooter.vue'
</script>

(4) 访问首页地址测试

每次启动时，端口号可能不同，需要根据启动结果提示的端口号访问

http://localhost:8082

Vue开发基础二：vue3页面与组件开发