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

Unsplash

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

授权许可

0 系列文章目录

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

Vue2.0 路由配置及Tab组件开发

Vue2.0 数据抓取及Swiper组件开发

Vue2.0 scroll 组件的抽象和应用

Vue2.0 歌手数据获取及排序

Vue2.0 歌手列表滚动及右侧快速入口实现

0.5 写在前面

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

module.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 组件

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

<template>
  <div>
      顶部栏/排行/推荐/搜索/歌手页面
  </div>
</template>

<script type="text/ecmascript-6">
</script>

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

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

// m-header.vue

<template>
  <div class="m-header">
    <div class="icon"></div>
    <h1 class="text">Nian糕音乐</h1>
    <router-link tag="div" class="mine" to="/user">
      <i class="icon-mine">&#xe64e;</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"

  .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
</style>

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

// .eslintrc.js

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

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

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

运行 npm start 启动项目

运行结果

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

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

微信小程序开发教程!博卡君第二弹【微信小程序项目结构以及配置】

前面我们转了博卡君通宵吐血赶稿的微信小程序开发教程,当时只更新了两章,现在接着发布第三章:微信小程序项目结构以及配置,第四章:微信小程序首页面开发,以下是微信小...

38240
来自专栏前端知识分享

第130天:移动端-rem布局

当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单,关键在于对不同设备的适...

64140
来自专栏ROBOTEDU

OMRONFZ系列视觉与ABB机器人的通信

ABB与OMRON之间的通信,本例采用以太网TCP无协议模式通信。通过以太网由ABB机器人程序控制ONRON视觉的场景切换,拍照判断及其判断数据的 接收。 ?...

53750
来自专栏腾讯移动品质中心TMQ的专栏

H5前端性能测试快速入门

前言 说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。那本文谈到...

33360
来自专栏我和我大前端的故事

入门微信小程序 (二)语法篇

路由在项目开发中一直是个核心点,小程序路由方面经过很好的封装,提供了几个基本的跳转方法(这三个基本够用)

1.4K20
来自专栏小白课代表

OneTab – 帮你节省 95% 的内存,让 Chrome / Firefox 重焕新生

浏览器作为我们上网的窗口,在我们的工作学习中担任着非常重要的角色,但人们想要浏览什么东西的时候,往往都是打开浏览器,打开网站,搜索关键词,尤其是你想要查某样东西...

39750
来自专栏腾讯开源的专栏

【开源公告】高性能的图片框架 LKImageKit 正式开源

LKImageKit LKImageKit 是一个高性能的图片框架,包括了图片控件,图片下载、内存缓存、磁盘缓存、图片解码、图片处理等一系列能力。合理的架构和...

40040
来自专栏分布式系统和大数据处理

HTML5触摸界面设计与开发

首先讲了移动端和电脑端的一些不同,讲到了viewport的概念和相关的虚拟像素、媒体查询,借助媒体查询来实现横屏、竖屏的区别显示。

30030
来自专栏葡萄城控件技术团队

JavaScript 性能优化技巧分享

JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中。为了提高Web应用的性能,从 JavaScript 的性能优化方向入...

35640
来自专栏杨逸轩 ' sBlog

什么是静态和动态网页?

36970

扫码关注云+社区

领取腾讯云代金券