路飞项目前端主页搭建

前端主页

图片准备

首先把主页需要到图片资源放到项目的img文件夹下

页头组件：components/Header.vue

 <template>

    <div class="header">

        <div class="slogan">

            <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>

        </div>

        <div class="nav">

            <ul class="left-part">

                <li class="logo">

                    <router-link to="/">

                        <img src="../assets/img/head-logo.svg" alt="">

                    </router-link>

                </li>

                <li class="ele">

                    <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>

                </li>

                <li class="ele">

                    <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>

                </li>

                <li class="ele">

                    <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>

                </li>

            </ul>



            <div class="right-part">

                <div>

                    <span>登录</span>

                    <span class="line">|</span>

                    <span>注册</span>

                </div>

    		</div>

        </div>

    </div>



</template>



<script>



    export default {

        name: "Header",

        data() {

            return {

                url_path: sessionStorage.url_path || '/',

            }

        },

        methods: {

            goPage(url_path) {

                // 已经是当前路由就没有必要重新跳转

                if (this.url_path !== url_path) {

                    this.$router.push(url_path);

                }

                sessionStorage.url_path = url_path;

            },

        },

        created() {

            sessionStorage.url_path = this.$route.path;

            this.url_path = this.$route.path;

        }

    }

</script>



<style scoped>

    .header {

        background-color: white;

        box-shadow: 0 0 5px 0 #aaa;

    }



    .header:after {

        content: "";

        display: block;

        clear: both;

    }



    .slogan {

        background-color: #eee;

        height: 40px;

    }



    .slogan p {

        width: 1200px;

        margin: 0 auto;

        color: #aaa;

        font-size: 13px;

        line-height: 40px;

    }



    .nav {

        background-color: white;

        user-select: none;

        width: 1200px;

        margin: 0 auto;



    }



    .nav ul {

        padding: 15px 0;

        float: left;

    }



    .nav ul:after {

        clear: both;

        content: '';

        display: block;

    }



    .nav ul li {

        float: left;

    }



    .logo {

        margin-right: 20px;

    }



    .ele {

        margin: 0 20px;

    }



    .ele span {

        display: block;

        font: 15px/36px '微软雅黑';

        border-bottom: 2px solid transparent;

        cursor: pointer;

    }



    .ele span:hover {

        border-bottom-color: orange;

    }



    .ele span.active {

        color: orange;

        border-bottom-color: orange;

    }



    .right-part {

        float: right;

    }



    .right-part .line {

        margin: 0 10px;

    }



    .right-part span {

        line-height: 68px;

        cursor: pointer;

    }

</style> 

页脚组件：components/Footer.vue

 <template>

    <div class="footer">

        <ul>

            <li>关于我们</li>

            <li>联系我们</li>

            <li>商务合作</li>

            <li>帮助中心</li>

            <li>意见反馈</li>

            <li>新手指南</li>

        </ul>

        <p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>

    </div>

</template>



<script>

    export default {

        name: "Footer"

    }

</script>



<style scoped>

    .footer {

        width: 100%;

        height: 128px;

        background: #25292e;

        color: #fff;

    }



    .footer ul {

        margin: 0 auto 16px;

        padding-top: 38px;

        width: 810px;

    }



    .footer ul li {

        float: left;

        width: 112px;

        margin: 0 10px;

        text-align: center;

        font-size: 14px;

    }



    .footer ul::after {

        content: "";

        display: block;

        clear: both;

    }



    .footer p {

        text-align: center;

        font-size: 12px;

    }

</style> 

轮播图组件：components/Banner.vue

 <template>

    <div id="banner">

        <el-carousel height="400px">

            <el-carousel-item v-for="item in 4" :key="item">

                <img src="../assets/img/banner1.png" alt="">

            </el-carousel-item>

        </el-carousel>

    </div>

</template>



<script>

    export default {

        name: "Banner"

    }

</script>



<style scoped>

    .el-carousel__item {

        height: 400px;

        min-width: 1200px;

    }

    .el-carousel__item img {

        height: 400px;

        margin-left: calc(50% - 1920px / 2);

    }

</style> 

组件的使用

在views的.vue文件中执行以下步骤：

1.导入写好的组件：

 import Header from '../components/Header' //Header是组件名，from后面是组件相对的位置

import Footer from '../components/Footer'

import Banner from '../components/Banner' 

2.在components里添加组件名：

 components: {

    Header,

    Footer,

    Banner

  } 

3.在template模块添加组件：书写方式如图