1.項(xiàng)目實(shí)現(xiàn)功能
首頁、詳情頁面坡慌、搜索頁面、城市選擇頁面
項(xiàng)目目錄
F:.
│ .babelrc
│ .editorconfig
│ .eslintignore
│ .eslintrc.js
│ .gitignore
│ .postcssrc.js
│ index.html
│ package-lock.json
│ package.json
│ README.en.md
│ README.md
│
├─build
│ build.js
│ check-versions.js
│ logo.png
│ utils.js
│ vue-loader.conf.js
│ webpack.base.conf.js
│ webpack.dev.conf.js
│ webpack.prod.conf.js
│
├─config
│ dev.env.js
│ index.js
│ prod.env.js
│
├─src
│ │ App.vue
│ │ main.js
│ │
│ ├─assets
│ │ └─styles
│ │ │ border.css
│ │ │ iconfont.css
│ │ │ mixins.styl
│ │ │ reset.css
│ │ │ varibles.styl
│ │ │
│ │ └─iconfont
│ │ iconfont.eot
│ │ iconfont.svg
│ │ iconfont.ttf
│ │ iconfont.woff
│ │
│ ├─common
│ │ ├─fade
│ │ │ FadeAnimation.vue
│ │ │
│ │ └─gallary
│ │ Gallary.vue
│ │
│ ├─pages
│ │ │ testGit.js
│ │ │
│ │ ├─city
│ │ │ │ City.vue
│ │ │ │
│ │ │ └─components
│ │ │ Alphabet.vue
│ │ │ Header.vue
│ │ │ List.vue
│ │ │ Search.vue
│ │ │
│ │ ├─detail
│ │ │ │ Detail.vue
│ │ │ │
│ │ │ └─components
│ │ │ Banner.vue
│ │ │ Header.vue
│ │ │ List.vue
│ │ │
│ │ └─home
│ │ │ Home.vue
│ │ │
│ │ └─components
│ │ Header.vue
│ │ Icons.vue
│ │ Recommend.vue
│ │ Swiper.vue
│ │ Weekend.vue
│ │
│ ├─router
│ │ index.js
│ │
│ └─store
│ index.js
│ mutations.js
│ state.js
│
└─static
.gitkeep
2.實(shí)現(xiàn)細(xì)節(jié)和一些難點(diǎn)
數(shù)據(jù)獲取
獲取首頁數(shù)據(jù)使用的是axios
安裝 axios:
npm install axios --save
在 Home.vue 發(fā)送 Ajax 請(qǐng)求是最好的選擇藻三，這個(gè)組件獲取 Ajax 數(shù)據(jù)之后洪橘，可以把數(shù)據(jù)傳給每個(gè)子組件
把一些靜態(tài)的文件放置在static目錄下，通過 http://localhost:8080/static/mock/index.json 可以訪問到
static
│ .gitkeep
│
└─mock
city.json
detail.json
index.json
Home.vue 部分代碼
<template>
<div>
<home-header></home-header>
<home-swiper :list="swiperList"></home-swiper>
<home-icons :list="iconList"></home-icons>
<home-recommend :list="recommendList"></home-recommend>
<home-weekend :list="weekendList"></home-weekend>
</div>
</template>
<script>
import HomeHeader from ‘./components/Header’
import HomeSwiper from ‘./components/Swiper’
import HomeIcons from ‘./components/Icons’
import HomeRecommend from ‘./components/Recommend’
import HomeWeekend from ‘./components/Weekend’
import axios from ‘a(chǎn)xios’
import { mapState } from ‘vuex’
export default {
name: ‘Home’,
components: {
HomeHeader,
HomeSwiper,
HomeIcons,
HomeRecommend,
HomeWeekend
},
data () {
return {
lastCity: ‘’,
swiperList: [],
iconList: [],
recommendList: [],
weekendList: []
}
},
computed: {
…mapState([‘city’])
},
methods: {
getHomeInfo () {
axios.get(’/api/index.json?city=’ + this.city)
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
res = res.data
if (res.ret && res.data) {
const data = res.data
this.swiperList = data.swiperList
this.iconList = data.iconList
this.recommendList = data.recommendList
this.weekendList = data.weekendList
}
}
},
mounted () {
this.lastCity = this.city
this.getHomeInfo()
}
}
</script>
<style>
</style>
父子組件之間進(jìn)行通訊
父組件通過 props 傳遞數(shù)據(jù)給子組件棵帽，子組件通過 emit 發(fā)送事件傳遞數(shù)據(jù)給父組件
以 List 組件 為例（List.vue 部分代碼）
<template>
<div>
<div class="title">熱銷推薦</div>
<ul>
<router-link
tag="li"
class="item border-bottom"
v-for="item of list"
:key="item.id"
:to="'/detail/' + item.id"
>
<img class="item-img" :src="item.imgUrl" />
<div class="item-info">
<p class="item-title">{{item.title}}</p>
<p class="item-desc">{{item.desc}}</p>
<button class="item-button">查看詳情</button>
</div>
</router-link>
</ul>
</div>
</template>
<script>
export default {
name: ‘HomeRecommend’,
props: {
list: Array
}
}
</script>
輪播圖
安裝 vue-awesome-swiper 插件
npm install vue-awesome-swiper@2.6.7 --save
輪播在多個(gè)組件中使用
以 home-components-Swiper.vue 為例
<template>
<div class="wrapper">
<swiper :options="swiperOption" v-if="showSwiper">
<swiper-slide v-for="item of list" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: ‘HomeSwiper’,
props: {
list: Array
},
data () {
return {
swiperOption: {
pagination: ‘.swiper-pagination’,
loop: true
}
}
},
computed: {
showSwiper () {
return this.list.length
}
}
}
</script>
Better-scroll
安裝
npm install better-scroll --save
使用
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
import BScroll from '[@better-scroll](/user/better-scroll)/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
使用vuex實(shí)現(xiàn)數(shù)據(jù)共享
安裝vuex
npm install vuex --save
希望在 城市列表頁面 點(diǎn)擊城市熄求，首頁右上角城市可以 進(jìn)行相應(yīng)的改變。
具體描述為：
項(xiàng)目中是為了實(shí)現(xiàn)城市選擇列表頁面和首頁的數(shù)據(jù)傳遞逗概，并且沒有公用的組件弟晚，city/components/List.vue 、home/components/Header.vue逾苫、Home.vue組件卿城，都需要獲取到數(shù)據(jù)。
因?yàn)檫@個(gè)項(xiàng)目沒有需要進(jìn)行異步的操作铅搓，也不需要對(duì)數(shù)據(jù)進(jìn)行額外的處理瑟押，所以項(xiàng)目中只用到了 state 和 mutations。在 state 中存儲(chǔ)了 city 數(shù)據(jù)星掰，然后在 mutation 里定義事件類型和函數(shù) changeCity
store
index.js
mutations.js
state.js
state.js
let defaultCity = '上海'
try {
if (localStorage.city) {
defaultCity = localStorage.city
}
} catch (e) {}
export default {
city: defaultCity
}
mutations.js
export default {
changeCity (state, city) {
state.city = city
try {
localStorage.city = city
} catch (e) {}
}
}
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations
})
Home.vue 組件多望，在計(jì)算屬性中，this.$store.state.xxx氢烘，在這個(gè)項(xiàng)目中是 this.$store.state.city可以獲取到 state 數(shù)據(jù)怀偷。當(dāng)然，為了使代碼更加簡(jiǎn)潔播玖，用 mapState 將 this.xxx 映射為 this.$store.state.xxx椎工。
在 List.vue 中，通過 commit 來觸發(fā) mutations 里面的方法進(jìn)行數(shù)據(jù)的修改。同樣晋渺，為了使代碼更加簡(jiǎn)潔镰绎，引入 mapMutations 將 this.changeCity(city) 映射為 this.$store.commit('changeCity', city)。
【city/List.vue 具體是】
import { mapState, mapMutations } from 'vuex'
這樣就實(shí)現(xiàn)了這幾個(gè)組件的數(shù)據(jù)共享木西。
3.項(xiàng)目收獲
理解整個(gè)vue項(xiàng)目的開發(fā)流程畴栖，上手中小vue項(xiàng)目的開發(fā)，技術(shù)點(diǎn)如下：
Vue Router 來做多頁面的路由
Vuex 多個(gè)組件的數(shù)據(jù)共享
插件swiper實(shí)現(xiàn)頁面輪播效果
Axios 來進(jìn)行 Ajax 數(shù)據(jù)的獲取移動(dòng)端頁面布局技巧
stylus 編寫前端的樣式
公用組件的拆分
規(guī)范的代碼編寫
