【郑州校区】Nuxt.js实战中 - 黑马程序员技术交流社区

方式1: 直接在npm中点击dev执行

方式2: 在Edit Configurations中配置dev命令，然后点击绿色箭头执行

在项目根目录的components目录下，创建名为"Header.vue"的文件，初始代码如图所示

把相应页头部分的代码，填入对应位置

[AppleScript] 纯文本查看 复制代码

<template>

  <!-- 头部 start -->

  <header id="header">

    <div class="top_banner">

      <img src="images/top_banner.jpg" alt="">

    </div>

    <div class="shortcut">

      <!-- 未登录状态  -->

      <div class="login_out">

        <a href="login.html">登录</a>

        <a href="register.html">注册</a>

      </div>

      <!-- 登录状态  -->

      <div class="login">

        <span>欢迎回来，admin</span>

        <a href="myfavorite.html" class="collection">我的收藏</a>

        <a href="javascript:;">退出</a>

      </div>

    </div>

    <div class="header_wrap">

      <div class="topbar">

        <div class="logo">

          <a href="/"><img src="images/logo.jpg" alt=""></a>

        </div>

        <div class="search">

          <input name="" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">

          <a href="javascript:;" class="search-button">搜索</a>

        </div>

        <div class="hottel">

          <div class="hot_pic">

            <img src="images/hot_tel.jpg" alt="">

          </div>

          <div class="hot_tel">

            <p class="hot_time">客服热线(9:00-6:00)</p>

            <p class="hot_num">400-618-9090</p>

          </div>

        </div>

      </div>

    </div>

    <!-- 头部 end -->

    <!-- 首页导航 -->

    <div class="navitem">

      <ul class="nav">

           <!-- 准备访问数据库后，根据返回数据，动态显示 -->

      </ul>

    </div>

  </header>





</template>



<script>

  export default {

    name: "Header"，

    data(){

      return {

        category_list:{}        //定义一个变量，用来存放访问服务器后返回的数据

      }

    }，

    head: {

      // 引入对应的css文件

      link: [

        {rel: 'stylesheet'，href: '/css/common.css'}，        

        {rel: 'stylesheet'，href: '/css/bootstrap.min.css'}，

      ]

    }

  }

</script>

<style scoped>

</style>

把页脚部分的代码，填入对应位置

[AppleScript] 纯文本查看 复制代码

<template>

  <!-- 尾部 start-->

  <footer id="footer">

    <div class="why_select">

      <dl>

        <dt class="fl">

          <img src="images/icon_1.jpg" alt="">

        </dt>

        <dd>

          <h1>产品齐全</h1>

          <h2>产品全自主选，随心买</h2>

        </dd>

      </dl>

      <dl>

        <dt class="fl">

          <img src="images/icon_2.jpg" alt="">

        </dt>

        <dd>

          <h1>便利快捷</h1>

          <h2>24小时不打烊，随时买</h2>

        </dd>

      </dl>

      <dl>

        <dt class="fl">

          <img src="images/icon_3.jpg" alt="">

        </dt>

        <dd>

          <h1>安全支付</h1>

          <h2>知名支付工具，放心买</h2>

        </dd>

      </dl>

      <dl>

        <dt class="fl">

          <img src="images/icon_4.jpg" alt="">

        </dt>

        <dd style="margin-right:0px;">

          <h1>贴心服务</h1>

          <h2>客服全年无休，安心买</h2>

        </dd>

      </dl>

    </div>

    <div class="company">

      <p>江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018，All Rights Reserved 苏ICP备16007882</p>

    </div>

  </footer>

</template>



<script>

    export default {

        name: "Footer"

    }

</script>



<style scoped>

</style>

修改该默认模版

[AppleScript] 纯文本查看 复制代码

<template>

  <div>

    <Header />    <!--Header.vue中的代码会自动放入该位置-->

    <nuxt/>       <!--普通页面的代码，会自动填充到该位置-->

    <Footer />    <!--Footer.vue中的代码会自动放入该位置-->

  </div>

</template>

<script>

  import Footer from '../components/Footer.vue'

  import Header from '../components/Header.vue'

  export default {

    components: {

      Header，

      Footer

    }

  }

</script>