Vue2.0 定制一款属于自己的音乐 WebApp
Vue2.0 定制一款属于自己的音乐 WebApp
本次的系列博文的知识点讲解和代码，主要是来自于Vue 2.0 高级实战-开发移动端音乐WebApp课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可
0 系列文章目录
0.5 写在前面
Vue.js作为一款极具流行的MVVM框架，该系列文章主要是针对Vue.js的高级应用，所以我们不会讲解太多关于样式部分的知识点，我们会预先写好大部分的样式，在项目中直接引用
同时还需要大家具有一定的Vue.js基础和Vue.js的实际开发经验，关于Vue知识点讲解的文章有很多，在这里就不对Vue.js的基础知识进行介绍，推荐大家到Vue.js 官网进行学习，并且还需要具备Node.js、npm和WebPack的使用经验，对这部分知识不是很了解的同学，可以先参考WebPack 模块化打包工具（上） 、WebPack 模块化打包工具（下）这两篇文章的讲解，再开始该项目的学习
01 项目初始化
全局安装vue-cli脚手架工具，待安装完成后，初始化vue\_music项目
npm i vue-cli -g
vue init webpack vue_music根据自己的需求填入项目名、项目描述及作者名称，我们在这里选择运行时（省掉了模板编译过程），引入vue-router和ESLint，不需要测试相关，最后运行npm
随后根据命令面板提示输入相应命令，输入http://localhost:8080看到启动页面即成功
运行如下命令，安装项目中所需要的依赖
npm i babel-runtime fastclick -S
npm i stylus stylus-loader babel-polyfill -D02 目录结构
上图是我们项目的目录结构，因为我们大部分的代码都会写在src文件夹中，所以我们就着重关注该文件夹下都存放了什么东西，api文件夹存放一些跟后端请求的代码，如ajax和jsonp的请求，common文件夹存放通用的静态资源，如字体，图片，js，样式，components文件夹存放通用组件，router文件夹存放路由相关文件，store文件夹存放 vuex相关代码，main.js入口文件
项目中使用到 CSS 预处理框架是stylus ，对其语法不熟悉的同学可先到其官网进行学习，variable.styl为变量定义的样式文件，mixin.styl文件定义一些函数，方便我们的调用
字体图标的引用方式为unicode引用，对字体图标不熟悉的同学，可参考CSS 字体图标引用这篇文章的讲解进行学习
我们在项目构建时，引入了ESLint，这是能规范我们代码风格的一个工具，但其中一些反人类的默认规则真的吐槽到不行，如代码末尾不能加分号，空行上不能尾随空白，Tab键和空格键不能混用等等，比较简单粗暴的方法是，直接把build/webpack.base.conf.js配置文件中的ESLint 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]
}
}03 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 上了，有需要的同学可自行下载