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.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"></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
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
