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. 团队项目个人进展——Day08

    一.昨天工作总结 冲刺第八天,昨天看了许多关于wx.request的知识,主要测试了OBJECT参数,同时也对https方面有了一定了解 二.遇到的问题 对文档中的内容只是熟悉,理解并运用起来还存在问 ...

  2. python 复制文件到其他路径

    #!/usr/bin/env/python # -*- coding: utf-8 -*- # @Time : 2018/11/7 16:34 # @Author : ChenAdong # @Ema ...

  3. idea常规设置

    java开发目前很多都是使用IntelliJ IDEA这款神器.废话不多说,官网地址:https://www.jetbrains.com/idea/ 我一直都是保持最新版本,安装之后注册. 首先需要安 ...

  4. CPU IO MEM NETWork 监控命令

    性能优化中CPU.内存.磁盘IO.网络性能的依赖(上) 性能优化中CPU.内存.磁盘IO.网络性能的依赖(下)

  5. bufferIO，Direct io，mmap， ZeroCopy

    1 bufferIO(传统IO),Direct io(干掉内核cache),mmap(大数据映射),zeroCopy(网络IO) 2 linux 5种IO 3NIO 相关知识 这张图展示了mmap() ...

  6. Jboss7.1 local EJB lookup problem

    We are trying to lookup for an Local EJB in JBoss7.1, but we get an ClassCast Exception. This local ...

  7. RHEL6.5安装multipath多路径软件

    一.划zone(以博科光纤交换机为例) ①查看光纤交换机端口状态 RAC_SW_01:admin> switchshow Index Port Address Media Speed State ...

  8. Spark 集群搭建

    0. 说明 Spark 集群搭建 [集群规划] 服务器主机名 ip 节点配置 s101 192.168.23.101 Master s102 192.168.23.102 Worker s103 19 ...

  9. 【转】Nginx学习---Nginx&&Redis&&hcache三层缓存架构总结

    [原文]https://www.toutiao.com/i6594307974817120782/ 摘要: 对于高并发架构,毫无疑问缓存是最重要的一环,对于大量的高并发,可以采用三层缓存架构来实现,n ...

  10. win10 损坏 bios?

    自从前几个月升级为win10后,主板莫名奇妙的就出问题了,遇到3块不同型号2块技嘉b75,1块微信ph67 技嘉b75-ds3v 技嘉b75m-d3v 微星ph67s-c43 ms-7673 1.0 ...