一、页面布局

1、复制静态资源

将静态原型中的css、img、js、photo目录拷贝至assets目录下
将favicon.ico复制到static目录下

2、定义布局

我们可以把页头和页尾提取出来，形成布局页
修改layouts目录下default.vue，从静态页面中复制首页，修改了原始文件中的资源路径为~/assets/，将主内容区域的内容替换成
内容如下：

  1. <template>
  2.   <div>
  3.     <!-- 页头部分 -->
  5.     <!-- 内容的区域 -->
  6.     <nuxt/>
  8.     <!-- 页尾部分 -->
  9.   </div>
  11. </template>

完整的内容如下

  1. <template>
  2.    <div class="in-wrap">
  3.      <!-- 公共头引入 -->
  4.      <header id="header">
  5.        <section class="container">
  6.          <h1 id="logo">
  7.            <a href="#" title="谷粒学院">
  8.              <img src="~/assets/img/logo.png" width="100%" alt="谷粒学院">
  10.           </a>
  11.         </h1>
  12.         <div class="h-r-nsl">
  13.           <ul class="nav">
  14.             <router-link to="/" tag="li" active-class="current" exact>
  15.               <a>首页</a>
  16.             </router-link>
  17.             <router-link to="/course" tag="li" active-class="current">
  18.               <a>课程</a>
  19.             </router-link>
  20.             <router-link to="/teacher" tag="li" active-class="current">
  21.               <a>名师</a>
  22.             </router-link>
  23.             <router-link to="/article" tag="li" active-class="current">
  24.               <a>文章</a>
  25.             </router-link>
  26.             <router-link to="/qa" tag="li" active-class="current">
  27.               <a>问答</a>
  28.             </router-link>
  29.           </ul>
  30.           <!-- / nav -->
  31.           <ul class="h-r-login">
  32.             <li id="no-login">
  33.               <a href="/sing_in" title="登录">
  34.                 <em class="icon18 login-icon">&nbsp;</em>
  35.                 <span class="vam ml5">登录</span>
  36.               </a>
  37.               |
  38.               <a href="/sign_up" title="注册">
  39.                 <span class="vam ml5">注册</span>
  40.               </a>
  41.             </li>
  42.             <li class="mr10 undis" id="is-login-one">
  43.               <a href="#" title="消息" id="headerMsgCountId">
  44.                 <em class="icon18 news-icon">&nbsp;</em>
  45.               </a>
  46.               <q class="red-point" style="display: none">&nbsp;</q>
  47.             </li>
  48.             <li class="h-r-user undis" id="is-login-two">
  49.               <a href="#" title>
  50.                 <img
  51.                   src="~/assets/img/avatar-boy.gif"
  52.                   width="30"
  53.                   height="30"
  54.                   class="vam picImg"
  55.                   alt
  56.                 >
  57.                 <span class="vam disIb" id="userName"></span>
  58.               </a>
  59.               <a href="javascript:void(0)" title="退出" onclick="exit();" class="ml5">退出</a>
  60.             </li>
  61.             <!-- /未登录显示第1 li；登录后显示第2，3 li -->
  62.           </ul>
  63.           <aside class="h-r-search">
  64.             <form action="#" method="post">
  65.               <label class="h-r-s-box">
  66.                 <input type="text" placeholder="输入你想学的课程" name="queryCourse.courseName" value>
  67.                 <button type="submit" class="s-btn">
  68.                   <em class="icon18">&nbsp;</em>
  69.                 </button>
  70.               </label>
  71.             </form>
  72.           </aside>
  73.         </div>
  74.         <aside class="mw-nav-btn">
  75.           <div class="mw-nav-icon"></div>
  76.         </aside>
  77.         <div class="clear"></div>
  78.       </section>
  79.     </header>
  80.     <!-- /公共头引入 -->
  82.     <nuxt/>
  85.     <!-- 公共底引入 -->
  86.     <footer id="footer">
  87.       <section class="container">
  88.         <div class>
  89.           <h4 class="hLh30">
  90.             <span class="fsize18 f-fM c-999">友情链接</span>
  91.           </h4>
  92.           <ul class="of flink-list">
  93.             <li>
  94.               <a href="http://www.atguigu.com/" title="尚硅谷" target="_blank">尚硅谷</a>
  95.             </li>
  96.           </ul>
  97.           <div class="clear"></div>
  98.         </div>
  99.         <div class="b-foot">
  100.           <section class="fl col-7">
  102.             <section class="mr20">
  103.              <section class="b-f-link">
  104.                <a href="#" title="关于我们" target="_blank">关于我们</a>|
  105.                <a href="#" title="联系我们" target="_blank">联系我们</a>|
  106.                <a href="#" title="帮助中心" target="_blank">帮助中心</a>|
  107.                <a href="#" title="资源下载" target="_blank">资源下载</a>|
  108.                <span>服务热线：010-56253825(北京) 0755-85293825(深圳)</span>
  109.                <span>Email：info@atguigu.com</span>
  110.              </section>
  111.              <section class="b-f-link mt10">
  112.                <span>©2018课程版权均归谷粒学院所有 京ICP备17055252号</span>
  113.              </section>
  114.            </section>
  115.          </section>
  116.          <aside class="fl col-3 tac mt15">
  117.            <section class="gf-tx">
  118.              <span>
  119.                <img src="~/assets/img/wx-icon.png" alt>
  120.              </span>
  121.            </section>
  122.            <section class="gf-tx">
  123.              <span>
  124.                <img src="~/assets/img/wb-icon.png" alt>
  125.              </span>
  126.            </section>
  127.          </aside>
  128.          <div class="clear"></div>
  129.        </div>
  130.      </section>
  131.    </footer>
  133.     <!-- /公共底引入 -->
  134.   </div>
  135. </template>
  136. <script>
  137. import "~/assets/css/reset.css";
  138. import "~/assets/css/theme.css";
  139. import "~/assets/css/global.css";
  140. import "~/assets/css/web.css";
  142. export default {};
  143. </script>

