Git Product home page Git Product logo

cloud-music's Introduction

cloud-music

vue2.x + vuex + vue-router + axios + flexible + scss 仿网易云音乐webapp

Build Setup

# 安装依赖
npm install

# 执行并预览(localhost:9000)
npm run dev

# 打包构建
npm run build

效果

简介

vue + vue-router + vuex

主体部分是vue全家桶,不解释

axios

用axios作为http模块,优雅的promise写法,可进行全局的请求拦截和改写,统一处理出错请求,设定全局的请求变量。缺点是:不支持jsonp

flexible

移动端自适应方案

scss

css 预处理器,不解释

tip

其他相关问题及解决方案

跨域

使用node反向代理跨域,详情见config/index

数据

由于网易的请求比较难扒下来,但是花费的代价有点大,因此并没有请求真是的网易接口 而是请求一份数据后存下来,以easy-mock作为后台数据源模拟真实的请求

flexible相关的2x和3x图片问题以及字体使用px问题

移动端适配常见问题,可采用全局的mixin,以配置CSSResource插件,可直接书写全局的scss模块。更多适配问题请移步移动端高清、多屏适配方案 ,理解flexible.js所需的viewport知识

其他

此项目vue移动端的探索项目,将网易云的webapp作为参考对象,是因为它简单但功能齐全,各种问题解决方案都可以进行尝试,因此很多模块功能和代码都是浅尝辄止,以探索为主,功能比较简陋,代码也比较简单。现在主体架构基本完成,剩下的【音乐详情】,【评论】等功能可作为练手内容自行进行扩充作为练习。

意见及建议

请移步qq群:629349675

cloud-music's People

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.