本文为转载，原文：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:
我们的项目中将会使用部分的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: 'conpoments
之前的需求中提到，我们的页面都有个共用的，固定位置的头部和底部。所以我们在这个文件夹里，先创建两个组件MHeader, MFooter, 其代码如下：
MHeader
pages
最后我们在pages目录中创建我们的4个主要页面。
MyCollect.vue
我的个人收藏
个人收藏
RankList.vue
音乐榜单
音乐榜单
Search.vue
搜索
搜索
PersonalInfo.vue
个人信息
个人信息页面增加了一些动画。这边的页面都是空白页面。这里仅做布局，具体内容以后再填充。
最后的运行结果：
个人收藏示例界面：
音乐榜单示例界面：
点击界面头部的人像部分可滑出个人信息：
点击个人信息右侧的模糊部分可退出个人信息，返回原有界面。
完
本文为原创，转载请注明出处
上一节：Vue学习笔记实战篇——音乐播放器 · 需求说明
返回目录