3、定义首页面

（不包含幻灯片）
修改pages/index.vue：
修改了原始文件中的资源路径为~/assets/

内容如下：

<template>
 <div>
   <!-- 幻灯片 开始 -->
   <!-- 幻灯片 结束 -->

    <div id="aCoursesList">
     <!-- 网校课程 开始 -->
     <div>
       <section class="container">
         <header class="comm-title">
           <h2 class="tac">
             <span class="c-333">热门课程</span>
           </h2>
         </header>
         <div>
           <article class="comm-course-list">
             <ul class="of" id="bna">
               <li>
                 <div class="cc-l-wrap">
                   <section class="course-img">
                     <img
                       src="~/assets/photo/course/1442295592705.jpg"
                       class="img-responsive"
                       alt="听力口语"
                     >
                     <div class="cc-mask">
                       <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                     </div>
                   </section>
                   <h3 class="hLh30 txtOf mt10">
                     <a href="#" title="听力口语" class="course-title fsize18 c-333">听力口语</a>
                   </h3>
                   <section class="mt10 hLh20 of">
                     <span class="fr jgTag bg-green">
                       <i class="c-fff fsize12 f-fA">免费</i>
                     </span>
                     <span class="fl jgAttr c-ccc f-fA">
                       <i class="c-999 f-fA">9634人学习</i>
                       |
                       <i class="c-999 f-fA">9634评论</i>
                     </span>
                   </section>
                 </div>
               </li>
               <li>
                 <div class="cc-l-wrap">
                   <section class="course-img">
                     <img
                       src="~/assets/photo/course/1442295581911.jpg"
                       class="img-responsive"
                       alt="Java精品课程"
                     >
                     <div class="cc-mask">
                       <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                     </div>
                   </section>
                   <h3 class="hLh30 txtOf mt10">
                     <a href="#" title="Java精品课程" class="course-title fsize18 c-333">Java精品课程</a>
                   </h3>
                   <section class="mt10 hLh20 of">
                     <span class="fr jgTag bg-green">
                       <i class="c-fff fsize12 f-fA">免费</i>
                     </span>
                     <span class="fl jgAttr c-ccc f-fA">
                       <i class="c-999 f-fA">501人学习</i>
                       |
                       <i class="c-999 f-fA">501评论</i>
                     </span>
                   </section>
                 </div>
               </li>
               <li>
                 <div class="cc-l-wrap">
                   <section class="course-img">
                     <img
                       src="~/assets/photo/course/1442295604295.jpg"
                       class="img-responsive"
                       alt="C4D零基础"
                     >
                     <div class="cc-mask">
                       <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                     </div>
                   </section>
                   <h3 class="hLh30 txtOf mt10">
                     <a href="#" title="C4D零基础" class="course-title fsize18 c-333">C4D零基础</a>
                   </h3>
                   <section class="mt10 hLh20 of">
                     <span class="fr jgTag bg-green">
                       <i class="c-fff fsize12 f-fA">免费</i>
                     </span>
                     <span class="fl jgAttr c-ccc f-fA">
                       <i class="c-999 f-fA">300人学习</i>
                       |
                       <i class="c-999 f-fA">300评论</i>
                     </span>
                   </section>
                 </div>
               </li>
               <li>
                 <div class="cc-l-wrap">
                   <section class="course-img">
                     <img
                       src="~/assets/photo/course/1442302831779.jpg"
                       class="img-responsive"
                       alt="数学给宝宝带来的兴趣"
                     >
                     <div class="cc-mask">
                       <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                     </div>
                   </section>
                   <h3 class="hLh30 txtOf mt10">
                     <a href="#" title="数学给宝宝带来的兴趣" class="course-title fsize18 c-333">数学给宝宝带来的兴趣</a>
                   </h3>
                   <section class="mt10 hLh20 of">
                     <span class="fr jgTag bg-green">
                       <i class="c-fff fsize12 f-fA">免费</i>
                     </span>
                     <span class="fl jgAttr c-ccc f-fA">
                       <i class="c-999 f-fA">256人学习</i>
                       |
                       <i class="c-999 f-fA">256评论</i>
                     </span>
                   </section>
                 </div>
               </li>
               <li>
                 <div class="cc-l-wrap">
                   <section class="course-img">
                     <img
                       src="~/assets/photo/course/1442295455437.jpg"
                       class="img-responsive"
                       alt="零基础入门学习Python课程学习"
                     >
                     <div class="cc-mask">
                       <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                     </div>
                   </section>
                   <h3 class="hLh30 txtOf mt10">
                     <a
                       href="#"
                       title="零基础入门学习Python课程学习"
                       class="course-title fsize18 c-333"
                     >零基础入门学习Python课程学习</a>
                   </h3>
                   <section class="mt10 hLh20 of">
                     <span class="fr jgTag bg-green">
                       <i class="c-fff fsize12 f-fA">免费</i>
                     </span>
                     <span class="fl jgAttr c-ccc f-fA">
                       <i class="c-999 f-fA">137人学习</i>
                       |
                       <i class="c-999 f-fA">137评论</i>
                     </span>
                   </section>
                 </div>
               </li>
               <li>
                 <div class="cc-l-wrap">
                   <section class="course-img">
                     <img
                       src="~/assets/photo/course/1442295570359.jpg"
                       class="img-responsive"
                       alt="MySql从入门到精通"
                     >
                     <div class="cc-mask">
                       <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                     </div>
                   </section>
                   <h3 class="hLh30 txtOf mt10">
                     <a href="#" title="MySql从入门到精通" class="course-title fsize18 c-333">MySql从入门到精通</a>
                   </h3>
                   <section class="mt10 hLh20 of">
                     <span class="fr jgTag bg-green">
                       <i class="c-fff fsize12 f-fA">免费</i>
                     </span>
                     <span class="fl jgAttr c-ccc f-fA">
                       <i class="c-999 f-fA">125人学习</i>
                       |
                       <i class="c-999 f-fA">125评论</i>
                     </span>
                   </section>
                 </div>
               </li>
               <li>
                 <div class="cc-l-wrap">
                   <section class="course-img">
                     <img
                       src="~/assets/photo/course/1442302852837.jpg"
                       class="img-responsive"
                       alt="搜索引擎优化技术"
                     >
                     <div class="cc-mask">
                       <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                     </div>
                   </section>
                   <h3 class="hLh30 txtOf mt10">
                     <a href="#" title="搜索引擎优化技术" class="course-title fsize18 c-333">搜索引擎优化技术</a>
                   </h3>
                   <section class="mt10 hLh20 of">
                     <span class="fr jgTag bg-green">
                       <i class="c-fff fsize12 f-fA">免费</i>
                     </span>
                     <span class="fl jgAttr c-ccc f-fA">
                       <i class="c-999 f-fA">123人学习</i>
                       |
                       <i class="c-999 f-fA">123评论</i>
                     </span>
                   </section>
                 </div>
               </li>
               <li>
                 <div class="cc-l-wrap">
                   <section class="course-img">
                     <img
                       src="~/assets/photo/course/1442295379715.jpg"
                       class="img-responsive"
                       alt="20世纪西方音乐"
                     >
                     <div class="cc-mask">
                       <a href="#" title="开始学习" class="comm-btn c-btn-1">开始学习</a>
                     </div>
                   </section>
                   <h3 class="hLh30 txtOf mt10">
                     <a href="#" title="20世纪西方音乐" class="course-title fsize18 c-333">20世纪西方音乐</a>
                   </h3>
                   <section class="mt10 hLh20 of">
                     <span class="fr jgTag bg-green">
                       <i class="c-fff fsize12 f-fA">免费</i>
                     </span>
                     <span class="fl jgAttr c-ccc f-fA">
                       <i class="c-999 f-fA">34人学习</i>
                       |
                       <i class="c-999 f-fA">34评论</i>
                     </span>
                   </section>
                 </div>
               </li>
             </ul>
             <div class="clear"></div>
           </article>
           <section class="tac pt20">
             <a href="#" title="全部课程" class="comm-btn c-btn-2">全部课程</a>
           </section>
         </div>
       </section>
     </div>
     <!-- /网校课程 结束 -->
     <!-- 网校名师 开始 -->
     <div>
       <section class="container">
         <header class="comm-title">
           <h2 class="tac">
             <span class="c-333">名师大咖</span>
           </h2>
         </header>
         <div>
           <article class="i-teacher-list">
             <ul class="of">
               <li>
                 <section class="i-teach-wrap">
                   <div class="i-teach-pic">
                     <a href="/teacher/1" title="姚晨">
                       <img alt="姚晨" src="~/assets/photo/teacher/1442297885942.jpg">
                     </a>
                   </div>
                   <div class="mt10 hLh30 txtOf tac">
                     <a href="/teacher/1" title="姚晨" class="fsize18 c-666">姚晨</a>
                   </div>
                   <div class="hLh30 txtOf tac">
                     <span class="fsize14 c-999">北京师范大学法学院副教授</span>
                   </div>
                   <div class="mt15 i-q-txt">
                     <p
                       class="c-999 f-fA"
                     >北京师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机融合，强调综合，深入浅出。</p>
                   </div>
                 </section>
               </li>
               <li>
                 <section class="i-teach-wrap">
                   <div class="i-teach-pic">
                     <a href="/teacher/1" title="谢娜">
                       <img alt="谢娜" src="~/assets/photo/teacher/1442297919077.jpg">
                     </a>
                   </div>
                   <div class="mt10 hLh30 txtOf tac">
                     <a href="/teacher/1" title="谢娜" class="fsize18 c-666">谢娜</a>
                   </div>
                   <div class="hLh30 txtOf tac">
                     <span class="fsize14 c-999">资深课程设计专家，专注10年AACTP美国培训协会认证导师</span>
                   </div>
                   <div class="mt15 i-q-txt">
                     <p
                       class="c-999 f-fA"
                     >十年课程研发和培训咨询经验，曾任国企人力资源经理、大型外企培训经理，负责企业大学和培训体系搭建；曾任专业培训机构高级顾问、研发部总监，为包括广东移动、东莞移动、深圳移动、南方电网、工商银行、农业银行、民生银行、邮储银行、TCL集团、清华大学继续教育学院、中天路桥、广西扬翔股份等超过200家企业提供过培训与咨询服务，并担任近50个大型项目的总负责人。</p>
                   </div>
                 </section>
               </li>
               <li>
                 <section class="i-teach-wrap">
                   <div class="i-teach-pic">
                     <a href="/teacher/1" title="刘德华">
                       <img alt="刘德华" src="~/assets/photo/teacher/1442297927029.jpg">
                     </a>
                   </div>
                   <div class="mt10 hLh30 txtOf tac">
                     <a href="/teacher/1" title="刘德华" class="fsize18 c-666">刘德华</a>
                   </div>
                   <div class="hLh30 txtOf tac">
                     <span class="fsize14 c-999">上海师范大学法学院副教授</span>
                   </div>
                   <div class="mt15 i-q-txt">
                     <p
                       class="c-999 f-fA"
                     >上海师范大学法学院副教授、清华大学法学博士。自2004年至今已有9年的司法考试培训经验。长期从事司法考试辅导，深知命题规律，了解解题技巧。内容把握准确，授课重点明确，层次分明，调理清晰，将法条法理与案例有机融合，强调综合，深入浅出。</p>
                   </div>
                 </section>
               </li>
               <li>
                 <section class="i-teach-wrap">
                   <div class="i-teach-pic">
                     <a href="/teacher/1" title="周润发">
                       <img alt="周润发" src="~/assets/photo/teacher/1442297935589.jpg">
                     </a>
                   </div>
                   <div class="mt10 hLh30 txtOf tac">
                     <a href="/teacher/1" title="周润发" class="fsize18 c-666">周润发</a>
                   </div>
                   <div class="hLh30 txtOf tac">
                     <span class="fsize14 c-999">考研政治辅导实战派专家，全国考研政治命题研究组核心成员。</span>
                   </div>
                   <div class="mt15 i-q-txt">
                     <p
                       class="c-999 f-fA"
                     >法学博士，北京师范大学马克思主义学院副教授，专攻毛泽东思想概论、邓小平理论，长期从事考研辅导。出版著作两部，发表学术论文30余篇，主持国家社会科学基金项目和教育部重大课题子课题各一项，参与中央实施马克思主义理论研究和建设工程项目。</p>
                   </div>
                 </section>
               </li>
             </ul>
             <div class="clear"></div>
           </article>
           <section class="tac pt20">
             <a href="#" title="全部讲师" class="comm-btn c-btn-2">全部讲师</a>
           </section>
         </div>
       </section>
     </div>
     <!-- /网校名师 结束 -->

    </div>
  </div>
