专栏首页Nian糕的私人厨房Vue2.0 定制一款属于自己的音乐 WebApp

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 条评论
登录 后参与评论

相关文章

  • Bootstrap 介绍

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包,该框架能帮助我们快速开发 web 页面以及响应式网站,我们能够使用 Bootstra...

    Nian糕
  • WebPack 模块化打包工具(上)

    本篇博文的内容根据 入门 Webpack,看这篇就够了 该篇文章总结而来,其代码、模块示例、功能拓展部分均有所删减,若是想了解更多关于 WebPack 的详细内...

    Nian糕
  • React 基础知识

    在正式讲解 React 之前,我们需要对 WebPack 部分做一个简单的介绍,而 WebPack 0 基础的同学,可以先参考 WebPack 模块化打包工具(...

    Nian糕
  • 在webpack中配置vue.js

    Dream城堡
  • 2. Vue.js 基本代码

    Vue框架是渐进式的框架,也就是说可以使用引用js库的方式来逐步替换已有的项目内容。也可以直接用cli直接模板部署。

    Devops海洋的渔夫
  • 使用Webpack提升Vue.js应用程序的4种方法(翻译)

    本文翻译自,翻译技巧不太好,不喜勿碰 : 4 Ways To Boost Your Vue.js App With Webpack 众所周知,webpack 是...

    公众号---志学Python
  • VueJS && ReactJS 如何?听听别人怎么说

    使用所有新的库和框架,很难跟上所有这些库和框架,也就是说,这就需要您决定哪些是值得花时间的。

    笔阁
  • vue项目搭建及基本配置

    准备阶段会将项目环境配置完毕,包含 node、 npm、 webpack和 vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。

    流眸
  • React:Redux源码分析

    Redux 是JavaScript 应用的状态管理容器,提供集中式、可预测的状态管理。

    WEBJ2EE
  • webpack实战——资源输入与输出

    前两篇的博客中提及,webpack主要作用是对 解决模块之间的依赖,把各个模块按照特定的规则和顺序组织在一起,那么我们就要对资源处理的流程有一个了解。各个流程如...

    流眸

扫码关注云+社区

领取腾讯云代金券