header區(qū)域開發(fā)
去哪兒網(wǎng)手機：http://touch.piao.qunar.com/
1rem= html font-size
如果font-size=50px，43px是.86rem
在build-->webpack.base.conf.js里面可以配置路徑，例：@代碼src，如果在style里面調(diào)用，需要在前面加~
scoped：加載以及影響當(dāng)前的組件逐抑，可以使得組件之間的樣式不互相污染
但是往往有時候，我們在使用一些第三方插件的同時，又需要對第三方插件做一些細(xì)微的修改买优，那么我們就可以使用下面的方法(scss穿透)：
scss穿透：
/deep/
.wrapper /deep/ {
.swiper-pagination-bullet-active {
background: #fff;
}
}
首頁輪播圖
swiper的使用：https://www.cnblogs.com/maomao93/p/6830626.html
輪播插件在github搜索：vue-awesome-swiper
https://github.com/surmon-china/vue-awesome-swiper
安裝：npm install vue-awesome-swiper@2.6.7 --save
@2.6.7是版本號
在<script>里面需要加require才能獲取圖片路徑
當(dāng)網(wǎng)絡(luò)處于3G時，swiper圖片未加載挺举，會出現(xiàn)抖動的效果杀赢，所以必須給swiper加上高度
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 31.25%;
background: #ccc;
這里的31.25%是圖片得寬度200px，高度640px的比例得出的湘纵。
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgurl"/>
</swiper-slide>
swiperList: [{
id: '001',
imgurl: require('@/assets/img/meinvyeshou.jpeg')
}, {
id: '002',
imgurl: require('@/assets/img/guangzhouchanglong.jpeg')
}]
參考資料：https://blog.csdn.net/u012123026/article/details/78203799
loop: true 循環(huán)輪播脂崔，不加如果左邊沒有圖片，拖動會出現(xiàn)空白
swiperOption: {
pagination: '.swiper-pagination',
loop: true
}
使用 axios 發(fā)送 ajax 請求
axios API：https://www.kancloud.cn/yunye/axios/234845
安裝axios：npm install axios --save
首先在大組件中引入 axios梧喷，比如header砌左，hearder里面有很多組件組成import axios from 'axios'，然后調(diào)用mounted生命周期鉤子
引用json路徑铺敌，修改config 中的index配置
1汇歹、?在整個的項目目錄，只要static目錄下的文件才能被外部訪問偿凭，所以我們在static下創(chuàng)建json文件夾产弹，創(chuàng)建index.json文件
2、如果不想把json數(shù)據(jù)上傳到線上git和本地git倉庫弯囊，在gitgnore文件中添加static/json
3痰哨、因為代碼上線ajax需要用(api/index.json)格式的，所以需要配置路徑匾嘱，而不是static/json/index.json
4斤斧、proxyTable配置項，在config->index.js配置路徑
proxyTable配置:https://blog.csdn.net/qq_33559304/article/details/72966028
5霎烙、json文件撬讽，"ret":ture 服務(wù)器正確響應(yīng)了你的請求
axios tiis指向問題
錯誤代碼：
data () {
return {
city: ''
}
},
methods: {
getHomeinfo () {
axios.get('/api/index.json')
.then(function (res) {
res = res.data
if (res.ret && res.data) {
const data = res.data
this.city = data.city
}
})
}
},
mounted () {
this.getHomeinfo()
}
'city' of undefined原因：this的指向變了，以下是解決的辦法
methods: {
getHomeinfo () {
var this_ = this
axios.get('/api/index.json')
.then(function (res) {
res = res.data
if (res.ret && res.data) {
const data = res.data
this_.city = data.city
}
})
}
},
箭頭函數(shù)了解一下
methods: {
getHomeinfo () {
axios.get('/api/index.json')
.then((res) => {
res = res.data
if (res.ret && res.data) {
const data = res.data
this.city = data.city
}
})
}
},
