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. tomcat 闪退处理

    参考文章:https://www.cnblogs.com/lanjianhappy/p/6491436.html 首先确保JDK环境变量已经配置好! 设置jdk环境 变量:https://jingya ...

  2. Hadoop 命令 && Web UI

    0. 说明 Hadoop 命令合集 && Web UI 1. HDFS 命令 [1.0 启动所有 && 关闭所有进程] 相当于启动 HDFS 和 YARN # 启动所有 ...

  3. 【转】Java学习---JDK、JRE和JVM的关系

    [原文]https://www.toutiao.com/i6591348937267872269/ 首先是JDK JDK(Java Development Kit) 是 Java 语言的软件开发工具包 ...

  4. MySQL数据库的安装与基本操作

    实验要求: 1.安装mysql源码包,并做相关的配置和优化路径,启动服务. 步骤: 1)先查询MySQL软件的安装情况,如果有建议将其卸载, 2)安装光盘自带的ncurses-devel包. 3)My ...

  5. 乘风破浪：LeetCode真题_022_Generate Parentheses

    乘风破浪:LeetCode真题_022_Generate Parentheses 一.前言 关于括号的题目,我们已经遇到过了验证正确性的题目,现在让我们生成合法的括号列表,怎么办呢?想来想去还是递归比 ...

  6. css常见知识点

    1.内核区分 希望某一个浏览器能一统江湖 -ms-transform:rotate(7deg); //-ms代表ie内核识别码 -moz-transform:rotate(7deg); //-moz代 ...

  7. [LOJ 6031]「雅礼集训 2017 Day1」字符串

    [LOJ 6031] 「雅礼集训 2017 Day1」字符串 题意 给定一个长度为 \(n\) 的字符串 \(s\), \(m\) 对 \((l_i,r_i)\), 回答 \(q\) 个询问. 每个询 ...

  8. 深入了解MyBatis二级缓存

    深入了解MyBatis二级缓存 标签: mybatis二级缓存 2015-03-30 08:57 41446人阅读 评论(13) 收藏 举报  分类: Mybatis(51)  版权声明:版权归博主所 ...

  9. cpu的核心数及线程关系

    CPU个数.核心数.逻辑CPU个数:一个物理CPU可以有多个核心,一个CPU核就是一个物理线程,由英特尔开发超线程技术可以把一个物理线程模拟出两个线程来使用,使得单个核心用起来像两个核一样,以充分发挥 ...

  10. HTML DOM item() 方法

    一直不知道javascript还有类似jQ里面eq()的函数,原来原生javascript的item()有类似功能: 由于是原生javascript,先补习下children和childNodes的区 ...