《实战：如何搭建一个完整的 Vue2.0 项目》- 3、清理Vue的默认文件和配置

最新推荐文章于 2023-05-13 12:00:58 发布

AvatarGiser

最新推荐文章于 2023-05-13 12:00:58 发布

阅读量680

点赞数

分类专栏：《实战：如何搭建一个完整的 Vue2.0 项目》文章标签： vue router

本文链接：https://blog.csdn.net/sinat_31213021/article/details/114986556

版权

《实战：如何搭建一个完整的 Vue2.0 项目》专栏收录该内容

13 篇文章 3 订阅

订阅专栏

Vue 项目创建时会带一些默认文件和样式，我们在项目中不会使用，可删除和修改。

1、删除文件

src/views/About.vue
src/components/HelloWorld.vue
src/assets/logo.png

2、修改 src/router/index.js 路由文件

目前只保留一个主页 Home

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router

3、修改 src/Home.vue 文件

将 Home.vue 文件作为我们的主页，所以删除默认的配置。可按如下模板配置。

<template>
    <div class="home">
        <h1>HELLO HOME!</h1>
    </div>
</template>
 
<script>
 
export default {
    name: 'Home',
    data() {
        return {
 
        }
    },
    methods: {
         
    }
}
</script>

4、修改 app.vue 文件

（1）template 标签中只设置一级路由。

（2）style 标签中，因为不同html元素的padding和margin默认值不同，建议统一清除，方便界面设计与配置。注意这里是全局配置，没有 scoped。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
 
<style lang="stylus">
*{
    padding: 0;
    margin: 0;
  }
</style>

重启后是如下效果表示成功！！！