Vue.js 2.0实战项目

基于Vue + Vuex + Vue-router + Webpack 2.0

打造移动端音乐WebAPP，实现了轮播图、音乐推荐、歌手列表、音乐搜索、注册等功能。

技术栈

  • MVVM框架：Vue.js 2.0
  • 状态管理：Vuex
  • 前端路由：Vue-router
  • 数据交互：Vue-resource、axios、jsonp
  • 打包工具：webpack 2.0
  • 环境配置：node + npm
  • 语言：es6

项目运行

git clone https://github.com/caochangkui/musicApp-by-vue.git

cd wechat-by-vue

npm install

npm run dev //服务端运行，运行后访问 http://localhost:6666)

npm run build //项目打包

项目预览

点击这里预览项目 （在chrome手机模式下预览）

移动端扫描下方二维码可直接打开

页面部分截图

音乐推荐页面

歌手列表

搜索页面和个人中心页面

基于vue全家桶制作的移动端音乐WebApp的更多相关文章

  1. 基于 Vue 全家桶制作的移动端音乐 WebApp

  2. 基于Vue全家桶制作的的高仿美团APP

    鸣谢:该项目核心部分参考了慕课网精英讲师ustbhuangyi的课程,其余部分高仿美团APP构建. 前端菜鸟项目,大佬们轻喷~ 美团外卖APP

  3. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  4. 转载： 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  5. 基于 vue 全家桶的 spa 项目脚手架

    项目简介 Github: https://github.com/hanan198501/vue-spa-template 我们基于 vue-cli 脚手架生成项目模板做了一些改造,加入了 vue-ro ...

  6. 基于Vue全家桶开发的前端组件管理平台

    项目背景 项目背景是外包类建站公司里,设计环节沉淀了大量可复用组件,设计师往往只需要微调组件就拼凑出页面,交付给前端,理论上这些组件在前端也可以复用,但实际上前端每次都要重新实现整个页面,浪费很多人力 ...

  7. 开源一套基于vue全家桶的webapp

    一.设计初衷 原本今年就是有一个打算要做一套商业的作品,恰巧目前离职,在找工作的过程中,所以有时间闲下来沉淀对原本的知识进行梳理. 说一个题外话,就是由于博主之前是很早一批使用vue的用户,也就是距今 ...

  8. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  9. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

随机推荐

  1. C#多线程的用法8-线程间的协作AutoResetEvent

    AutoResetEvent自动重置事件,与ManualResetEvent是相对的而言.它同样用于线程间同步,请对照<C#多线程的用法7-线程间的协作ManualResetEvent>进 ...

  2. 系统监控工具-glances

    作为运维不仅要时时监控系统,还需要优雅的装13,当别人还在命令的小黑框里敲打那个top命令去查看系统性能的时候,我们带你使用web端监控系统性能 glances 是利用Python语言开发,的监控工具 ...

  3. Netstat Commands for Linux Network Management

    netstat (network statistics) is a command line tool for monitoring network connections both incoming ...

  4. 设置联想键盘恢复F1~F12默认按键的操作办法

    背景 默认都是笔记本键盘才有Fn组合功能键,台式机很少有.今天领到的是联想键盘,给我的台式机使用后F12很麻烦,必须Fn+F12才可以. 需求 恢复默认的F1~F12功能 方案 只需要下载驱动安装: ...

  5. 【Nginx】开启 gzip和缓存

    Nginx 开启 gzip和缓存 时间:2016-09-23 16:42:37 nginx 是一个高性能的 Web 服务器,之前也写过一些关于 nginx 的文章.为了提高博客的响应速度,可以从设置 ...

  6. NOIP模拟赛-2018.11.5

    NOIP模拟赛 好像最近每天都会有模拟赛了.今天从高二逃考试跑到高一机房,然而高一也要考试,这回好像没有拒绝的理由了. 今天的模拟赛好像很有技术含量的感觉. T1:xgy断句. 好诡异的题目,首先给出 ...

  7. Mac svn使用学习-1-简介

    在Windows环境中,可以使用TortoiseSVN来搭建svn环境.但是由于Mac自带了svn的服务器端和客户端功能,因此可以直接使用svn功能. svn即subversion,Subversio ...

  8. Oracle RMAN 恢复数据库到不同主机（一）

    一.RMAN 备份的内容 RMAN做数据库全备时包含了 数据文件.归档日志.控制文件和参数文件和备份日志,如下: arch_20160223_08qukp2t_1_1  arch_20160223_0 ...

  9. Git同时使用不同平台代码仓库

    问题描述 公司项目使用代码仓库为gitinn/gitlab等,个人项目使用github进行托管,而公司项目和个人项目设置的邮箱和用户名是不同的,而ssh的密钥对又是基于这两个信息生成的,所以此时想要同 ...

  10. 关于css浮动的一点思考

    浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: ...