本文为转载，原文：Vue学习笔记实战篇——音乐播放器 · 整体布局
创建项目
使用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>
个人信息页面增加了一些动画。这边的页面都是空白页面。这里仅做布局，具体内容以后再填充。
最后的运行结果：
个人收藏示例界面：
音乐榜单示例界面：
点击界面头部的人像部分可滑出个人信息：
点击个人信息右侧的模糊部分可退出个人信息，返回原有界面。
完
本文为原创，转载请注明出处
