Vue-awesome-swiper使用教程

1. vue-awesome-swiper是vue的一款轮播插件

github地址：https://github.com/surmon-china/vue-awesome-swiper

2. Vue-awesome-swiper安装使用

NO.	安装使用步骤
1	安装指令`npm install vue-awesome-swiper --save`
2	在main.js全局引入vue-awesome-swiper插件（包括样式）
3	在Vue的template组件模板内复制黏贴swiper代码模板

//全局引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

//swiper代码模板

3. Vue-awesome-swiper属性方法

Ⅰ. 什么是Nuxt.js:
Nuxt.js 是一个基于 Vue.js 的通用应用框架，通过对客户端/服务端基础架构的抽象组织，预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。（开箱即用）
官方地址：https://zh.nuxtjs.org/guide

Ⅱ. Nuxt安装使用

NO.	步骤描述
1.全局安装nuxt脚手架	cnpm i create-nuxt-app -g
2.创建新项目	create-nuxt-app my-nuxt-demo（项目名）
3.新项目配置	如下
4.进入新项目	cd my-nuxt-demo（项目名）
5.运行新项目	npm run dev

Snipaste_2019-07-12_14-51-12.jpg

Snipaste_2019-07-12_15-07-35.jpg

Ⅲ. Nuxt模板目录结构分析

重点关注：components、layouts、pages、plugins、nust.config.js目录及文件

Snipaste_2019-07-18_15-39-26.jpg

Ⅳ.Nuxt路由

➀.pages目录结构自动生成对应的路由配置

Snipaste_2019-07-18_16-00-55.jpg

➁路由跳转

跳转方式1.使用nuxt-link组件

注意：不能用a标签代替nuxt-link组件，虽然最终的显示效果一样，但是a标签会刷新页面

Snipaste_2019-07-18_16-08-59.jpg

跳转方式2.使用编程式导航this.$router.push（用于事件）

Snipaste_2019-07-18_16-18-24.jpg

③动态路由

Snipaste_2019-07-18_17-23-27.jpg

④路由参数校验

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个validate方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。

validate(data) {
  cosole.log(data)
  return true
}

Snipaste_2019-07-23_09-43-56.jpg

⑤嵌套路由

NO.	步骤描述
1.	添加一个Vue文件，作为父组件
2.	添加一个与父组件同名的文件夹来存放子视图组件
3.	在父文件中，添加组件，用于展示匹配到的子视图

Snipaste_2019-07-23_15-38-58.jpg

父组件authors.vue的demo：





嵌套的子组件_id文件夹下的demo

Ⅴ.布局组件

NO.	步骤描述
1.	去layouts文件夹下面新建一个新的layout布局组件（如 a.vue），并在这个组件中添加组件
2.	给需要用到a.vue的组件添加layout属性，并指定需要使用的layout(如 layout:'a')

Snipaste_2019-07-24_10-51-44.jpg

Snipaste_2019-07-24_10-54-11.jpg

特殊的布局组件：error布局组件（error是关键字，只能取这个名字）

Snipaste_2019-07-24_10-59-38.jpg

Ⅵ.设置全局样式

Snipaste_2019-07-24_11-07-07.jpg

Ⅶ.ElementUI使用

NO.	步骤描述
1.	下载(c)npm i element-ui -S（一定要在package.json里确认是否下载成功）
2.	在plugins文件夹下面，创建ElementUI.js文件
3.	在nuxt.config.js中添加系统设置
4.	测试UI组件是否生效

Snipaste_2019-07-24_19-24-07.jpg

测试的时候不要范如下错误：

Snipaste_2019-07-24_19-18-15.jpg

Ⅷ.发送请求

➀.生命周期函数：

在nuxt中，只有created以及beforeCreate两个能够在服务端正常使用

但是发异步请求不能在created生命周期函数中去发送，因为它会在前端执行（打印一下，发送前端和服务器端都会有打印信息）

Snipaste_2019-07-25_14-23-27.jpg

那么如何发送异步请求呢？

➁.asyncData的方法:可以在服务端或路由更新之前被调用, 需要注意这个函数中不能使用this

Snipaste_2019-07-25_14-42-26.jpg

③. axios的使用

NO.	步骤描述
1.	下载(c)npm install axios -S（一定要在package.json里确认是否下载成功）
2.	在plugins文件夹下面，创建axios.js文件并进行设置
3.	在nuxt.config.js中添加系统设置
4.	测试axios是否生效

Snipaste_2019-07-25_15-43-25.jpg

Ⅸ.SEO优化

➀.全局优化:在nuxt.config.js配置文件中修改

head: {
    title: '全网最好看的电影在线网站',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '韩剧、日剧、美剧，只有你想不到，没有你找不到' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

Snipaste_2019-07-31_10-17-17.jpg

➁.局部优化:去每个页面直接加入head() 方法

 head(){
        return{
            title:'豆瓣电影',
            meta:[{
                'name':'keywords',
                'content': '电影、经典电影、热映、电视剧、美剧、影评、电影院、电影票、排行、推荐'
            }]
        }
    }

Snipaste_2019-07-31_09-59-45.jpg

Ⅹ.实战项目：豆瓣电影小案例

➀.案例源码：
复制这段内容后打开百度网盘手机App，操作更方便哦
链接：https://pan.baidu.com/s/1YFdpQIGUMF28uEm8oBUfbw
提取码：iqjb

➁.获取源码后项目跑动

Snipaste_2019-07-31_10-24-51.jpg

后记：解决SEO问题不一定非得用服务端渲染来处理，特别是项目已经开发完毕，突然告诉你添加个SEO优化，这时候可以考虑vue-meta-info ，官方地址：https://github.com/muwoo/vue-meta-info

Vue-awesome-swiper使用教程