趁機(jī)做一個(gè)vue項(xiàng)目回顧，以便以后上手方便氏身，也能鞏固記憶
項(xiàng)目結(jié)構(gòu)如下，一一細(xì)說(shuō)惑畴。
image.png
1.index.html
image.png
2.src/main.js
包含路由蛋欣，數(shù)據(jù)集中管理（store），交互（axios）如贷，移動(dòng)端的滑動(dòng)手勢(shì)組件（alloyfinger）陷虎，公共js方法（Common）等等
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import mint from 'mint-ui'//是餓了么的一個(gè)通用組件，button杠袱，mean尚猿。。
import store from './store'
import axios from 'axios'
import Common from './assets/js/common'
import AlloyFinger from 'alloyfinger'//手勢(shì)控制組件
import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue'
Vue.use(mint);
Vue.use(AlloyFingerPlugin,{
AlloyFinger
})
Vue.prototype.common = Common;//引用公共js
Vue.config.productionTip = false
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
el: '#app',//這個(gè)id名要與index.html中的id名一致
router,
store,
components: { App },
template: '<App/>'
})
3.src/App.vue
單頁(yè)面轉(zhuǎn)換就在這個(gè)mian里面進(jìn)行霞掺，加了transitionName是為了頁(yè)面轉(zhuǎn)換效果更好谊路，css樣式在最下面。還有其他的一些頁(yè)面part菩彬，先引用再在components里放缠劝。至于watch里面的代碼功能是為了根據(jù)退出/前進(jìn)決定滑動(dòng)的css樣式效果潮梯。
<template>
<div id="app">
<!--這個(gè)id取啥名兒不重要-->
<!--<HeadNav></HeadNav>-->
<div id="main">
<transition :name="transitionName">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
<!--<keep-alive>-->
<!--<router-view></router-view>-->
<!--</keep-alive>-->
</div>
<Footsong></Footsong>
<slider></slider>
<!--歌曲的操作列表-->
<Ellipsis></Ellipsis>
<!--收藏到歌單-->
<WhichSong></WhichSong>
<!--等待框-->
<Loading></Loading>
</div>
</template>
<script>
import 'font-awesome/css/font-awesome.min.css'
import './assets/css/common.css'
import Footsong from './components/footsong'
import Slider from './components/slider'
import Ellipsis from './components/tool/ellipsis'
import WhichSong from './components/tool/whichsongList'
import Loading from './components/tool/loading'
export default {
name: 'App',
data(){
return{
transitionName:''
}
},
mounted(){
this.width_s = document.documentElement.clientWidth;
},
components:{
Footsong,Slider,Ellipsis,WhichSong,Loading
},
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length;
const fromDepth = from.path.split('/').length;
this.transitionName = toDepth < fromDepth ? 'slide-left' : 'slide-right';
}
}
}
</script>
<style>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all .5s;
position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
</style>
4.components文件夾里放各種頁(yè)面組件，assets里是靜態(tài)文件（圖片惨恭，js等）秉馏，router里面是路由跳轉(zhuǎn)index.js文件，store是根據(jù)vuex進(jìn)行數(shù)據(jù)管理的文件脱羡，分了多個(gè)模塊萝究。
5.路由router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Mylist from '../components/mylist'
import SongPage from '../components/songPage'
import VideoPage from '../components/videoPage'
...
const router = new Router({
routes: [
{
path: '/',
name: 'mylist',
component: Mylist
},
{
path: '/mylist',
name: 'mylist',
component: Mylist
},
{
path: '/songPage',
name: 'songPage',
component: SongPage
}, {
path: '/videoPage',
name: 'videoPage',
component: VideoPage
}
...
]
})
export default router
6.組件頁(yè)面components/mylist.vue
<template>
<div class="my-list" id="my-list" :style="{'width':this.$store.state.width_s+'px'}">
<HeadNav></HeadNav>
<!--列表-->
<ul class="list-row-s">
<li> <i class="fa fa-code"></i>本地音樂(lè)<span>2</span></li>
<li> <i class="fa fa-address-book"></i>最近播放<span>23</span></li>
<li> <i class="fa fa-eye-slash"></i>下載管理<span>3</span></li>
<li> <i class="fa fa-random"></i>我的電臺(tái)<span>13</span></li>
<li> <i class="fa fa-backward"></i>我的收藏<span>4</span></li>
</ul>
<!--收藏的歌單-->
<div class="songlist-row-s" v-finger:swipe="swipeHandler">
<p class="title"><i class="fa fa-angle-down down"></i>收藏的歌單 <i class="fa fa-cog tool"></i></p>
<ul class="songlist-row-s">
<li @click="gofavoriteList()">
<img src="http://p1.music.126.net/9ES51P3Q9n8FkbE-OEJscQ==/109951163674675114.jpg?param=140y140" alt="">
<div class="context">
<div class="text">
<p class="title">我喜歡的音樂(lè)</p>
<p class="num">{{songlikelistLength}}首</p>
<i class="fa fa-ellipsis-v tool"></i>
</div>
</div>
</li>
</ul>
</div>
<!--創(chuàng)建的歌單-->
<div class="songlist-row-s">
<p class="title"><i class="fa fa-angle-down down"></i>創(chuàng)建的歌單 <i class="fa fa-cog tool"></i></p>
<ul class="songlist-row-s">
<li v-for="(item,k) in songcollectList" @click="gofavoriteList(item)" v-if="k<6">
<img :src="item.coverImgUrl" alt="">
<div class="context">
<div class="text">
<p class="title">{{item.name}}</p>
<p class="num">{{item.trackCount}}首</p>
<i class="fa fa-ellipsis-v tool"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { mapGetters,mapState,mapActions} from 'vuex'
import HeadNav from './../components/header/HeadNav'
export default {
name: "mylist",
data(){
return {
songlikelistLength:0,
songcollectList:[]
}
},
mounted(){
var this_ = this;
this.common.ajaxGet('https://api.bzqll.com/music/netease/search?key=579621905&s=something&type=list&limit=100&offset=0',function (res) {
this_.songcollectList = res.data.data.playlists;
});
//在config/index.js里有配置api的內(nèi)容，可以與后臺(tái)服務(wù)器锉罐，數(shù)據(jù)庫(kù)連接有關(guān)
axios.get('/api/favorite').then((res)=>{
this_.songlikelistLength = res.data.length;
});
},
methods:{
swipeHandler(e){
console.log("swipe" + e.direction);
},
...mapActions(['aaFn']),
gofavoriteList(item_){
//帶著id跳轉(zhuǎn)到favorite_list頁(yè)面
this.$router.push({
name: 'favorite_list',
params: {
id:item_
}
});
}
},
components:{
HeadNav
}
}
</script>
