文章目录
- 一、删除 Helloword.vue
- 二、删除 views 中的文件
- 三、新建 homePage.vue
- 四、修改路由文件
- 五、清空默认根组件、项目样式
如图所示,是我们创建完 Vue
项目后跳转的视图,可以发现其中的内容与我们的项目相关性不大,所以一我们可以通过配置对其进行修改~
一、删除 Helloword.vue
1.删除 src文件夹
下的 cpmponents文件夹
下的 Helloword.vue
文件
二、删除 views 中的文件
1、删除 view
下的 AboutView.vue
、HomeView.vue
文件
三、新建 homePage.vue
1、在views
中新建我们的页面文件 homePage.vue
文件(默认的配置即可):
<template>
<div>第一个页面</div>
</template>
<script>export default {};</script>
<style>
</style>
四、修改路由文件
1、修改router
下的index.js
配置路由文件
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/page',
name: 'About',
component: ()=> import('../views/homePage.vue')
},
// 设置路由重定向
{
path: '/',
redirect:"/page"
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default
修改配置好之后的效果如图所示:
五、清空默认根组件、项目样式
1、修改根组件默认显示内容与初始化项目样式
- 全局的根组件默认显示内容设置在
App.vue
文件中,上面展示的页面上头部的 Home|About
就包含在其中,我们将其删除 - 还有一些默认的页面
css样式
,也一并清除 - 同时重置浏览器的布局(边距)
<template>
<router-view/>
</template>
<style lang="less">*{
margin: 0px;
padding: 0px;
box-sizing: border-box;//border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。
}</style>
没有重置页面边距的效果:
重置页面边距的效果:
返回顶部