</template>

<script>
export default {

}
</script>

4、幻灯片插件

<!-- 幻灯片 开始 -->
<div v-swiper:mySwiper="swiperOption">
  <div class="swiper-wrapper">
      <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
              <img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">
          </a>
      </div>
      <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
              <img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">
          </a>
      </div>
  </div>
  <div class="swiper-pagination swiper-pagination-white"></div>
  <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
  <div class="swiper-button-next swiper-button-white" slot="button-next"></div>

</div>
<!-- 幻灯片 结束 -->

script

<script>
export default {
  data () {
    return {
      swiperOption: {
        //配置分页
        pagination: {
          el: '.swiper-pagination'//分页的dom节点
        },
        //配置导航
        navigation: {
          nextEl: '.swiper-button-next',//下一页dom节点
          prevEl: '.swiper-button-prev'//前一页dom节点
        }
      }
    }

  }
}
</script>

二、路由

1、固定路由

（1）使用router-link构建路由，地址是/course

image.png
（2）在page目录创建文件夹course ，在course目录创建index.vue

<template>
  <div>
    课程列表
  </div>
</template>

点击导航，测试路由

2、动态路由

（1）创建方式

如果我们需要根据id查询一条记录，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名
在pages下的course目录下创建_id.vue

<template>
  <div>
    讲师详情
  </div>
</template>

三、封装axios

我们可以参考guli-admin将axios操作封装起来
下载axios ，使用命令 npm install axios
创建utils文件夹，utils下创建request.js

import axios from 'axios'


// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:8201', // api的base_url
  timeout: 20000 // 请求超时时间
})
export default service