趁机做一个vue项目回顾，以便以后上手方便，也能巩固记忆
项目结构如下，一一细说。
image.png
1.index.html
image.png
2.src/main.js
包含路由，数据集中管理（store），交互（axios），移动端的滑动手势组件（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'//是饿了么的一个通用组件，button，mean。。
import store from './store'
import axios from 'axios'
import Common from './assets/js/common'
import AlloyFinger from 'alloyfinger'//手势控制组件
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',//这个id名要与index.html中的id名一致
router,
store,
components: { App },
template: '<App/>'
})
3.src/App.vue
单页面转换就在这个mian里面进行，加了transitionName是为了页面转换效果更好，css样式在最下面。还有其他的一些页面part，先引用再在components里放。至于watch里面的代码功能是为了根据退出/前进决定滑动的css样式效果。
<template>
<div id="app">
<!--这个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文件夹里放各种页面组件，assets里是静态文件（图片，js等），router里面是路由跳转index.js文件，store是根据vuex进行数据管理的文件，分了多个模块。
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.组件页面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>本地音乐<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>我的电台<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">我喜欢的音乐</p>
<p class="num">{{songlikelistLength}}首</p>
<i class="fa fa-ellipsis-v tool"></i>
</div>
</div>
</li>
</ul>
</div>
<!--创建的歌单-->
<div class="songlist-row-s">
<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 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的内容，可以与后台服务器，数据库连接有关
axios.get('/api/favorite').then((res)=>{
this_.songlikelistLength = res.data.length;
});
},
methods:{
swipeHandler(e){
console.log("swipe" + e.direction);
},
...mapActions(['aaFn']),
gofavoriteList(item_){
//带着id跳转到favorite_list页面
this.$router.push({
name: 'favorite_list',
params: {
id:item_
}
});
}
},
components:{
HeadNav
}
}
</script>
