vue音乐播放器之入门篇

第一章

前言

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

所以看起来会比较轻松，不过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-facefont-family: "iconfont"// 注意有url的地方，原来是同一目录下，所以直接使用就好了，现在我是把它放在src/common/fonts// stylus文件是src/common/stylussrc: 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-"]
.iconfontfont-family: "iconfont" !importantfont-size: 16pxfont-style: normal-webkit-font-smoothing: antialiased-moz-osx-font-smoothing: grayscale.icon-002-lock:beforecontent: "\e635".icon-001-courthouse:beforecontent: "\e636".icon-005-prisoner:beforecontent: "\e637".icon-004-judge:beforecontent: "\e638".icon-003-cop:beforecontent: "\e639".icon-008-bible:beforecontent: "\e63a".icon-006-prisoner:beforecontent: "\e63b".icon-007-detective:beforecontent: "\e63c".icon-011-shield:beforecontent: "\e63d".icon-019-cctv:beforecontent: "\e63e".icon-020-knife:beforecontent: "\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".tabdisplay: flexheight: 44pxline-height: 44pxfont-size: $font-size-medium.tab-itemflex: 1text-align: center.tab-linkpadding-bottom: 5pxcolor: $color-text-l&.router-link-active.tab-linkcolor: $color-themeborder-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-headerposition: relativeheight: 44pxtext-align: centercolor: $color-themefont-size: 0.icondisplay: inline-blockvertical-align: topmargin-top: 6pxwidth: 30pxheight: 32pxmargin-right: 9pxbg-image('logo')background-size: 30px 32px.textdisplay: inline-blockvertical-align: topline-height: 44pxfont-size: $font-size-large.mineposition: absolutetop: 0right: 0.icon-minedisplay: blockpadding: 12pxfont-size: 20pxcolor: $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别名配置简单，但是实用性很高。然后看的出来我很喜欢贴别人博客，而不喜欢自己再写一遍教程，原因就是我比较懒。对于一些文件结构有点迷惑的地方，可以看播放器的第一篇，还是说我每一篇文章都贴那个文件结构图? 如果有不懂可以提到评论，大家一起讨论。