0
点赞
收藏
分享

微信扫一扫

【Vue】Vue 项目初始化



文章目录

  • ​​一、删除 Helloword.vue​​
  • ​​二、删除 views 中的文件​​
  • ​​三、新建 homePage.vue​​
  • ​​四、修改路由文件​​
  • ​​五、清空默认根组件、项目样式​​

【Vue】Vue 项目初始化_重置

如图所示,是我们创建完 Vue 项目后跳转的视图,可以发现其中的内容与我们的项目相关性不大,所以一我们可以通过配置对其进行修改~

一、删除 Helloword.vue

1.删除 src文件夹下的 ​cpmponents文件夹​下的 ​Helloword.vue​ 文件

【Vue】Vue 项目初始化_边距_02

二、删除 views 中的文件

1、删除 view下的 ​AboutView.vue​​HomeView.vue​ 文件

【Vue】Vue 项目初始化_边距_03

三、新建 homePage.vue

1、在views中新建我们的页面文件 ​homePage.vue​文件(默认的配置即可):

【Vue】Vue 项目初始化_边距_04

<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

修改配置好之后的效果如图所示:

【Vue】Vue 项目初始化_返回顶部_05

五、清空默认根组件、项目样式

1、修改根组件默认显示内容与初始化项目样式

  • 全局的根组件默认显示内容设置在 App.vue 文件中,上面展示的页面上头部的 ​Home|About​就包含在其中,我们将其删除
  • 还有一些默认的页面css样式,也一并清除
  • 同时重置浏览器的布局(边距)

【Vue】Vue 项目初始化_vue_06

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

<style lang="less">*{
margin: 0px;
padding: 0px;
box-sizing: border-box;//border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。
}</style>

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

【Vue】Vue 项目初始化_重置_07

重置页面边距的效果:

【Vue】Vue 项目初始化_边距_08

​​返回顶部​​


举报

相关推荐

0 条评论