nuxt.js 也是基于vue 的 那么就离不开组件化开发  我们按照组件结构来进行分析

 navTop

页面的头部 通用组件 分隔了三个位置  适用于大多数头部  且预留插槽

 在首页使用

引入：

import navTop from '../components/common/navtop/Navtop'

注册

components:{navTop,
},

使用 左边放logo 中间搜索框 右边放 标识

对应的回调 分别跳转到 不同的位置

  methods:{GoHome(){this.$router.push('/home')},GoSearch(){this.$router.push('/search')},GoClass(){this.$router.push('/class')}
}

Swiper 轮播组件

首先要安装 对应的依赖包

npm i swiper@4.5.1

npm i vue-awesome-swiper@3.1.3

创建对应的组件：

swiper 的相关配置 v-swiper:mySwiper 绑定到下方 swiperOption当中

轮播图的数据 由外部 组件 props 传进来

图片加载完成后 @onload 发射自定义事件 通知首页 计算图片加载完成后的首页页面长度

 plugin/swiper.js

在这里编辑相关配置  挂载到nuxt.confin.js 的 plugin模块当中

这样写 还有一个作用就是 在ssr渲染中 没有全局this 导致 swiper的相关报错

import Vue from 'vue'
if (process.browser) {const VueAwesomeSwiper = require("vue-awesome-swiper/dist/ssr");Vue.use(VueAwesomeSwiper);
}

在首页 引入及使用 

import homeSwiper from '../components/common/swiper/swiper'

components:{homeSwiper,
},

homeIcon 和 homeRecommend 都是基础布局+数据渲染 没什么难度

 主要就是网络请求相关的 流程 梳理一下：

在nuxt.js 中 asyncData 属于一个生命周期 在此生命周期中请求数据  返回数据不用再赋值到组件的data 中 课直接供模板使用

  async asyncData({$axios}){const {data} = await $axios.get('http://www.wsg3096.com/ass/home-data.txt')return {homeData:data}},

homeIcon

homeRecommend