Fork me on GitHub
余鸢

Vue音乐播放器开发（一）：页面骨架开发和路由的应用

发表于 | 分类于

准备工作

安装vue-cli脚手架

1
$ vue init webpack music

v1

在这里，需要注意的是，使用ESLint来标准化代码。如图红框部分。

搭建Vue脚手架，参考搭建vue脚手架

准备项目目录介绍记忆图标字体、公共样式等资源，如图

v2

添加约束

index.html

1
2
3
4
5
6
7
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,
          maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>music</title>
  </head>

注意：一定要记得加上<meta name="viewport" ... >设置，这是更好的适配移动端的代码。

在package.json添加依赖

1
2
3
4
5
6
7
8
9
10
11
"dependencies": {
    "babel-runtime": "^6.26.0",
    "vue": "^2.4.2",
    "vue-router": "^2.7.0",
    "fastclick": "^1.0.6"
  },
"devDependencies": {
  ...
  "babel-polyfill": "^6.26.0",
  ...
}

babel-runtime对ES6的语法做转义。

fastclick解决移动端点击300毫秒延迟的问题。

babel-polyfill对ES6的API做转义。

引入

npm install安装之后在main.js里引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
// import router from './router'
import fastclick from 'fastclick'
import 'common/stylus/index.styl'
Vue.config.productionTip = false
fastclick.attach(document.body)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})
使用css预编译处理器stylus
1
$ npm install style-loader css-loader stylus stylus-loader -D

引入组件要注意该组件的路径，这里我在webpack.base.config.js里修改别名，来对接下来要用的组件路径简便化，更直观些。

webpack.base.config.js

1
2
3
4
5
6
7
8
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components')
    }
  },

修改过webpack.base.config.js文件后需重启服务器。

页面骨架开发

编写header组件

1
2
3
4
5
6
7
8
9
10
<template>
  <div class="m-header">
    <div class="icon"></div>
    <h1 class="text">Music</h1>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {}
</script>

引入到App.vue挂载到页面

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div id="app">
    <m-header></m-header>
  </div>
</template>
<script type="text/ecmascript-6">
  import MHeader from 'components/m-header/m-header'
  export default {
    components: {
      MHeader
    }
  }
</script>

效果如图：

v3

编写页面入口基础代码

这里代码省略，直接上图

v4

导航栏组件开发

tab.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div class="tab">
    <router-link tag="div" class="tab-item" to="/recommend">
      <span class="tab-link">推荐</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/singer">
      <span class="tab-link">歌手</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/rank">
      <span class="tab-link">排行</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/search">
      <span class="tab-link">搜索</span>
    </router-link>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {}
</script>

路由配置

在index.js里配置基础组件

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import Vue from 'vue'
import Router from 'vue-router'
import Recommend from 'components/recommend/recommend'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'
import Search from 'components/search/search'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/recommend'
    },
    {
      path: '/recommend',
      component: Recommend
    },
    {
      path: '/singer',
      component: Singer
    },
    {
      path: '/rank',
      component: Rank
    },
    {
      path: '/search',
      component: Search
    }
  ]
})

v5

效果：

v6

具体源代码

参考：https://github.com/kakajing/vue-music