vue音乐播放器之入门篇

最新推荐文章于 2024-07-16 01:25:59 发布

一像素的执着

最新推荐文章于 2024-07-16 01:25:59 发布

阅读量623

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/eagle_zcl/article/details/105964667

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一章

前言

这里对应的是课程中的第一章到第三章，因为前三章内容比较少，我就把它们合并成一章。我比较懒，要让我多写三章的内容，没门。这一章会比较简单，是一个项目的准备过程，仅仅开发了两个很简单的基础组件。

所以看起来会比较轻松，不过tab组件应该在工作中应该会比较有用，这里会对vue-router进行简单运用。希望大家有所得，也希望自己在整理的过程中，能够把这个月学到都能通过文字写出来。我希望通过我的文字可以让大家体验到一个完整的开发过程，也能帮助大家解决一些在工作中遇到的需求。

最后考虑有的是开始接触vue的童鞋，所以我给大家找来Vue2.0 搭建Vue脚手架（vue-cli），这篇博客可以说是我vue.js的启蒙博客。所以接下来我就不书写关于搭建vue-cli的教程，我觉得我要写肯定不如博主写的好。

正文

1.1 配置alias

其实就是一个配置别名的方式，配置起来很简单，但是很简单。

在build文件夹下面的webpack.base.conf.js文件中搜索alias，按我的例子那样书写。

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'src': resolve('src'),
       // 例子
      'components': resolve('src/components'),
    
}

好处：比如说你要书写如下代码

// 原来
import Playlist from 'src/components/playlist/playlist'
// 配置完
import Playlist from 'components/playlist/playlist'
// src/components 这个使用频率是很高，这样减少了代码的重复

1.2 小图标的使用

可以借鉴一下这篇博客 ,把你需要的图标下载下来。下载下来会有如下文件(文件只会比如下多)：

music-icon.eot

music-icon.svg

music-icon.ttf

music-icon.woff

iconfont.css

demo_index.html

你可以看下demo_index.html，这里面教你了怎么使用

然后这因为这使用了stylus，所以我们要将iconfont.css转化为icon.styl，这一步可以参考这篇博客

下面是转化成功并且修改过后的icon.styl

@font-face
  font-family: "iconfont"
  // 注意有url的地方，原来是同一目录下，所以直接使用就好了，现在我是把它放在src/common/fonts
  // stylus文件是src/common/stylus
  src: url('../fonts/iconfont.eot?2qevqt')
  src: url('../fonts/iconfont.eot?2qevqt#iefix') format('embedded-opentype'),
          url('../fonts/iconfont.ttf?2qevqt') format('truetype'),
          url('../fonts/iconfont.woff?2qevqt') format('woff'),
          url('../fonts/iconfont.svg?2qevqt#iconfont') format('svg')
  /* iOS 4.1- */
// 没有这一行代码 <i  class="iconfont icon-001-courthouse"></i> 这样才能正确使用小图标
// 有这一行代码 <i  class="icon-001-courthouse"></i>
// 老师好像用的是另外一个网站生产的小图标
[class^="icon-"], [class*=" icon-"]
.iconfont
  font-family: "iconfont" !important
  font-size: 16px
  font-style: normal
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

.icon-002-lock:before
  content: "\e635"

.icon-001-courthouse:before
  content: "\e636"

.icon-005-prisoner:before
  content: "\e637"

.icon-004-judge:before
  content: "\e638"

.icon-003-cop:before
  content: "\e639"

.icon-008-bible:before
  content: "\e63a"

.icon-006-prisoner:before
  content: "\e63b"

.icon-007-detective:before
  content: "\e63c"

.icon-011-shield:before
  content: "\e63d"

.icon-019-cctv:before
  content: "\e63e"

.icon-020-knife:before
  content: "\e63f"

1.3 路由的配置

这里就不搞安装路由的教程了，在脚手架下载模版的时候会提示你是否要安装路由

import Vue from 'vue'
import Router from 'vue-router'

// 路由懒加载 减小打包后js的体积
const Recommend = () => import('components/recommend/recommend')

// 常规 刚刚配置的alias在这里就体现了作用
import Recommend from 'components/recommend/recommend'

Vue.use(Router)

export default new Router({
  // 这个把链接中#去掉，不过上线到服务器的时候需要修改一下配置文件。详情可以看vue-router的官网
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/recommend'
    }
  ]
})

在这个项目中vue-router中运用就两块：一个是router-view的使用，还有一个是router-link的使用

<!-- 在tab中使用 -->
<router-link tag="div" class="tab-item" to="/recommend">
      <span class="tab-link">推荐</span>
</router-link>

<!-- 在app.vue中会使用，作用是进行路由跳转 -->
<keep-alive>
      <router-view></router-view>
</keep-alive>

1.4 使用stylus

要使用stylus需要安装stylus、stylus-loader，记住要在项目所在的路径下执行以下指令

cnpm install stylus --save

cnpm install stylus-loader --save

1.5 实现tab组件

<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>

<style scoped lang="stylus" rel="stylesheet/stylus">
  // 使用flex布局，利用flex:1做到每个盒子长度一致
  // 看引用stylus文件的方式 划重点要考的 common这里的没有配置alias的话就应该写成src/common
  // $color-theme有点常量的感觉，其实就是一个颜色，CSS预处理器的好处之一，可以配置全局的一些常量
  // 你要使用的话把variable的一些属性换成自己需要的属性，比如说font-size:12px
  @import "~common/stylus/variable"
  .tab
    display: flex
    height: 44px
    line-height: 44px
    font-size: $font-size-medium
    .tab-item
      flex: 1
      text-align: center
      .tab-link
        padding-bottom: 5px
        color: $color-text-l
      &.router-link-active
        .tab-link
          color: $color-theme
          border-bottom: 2px solid $color-theme
</style>

1.6 实现m-header组件

<template>
  <div class="m-header">
    <div class="icon"></div>
    <h1 class="text">X Music</h1>
    <router-link to="/user" class="mine" tag="div">
      <i class="icon-mine"></i>
    </router-link>
  </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"
  // mixin.styl 中写了一个bg-image,就是实现了背景图片函数，为啥要这么干，还是减少代码的重复
  .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>

mixinstyl

// 背景图片
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

1.7 解释一下stylus这个文件夹

└── stylus                    // 公共样式
│   │       ├── base.styl     // 对html、body 的样式控制
│   │       ├── icon.styl     // 小图标
│   │       ├── index.styl    // 在main.js中要有引用
│   │       ├── mixin.styl    // 一些处理函数，比如说背景图片
│   │       ├── reset.styl    // 重置样式，应该每个网站都会有的。
│   │       └── variable.styl // 字体、颜色的一些"常量"

结束语

我也不知道写了一些什么结束语，感觉这第一章的内容的确是太简单了，但是对于一个刚刚使用vue的新手还是会有收获的。对于一些很简单组件我会展现源码，但是对于一些复杂的组件就不展示了，还是要尊重老师的劳动成果。我要做的事情是在总结的过程中，还能给你们带来价值。其实看下来你会发现alias别名配置简单，但是实用性很高。然后看的出来我很喜欢贴别人博客，而不喜欢自己再写一遍教程，原因就是我比较懒。对于一些文件结构有点迷惑的地方，可以看播放器的第一篇，还是说我每一篇文章都贴那个文件结构图? 如果有不懂可以提到评论，大家一起讨论。