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組件模板內(nèi)復(fù)制黏貼swiper代碼模板 |
//全局引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
//swiper代碼模板
<!-- The ref attr used to find the swiper instance -->
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的參數(shù)同 swiper 官方 api 參數(shù)
// ...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對象去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
3. Vue-awesome-swiper屬性方法
Ⅰ. 什么是Nuxt.js:
Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架，通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，預(yù)設(shè)了利用 Vue.js 開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。（開箱即用）
官方地址：https://zh.nuxtjs.org/guide
Ⅱ. Nuxt安裝使用
| NO. | 步驟描述 |
|---|---|
| 1.全局安裝nuxt腳手架 | cnpm i create-nuxt-app -g |
| 2.創(chuàng)建新項目 | create-nuxt-app my-nuxt-demo（項目名） |
| 3.新項目配置 | 如下 |
| 4.進(jìn)入新項目 | cd my-nuxt-demo（項目名） |
| 5.運行新項目 | npm run dev |
Ⅲ. Nuxt模板目錄結(jié)構(gòu)分析
重點關(guān)注：components、layouts、pages、plugins、nust.config.js目錄及文件
Ⅳ.Nuxt路由
?.pages目錄結(jié)構(gòu)自動生成對應(yīng)的路由配置
?路由跳轉(zhuǎn)
- 跳轉(zhuǎn)方式1.使用nuxt-link組件
注意：不能用a標(biāo)簽代替nuxt-link組件，雖然最終的顯示效果一樣，但是a標(biāo)簽會刷新頁面
- 跳轉(zhuǎn)方式2.使用編程式導(dǎo)航this.$router.push（用于事件）
③動態(tài)路由
④路由參數(shù)校驗
Nuxt.js 可以讓你在動態(tài)路由對應(yīng)的頁面組件中配置一個validate方法用于校驗動態(tài)路由參數(shù)的有效性。該函數(shù)有一個布爾類型的返回值，如果返回true則表示校驗通過，如果返回false則表示校驗未通過。
validate(data) {
cosole.log(data)
return true
}
⑤嵌套路由
| NO. | 步驟描述 |
|---|---|
| 1. | 添加一個Vue文件，作為父組件 |
| 2. | 添加一個與父組件同名的文件夾來存放子視圖組件 |
| 3. | 在父文件中，添加<nuxt-child></nuxt-child>組件，用于展示匹配到的子視圖 |
父組件authors.vue的demo：
<template>
<div class="authors">
<h3>這是作者列表頁</h3>
<ul>
<li v-for="item in bookList" :key="item.id">
<!-- <nuxt-link :to="`/book/${item.id}`">{{item.name}}</nuxt-link> -->
<!-- 將傳參改為傳name -->
<nuxt-link :to="`/authors/${item.id}`">{{item.name}}</nuxt-link>
</li>
</ul>
<nuxt-child></nuxt-child>
</div>
</template>
<script>
export default {
data(){
return{
bookList:[
{name:'蕭鼎',id:1},
{name:'墨香銅臭',id:2},
{name:'番茄',id:3},
]
}
}
}
</script>
嵌套的子組件_id文件夾下的demo
<template>
<div class="authors-detail">
<!-- Nuxt.js 定義帶參數(shù)的動態(tài)路由，需要創(chuàng)建
以下劃線作為前綴的Vue文件或目錄，為了避免出錯我們只考慮目錄 -->
<!-- 底下這個id對應(yīng)左邊加了下劃線的文件夾名_id -->
這是{{$route.params.id}}號作者的詳細(xì)信息
</div>
</template>
<script>
export default {
// Nuxt.js 可以讓你在動態(tài)路由對應(yīng)的頁面組件中配置一個`validate`方法用于校驗動態(tài)路由參數(shù)的有效性。
// 該函數(shù)有一個布爾類型的返回值，如果返回true則表示校驗通過，如果返回false則表示校驗未通過。
validate(obj){//默認(rèn)有個obj的參數(shù)
console.log(this);
console.log(obj.params);// { id: '誅仙' }
return /^\d+$/.test(obj.params.id)//用正則限制只能是數(shù)字
}
}
</script>
Ⅴ.布局組件
| NO. | 步驟描述 |
|---|---|
| 1. | 去layouts文件夾下面新建一個新的layout布局組件（如 a.vue），并在這個組件中添加<nuxt />組件 |
| 2. | 給需要用到a.vue的組件添加layout屬性，并指定需要使用的layout(如 layout:'a') |
特殊的布局組件：error布局組件（error是關(guān)鍵字，只能取這個名字）
Ⅵ.設(shè)置全局樣式
Ⅶ.ElementUI使用
| NO. | 步驟描述 |
|---|---|
| 1. | 下載(c)npm i element-ui -S（一定要在package.json里確認(rèn)是否下載成功） |
| 2. | 在plugins文件夾下面，創(chuàng)建ElementUI.js文件 |
| 3. | 在nuxt.config.js中添加系統(tǒng)設(shè)置 |
| 4. | 測試UI組件是否生效 |
測試的時候不要范如下錯誤：
Ⅷ.發(fā)送請求
?.生命周期函數(shù)：
在nuxt中，只有created以及beforeCreate兩個能夠在服務(wù)端正常使用
但是發(fā)異步請求不能在created生命周期函數(shù)中去發(fā)送，因為它會在前端執(zhí)行（打印一下，發(fā)送前端和服務(wù)器端都會有打印信息）
那么如何發(fā)送異步請求呢？
?.asyncData的方法:可以在服務(wù)端或路由更新之前被調(diào)用, 需要注意這個函數(shù)中不能使用this
③. axios的使用
| NO. | 步驟描述 |
|---|---|
| 1. | 下載(c)npm install axios -S（一定要在package.json里確認(rèn)是否下載成功） |
| 2. | 在plugins文件夾下面，創(chuàng)建axios.js文件并進(jìn)行設(shè)置 |
| 3. | 在nuxt.config.js中添加系統(tǒng)設(shè)置 |
| 4. | 測試axios是否生效 |
Ⅸ.SEO優(yōu)化
?.全局優(yōu)化:在nuxt.config.js配置文件中修改
head: {
title: '全網(wǎng)最好看的電影在線網(wǎng)站',
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' }
]
},
?.局部優(yōu)化:去每個頁面直接加入head() 方法
head(){
return{
title:'豆瓣電影',
meta:[{
'name':'keywords',
'content': '電影、經(jīng)典電影、熱映、電視劇、美劇、影評、電影院、電影票、排行、推薦'
}]
}
}
Ⅹ.實戰(zhàn)項目：豆瓣電影小案例
?.案例源碼：
復(fù)制這段內(nèi)容后打開百度網(wǎng)盤手機App，操作更方便哦
鏈接：https://pan.baidu.com/s/1YFdpQIGUMF28uEm8oBUfbw
提取碼：iqjb
?.獲取源碼后項目跑動
后記：解決SEO問題不一定非得用服務(wù)端渲染來處理，特別是項目已經(jīng)開發(fā)完畢，突然告訴你添加個SEO優(yōu)化，這時候可以考慮vue-meta-info ，官方地址：https://github.com/muwoo/vue-meta-info
