Vue音乐播放器（一）

发表于 | 分类于 |

项目简介



vue cli脚手架搭建

vue init webpack vue-music 方式

我之前安装的是vue cli3的版本，事实上cli3也能使用2.x模板：需要安装init模块

1
2
npm install -g @vue/cli-init // 安装这个模块
// 就可以使用2.x的模板：vue init webpack my-project

然后执行vue init webpack vue-music指令生成项目，同时需要配置一下部分插件的安装，具体如下：

然后进入vue-music路径下执行npm install或者cnpm install进行安装，执行npm run dev运行项目，在http://localhost:8080打开项目。【我这样做的时候，在npm install时会有些报错，然后使用cnpm install才ok】



vue create vue-music 方式

使用Vue Cli 3 的方式创建项目。

在选择配置时，选择了

其中css预处理器选择了stylus，没有选择路由的history模式，选择Eslint代码验证规则为> ESLint with error prevention only，lint规则检测选择Lint on save （// 保存就检测）。

然后cd进入vue-music路径下，执行npm run serve,在localhost:8080打开项目



项目目录准备

把一开始src里面的文件夹删除了，然后构建如下目录。

stylus

其中的variable.styl文件专门定义变量，实现样式的语义化写法：

reset.styl用于样式初始化

base.styl用于基础的样式，其中引用了variable.styl

icon.styl: 图标字体文件

index.styl: 里面按顺序一次引用了”./reset.styl”、 “./base.styl”、”./icon.styl”，注意顺序不能乱。

关于stylus还需要再安装stylus和stylus-loader，版本号见package.json



初步的小demo

此部分的代码

页面效果：

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div id="app">
    <h1>hello world</h1>
  </div>
</template>

<script>
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

#app {
  color: $color-theme;
}
</style>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import App from './App'
// import router from './router'

import 'common/stylus/index.styl'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

修改.eslintrc.js

webpack.base.conf.js添加别名

其他的坑



页面骨架开发

此部分的代码

准备

index.html加meta标签



package.json添加新的依赖

npm i babel-runtime –save //ES6语法转义相关

npm i babel-polyfill –save-dev //ES6一些api的转义

npm i fastclick –save //解决移动端点击300毫秒延迟现象

【babel-polyfill和babel-runtime的区别】

改写main.js

页面入口

m-header组件

m-header.vue

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
34
35
36
37
38
39
40
41
42
43
44
45
<template>
  <div class="m-header">
    <div class="icon"></div>
    <h1 class="text">Dunteng Music</h1>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .m-header
    position: relative
    height: 44px
    text-align: center
    color: $color-theme
    font-size: 0
    .icon
      display: inline-block
      vertical-align: top
      margin-top: 6px
      width: 30px
      height: 32px
      margin-right: 9px
      bg-image('logo')
      background-size: 30px 32px
    .text
      display: inline-block
      vertical-align: top
      line-height: 44px
      font-size: $font-size-large
    .mine
      position: absolute
      top: 0
      right: 0
      .icon-mine
        display: block
        padding: 12px
        font-size: 20px
        color: $color-theme
</style>

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div id="app">
      <m-header></m-header>
      <!-- <MHeader></MHeader>这样写也可以 -->
  </div>
</template>

<script type="text/ecmascript-6">
  import MHeader from 'components/m-header/m-header' /*这里webpack.base.config.js配置components别名*/
    
    export default{
        components:{
            MHeader
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>

webpack.base.config.js中添加别名：

这部分的效果图



路由配置+顶部tab组件

效果图：

这部分的目录树：

这部分开始建立起了路由。

以下是router/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
    }
  ]
})


另外这里我给路由切换加了一个动画效果：

App.vue代码：

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
34
35
36
37
38
<template>
  <div id="app">
    <m-header></m-header>
    <!-- <MHeader></MHeader>这样写也可以,但是不推荐，应尽量符合代码规范 -->
    <tab></tab>
    <transition>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
import MHeader from "components/m-header/m-header";
import Tab from "./components/tab/tab";
export default {
  components: {
    MHeader,
    Tab
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
// 实现路由切换动画效果
.v-enter {
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>



插播一条eslint的配置

eslint默认缩进是2格，我用4格的他就报错，真的是烦死了。在网上看到有人说现在Google等大公司都提倡缩进2格，优点是可以节省行空间，一行可写的内容更多，但是视觉反馈没那么强烈，即缩进不明显而且复杂度警告能力减弱，多层嵌套的代码往往更难理解。所以我还是习惯使用4格缩进。

遂改之：https://segmentfault.com/q/1010000013682009



(未完待续)