一、项目文件目录结构
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
