本文為轉載，原文：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 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>
個人信息頁面增加了一些動畫。這邊的頁面都是空白頁面。這里僅做布局，具體內容以后再填充。
最后的運行結果：
個人收藏示例界面：
音樂榜單示例界面：
點擊界面頭部的人像部分可滑出個人信息：
點擊個人信息右側的模糊部分可退出個人信息，返回原有界面。
完
本文為原創，轉載請注明出處
