文章目录

• ​​一、删除 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>

没有重置页面边距的效果：

重置页面边距的效果：

​​返回顶部​​