1.项目实现功能
首页、详情页面、搜索页面、城市选择页面
项目目录
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.实现细节和一些难点
数据获取
获取首页数据使用的是axios
安装 axios:
npm install axios --save
在 Home.vue 发送 Ajax 请求是最好的选择，这个组件获取 Ajax 数据之后，可以把数据传给每个子组件
把一些静态的文件放置在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 ‘axios’
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>
父子组件之间进行通讯
父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件
以 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
轮播在多个组件中使用
以 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实现数据共享
安装vuex
npm install vuex --save
希望在 城市列表页面 点击城市，首页右上角城市可以 进行相应的改变。
具体描述为：
项目中是为了实现城市选择列表页面和首页的数据传递，并且没有公用的组件，city/components/List.vue 、home/components/Header.vue、Home.vue组件，都需要获取到数据。
因为这个项目没有需要进行异步的操作，也不需要对数据进行额外的处理，所以项目中只用到了 state 和 mutations。在 state 中存储了 city 数据，然后在 mutation 里定义事件类型和函数 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 组件，在计算属性中，this.$store.state.xxx，在这个项目中是 this.$store.state.city可以获取到 state 数据。当然，为了使代码更加简洁，用 mapState 将 this.xxx 映射为 this.$store.state.xxx。
在 List.vue 中，通过 commit 来触发 mutations 里面的方法进行数据的修改。同样，为了使代码更加简洁，引入 mapMutations 将 this.changeCity(city) 映射为 this.$store.commit('changeCity', city)。
【city/List.vue 具体是】
import { mapState, mapMutations } from 'vuex'
这样就实现了这几个组件的数据共享。
3.项目收获
理解整个vue项目的开发流程，上手中小vue项目的开发，技术点如下：
Vue Router 来做多页面的路由
Vuex 多个组件的数据共享
插件swiper实现页面轮播效果
Axios 来进行 Ajax 数据的获取移动端页面布局技巧
stylus 编写前端的样式
公用组件的拆分
规范的代码编写
