Vue2.0 定制一款属于自己的音乐 WebApp

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于 黄轶 在慕课网的  Vue 2.0 高级实战-开发移动端音乐WebApp 课程，由个人总结并编写，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可

授权许可

0. 写在前面

Vue.js 作为一款极具流行的 MVVM 框架，该系列文章主要是针对 Vue.js 的高级应用，所以我们不会讲解太多关于样式部分的知识点，我们会预先写好大部分的样式，在项目中直接引用

同时还需要大家具有一定的 Vue.js 基础和 Vue.js 的实际开发经验，关于 Vue 知识点讲解的文章有很多，在这里就不对 Vue.js 的基础知识进行介绍，推荐大家到 Vue.js 官网 进行学习，并且还需要具备 Node.js、npm 和 WebPack 的使用经验，对这部分知识不是很了解的同学，可以先参考 WebPack 模块化打包工具（上） 、WebPack 模块化打包工具（下） 这两篇文章的讲解，再开始该项目的学习

1. 项目初始化

全局安装 vue-cli 脚手架工具，待安装完成后，初始化 vue_music 项目

npm i vue-cli -g
vue init webpack vue_music

根据自己的需求填入项目名、项目描述及作者名称，我们在这里选择运行时（省掉了模板编译过程），引入 vue-router 和 ESLint，不需要测试相关，最后运行 NPM

项目初始化

随后根据命令面板提示输入相应命令，输入 http://localhost:8080 看到启动页面即成功

finished

运行如下命令，安装项目中所需要的依赖

npm i babel-runtime fastclick -S
npm i stylus stylus-loader babel-polyfill -D

2. 目录结构

目录结构

上图是我们项目的目录结构，因为我们大部分的代码都会写在 src 文件夹中，所以我们就着重关注该文件夹下都存放了什么东西，api 文件夹存放一些跟后端请求的代码，如 ajax 和 jsonp 的请求，common 文件夹存放通用的静态资源，如字体，图片，js，样式，components 文件夹存放通用组件，router 文件夹存放路由相关文件，store 文件夹存放 vue 相关代码，main.js 入口文件

通用静态资源

项目中使用到 CSS 预处理框架是 stylus ，对其语法不熟悉的同学可先到其官网进行学习，variable.styl 为变量定义的样式文件，mixin.styl 文件定义一些函数，方便我们的调用

字体图标的引用方式为 unicode 引用，对字体图标不熟悉的同学，可参考 CSS 字体图标引用 这篇文章的讲解进行了解

我们在项目构建时，引入了 ESLint，这是能规范我们代码风格的一个工具，但其中一些反人类的默认规则真的吐槽到不行，如代码末尾不能加分号，空行上不能尾随空白，Tab 键和空格键不能混用等等，比较简单粗暴的方法是，直接把 build/webpack.base.conf.js 配置文件中的 ESLint rules 注释掉即可，如下图

rules注释

但我还是建议大家保留 ESLint 的语法检测，这对我们在项目过程中可能会出现的一些语法或逻辑错误，有效避坑，所以就把那些不符合个人风格的规则修改掉就好了，其配置文件位于根目录，文件名为 .eslintrc.js，下面是我所修改的一些规则项，更多规则可查看官网进行配置 Configuring ESLint

// .eslintrc.jsmodule.exports = {
    ...
    rules: {        // allow async-await
        'generator-star-spacing': 'off',        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',        "no-unused-vars": 
            ["error", { 
            // 检查全局范围的变量
            "vars": "all", 
            // 这允许函数使用两个命名参数
            "args": "after-used"
            }],        // 关闭不能使用tab
        "no-tabs": 'off',        // 语句强制分号结尾
        "semi": [0],        // 文件以单一的换行符结束
        'eol-last': [0],        // 禁止混用tab和空格
        "no-mixed-spaces-and-tabs": [0],        // 函数定义时括号前面要不要有空格 
        'space-before-function-paren': [0],        // 缩进风格
        'indent': [0],        // 空行上的尾随空白
        'no-trailing-spaces': [0]
    }
}

3. Header 组件

我们预先定义好了五个组件，如下所示

Header 组件会在所有页面中出现，引用的频率最高，一个完整的顶部栏包括 APP 的名称，包括个人中心的 icon，点击可跳转到个人中心页

// m-header.vue
  @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: 7px
      width: 30px
      height: 32px
      margin-right: 2px
      bg-image('logo')
      background-size: 30px 30px
    .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: 8px
        font-size: 24px
        color: $color-theme

我们还需要在 build/webpack.base.conf.js 文件中，配置 resolve.alias 选项，来确保模块引入变得更简单

// .eslintrc.jsmodule.exports = {
    ...
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {            '@': resolve('src'),            'common': resolve('src/common'),            'components': resolve('src/components'),            'base': resolve('src/base'),            'api': resolve('src/api')
        }
    }
}

最后在 App.vue 文件中输出该模块

// App.vue

运行 npm start 启动项目

运行结果

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub  Vue_Music_01 上了，有需要的同学可自行下载

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人。

作者：Nian糕
链接：https://www.jianshu.com/p/fde852e31cda