App.vue

<template><div id="app"><!--博客首页显示--><router-view></router-view><!--回到顶部的组件--><go-top></go-top></div>
</template><script>import GoTop from "@/components/gotop/GoTop"
export default
{name: 'App',components:{"go-top": GoTop,}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

这里由@作为src目录，需要进行一个配置

vue.config.js：

const path = require('path')
function resolve(dir) {return path.join(__dirname, dir)
}
module.exports ={lintOnSave:true,pages:{index:{entry: 'src/main.js',}},configureWebpack: {resolve: {alias: {'@': resolve('src')}}}}

在components下新建gotop目录，新建组件GoTop.vue，实现首页到了底部，点击一个按钮重新回到顶部：

<template><transition><div @click="toTop" v-if="topShow" class="me-to-top"><i class="el-icon-caret-top"></i></div></transition>
</template><script>
export default
{name:'GoTop',data(){return{topShow:true}},methods:{toTop(){alert("top")}}
}
</script><style>.me-to-top {background-color: #fff;position: fixed;right: 100px;bottom: 150px;width: 40px;height: 40px;border-radius: 20px;cursor: pointer;transition: .3s;box-shadow: 0 0 6px rgba(0, 0, 0, .12);z-index: 5;}.me-to-top i{color: #00d1b2;display: block;line-height: 40px;text-align: center;font-size: 18px;}
</style>

这里需要引入elementUI的一个样式icon,需要先安装elementUI