Vue学习笔记实战篇——音乐播放器 · 整体布局

2017-07-31 本文已影响1278人 ChainZhang

创建项目

使用vue-cli脚手架工具在自己指定的目录创建项目chain-vue-music，命令如下：

vue init webpack chain-vue-music

创建成功后，执行以下命令，安装依赖

cd chain-vue-music
npm install

各种依赖成功安装后，再根据我们的需求安装vue插件，这里我暂时先安装vuex, vue-router, vue-resource, mint-ui，命令如下：

npm install vuex --save
npm install vue-router --save
npm install vue-resource --save
npm install mint-ui --save

以上全部安装成功后，我们可以执行以下命令，看下我们最初的项目：

npm run dev

结果如下：

项目布局

用编译器打开我们创建的项目，我们在src中创建以下目录：

pages : 用于存放我们的页面组件

router : 用于我们书写前端路由
store : 用处存放我的store，在该文件夹内再新建 mudules文件夹，用来存放各模块的store
components : 是已经存在的目录，我们把里面的Hello.vue文件删除，该目录用于存放公用组件

布局代码

index.html

在根目录的index.html文件中引入font-awesome:

<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

我们的项目中将会使用部分的font-awesome的icon图标。

router

这里暂时先添加项目中的3个主要页面的路由，以后有需求再补充。

import Vue from 'vue'
import Router from 'vue-router'
import MyCollect from '@/pages/MyCollect'
import RankList from '@/pages/RankList'
import Search from '@/pages/Search'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/',
      name:'my-collect',
      component:MyCollect
    },
    {
      path:'/rank-list',
      name:'rank-list',
      component:RankList
    },
    {
      path:'/search',
      name:'search',
      component:Search
    }
  ]
})

代码中引用的3个组件，会在下面详细描述。

store

之前的需求我们提到了我们的个人信息页面，是点击头部的相关位置从左侧滑动出来的，然后在个人页面中，再点击某个部位再滑出去。所以我们需要一个全局的状态来记录这个页面是否展示。我们在store的modules目录下创建personal.js 模块用来处理个人信息。
目前先处理页面是否展示状态，以及显示界面和隐藏界面的的mutation其他的后面有需求再补充。代码如下：

const state = {
    isMenuShow:false
}

const mutations = {
    hideMenu(state){
        state.isMenuShow = false;
    },
    showMenu(state){
        state.isMenuShow = true;
    }
}

export default({
    state,
    mutations
})

这个子模块建立好之后，我们自然需要引用他。所以，在store目录下创建index.js文件用来组装store并导出。index.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import personal from './modules/personal'

Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        personal
    }
})

main.js

至此，我们的router和store都建立好了。接下来就是在main.js中引用了, 以及对mint-ui的引用：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(Mint)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

conpoments

之前的需求中提到，我们的页面都有个共用的，固定位置的头部和底部。所以我们在这个文件夹里，先创建两个组件MHeader, MFooter, 其代码如下：

MHeader

<template>
    <div class="header">
        <div class="header-left">
            <i class="fa fa-user fa-3x" @click="showMenu"></i>
        </div>
        <div class="header-center">
            <router-link to="/">
                <i class="fa fa-heart fa-3x"></i>
            </router-link>
            <router-link to="/rank-list">
                <i class="fa fa-music fa-3x"></i>
            </router-link>
            <router-link to="/search">
                <i class="fa fa-search fa-3x"></i>
            </router-link>
        </div>
    </div>
</template>
<script>
    export default({
        computed:{
            isMenuShow(){
                return this.$store.state.personal.isMenuShow
            }
        },
        methods:{
            showMenu(){
                this.$store.commit('showMenu')
            }
        }
    })
</script>
<style scoped>
    .header{
        background-color: skyblue;
        margin: 0 auto;
        vertical-align: center;
        height: 100px;
        position:relative;
    }
    .header-left{
        float: left; 
        margin-left: 15px;
        margin-top: 25px;
    }
    .header-right{
        float:right;
        margin-right: 15px;
        margin-top: 25px;
    }
    .header-center{
        margin-top: 25px;
        display: inline-block;
        text-align: center;
    }
    .header-center i{
        margin-left: 25px;
        margin-right: 25px;
    }
    .active{
        background-color: rebeccapurple;
    }
</style>

pages

最后我们在pages目录中创建我们的4个主要页面。

MyCollect.vue

我的个人收藏

<template>
    <div>
        个人收藏
    </div>
</template>

RankList.vue

音乐榜单

<template>
    <div>
        音乐榜单
    </div>
</template>

Search.vue

搜索

<template>
    <div>
        搜索
    </div>
</template>

PersonalInfo.vue

个人信息

<template>
    <div class="personal">
        <transition name="side">
            <div class="personal-content" v-show="isMenuShow">
            </div>
        </transition>
        <transition name="fade">
            <div class="personal-mask" v-show="isMenuShow" @click="hideMenu">
            </div>
        </transition>
    </div>
</template>
<script>
    export default({
        computed:{
            isMenuShow(){
                return this.$store.state.personal.isMenuShow
            }
        },
        methods:{
            hideMenu(){
                this.$store.commit('hideMenu')
            }
        }
    })
</script>
<style scoped>
    .personal-mask{
        position:fixed;
        top:0;
        bottom: 0;
        left:0;
        right:0;
        opacity: 0.3;
        width:100%;
        height: 100%;
        z-index:10;
        background:rgba(0,0,0,0.5)
    }
    .personal-content{
        position:fixed;
        top:0;
        bottom: 0;
        left:0;
        right:0;
        width: 80%;
        overflow-y:auto;
        z-index:11;
        height: 100%;
        background-color: #fff
    }
    .side-enter-to, .side-leave-to{
        transition: transform 0.5s
    }   
    .side-enter, .side-leave-to{
        transform:translate3d(-100%,0,0)
    }
    .fade-enter-to, .fade-leave-to{
        transition: opacity 0.3s
    }   
    .fade-enter, .fade-leave-to{
        opacity: 0
    }
</style>

个人信息页面增加了一些动画。这边的页面都是空白页面。这里仅做布局，具体内容以后再填充。
最后的运行结果：
个人收藏示例界面：

音乐榜单示例界面：

点击界面头部的人像部分可滑出个人信息：

点击个人信息右侧的模糊部分可退出个人信息，返回原有界面。

完

本文为原创，转载请注明出处

上一节：Vue学习笔记实战篇——音乐播放器 · 需求说明
 返回目录