15.blog前端-博客首页

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 

标签：40px,resolve,15,top,blog,首页,GoTop,path,font
来源： https://blog.csdn.net/weixin_45974277/article/details/122784592