Skip to content

「网易云音乐」Demo。使用了 Vue2.0 全家桶来开发的。

License

Notifications You must be signed in to change notification settings

AllenChinese/Netease-music-demo

Repository files navigation

Netease-music-demo

github forks github stars github watchers github license

vue-cli 2.0 该项目不再更新。

一、前言

  在这个 vue 系列的第一篇文章,我写的是 vue-cli-simple 脚手架的环境搭建。前段时间,也刚好给公司做了一个后台管理系统的产品,用的就是 vue-cli-simple。 一个月的时间将系统从无到上线,组件化、模块化开发的非常快速、可读性、复用性,整理架构清晰,易管理、维护。

  所以,这次利用 vue-cli 完整版来实践一下。那么这个 simple 在哪呢?其实,simple 是 webpack-simple。这个脚手架的 webpack 有更全的功能。

  而且,目录结构有了比较大变化。可自行去 github 克隆仓库到本地比较。我在开发完成后,将 Demo 打包放到了 xshell 上部署,发现只要在config 文件夹中的 index.js 稍稍改动就不会出现空白页 404 的情况。


二、仿网易云音乐

vue-cli-demo github地址传送门

这里写图片描述

这是一张 Demo 的截图,大致模块四个,header、carousel、pages、footer。主要功能,组件(页面间的切换),登录(cookie模拟,未使用数据库),轮播图组件,公共数据、状态管理。完成这个项目可以体验到:

  • vue-cli 的环境搭建,项目目录。
  • 学习组件化、模块化开发。
  • 学习 vue 全家桶:vue-router 路由、vuex 状态管理。
  • 了解 webpack 的压缩、打包。

三、技术栈

vue.js + vue-router + vuex + ElementUI

四、vue-cli 环境搭建

vue(脚手架) 推荐开发环境,一文中详细的介绍了 simple 的环境搭建,而 vue-cli,只需要改成 vue init webpack <项目名字>,即可。

这里写图片描述


五、目录结构

├── LICENSE
├── README.md
├── build                                // 构建
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prod.conf.js
│   └── webpack.test.conf.js
├── config                               // 配置
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets                           // 静态资源,图片
│   │   ├── image
│   │   └── logo.png
│   ├── common    
│   │   └── lang                         // 国际化文件包
│   ├── components                       // 公共组件 
│   │   ├── Carousel.vue
│   │   ├── footerComponent.vue
│   │   ├── headerComponent.vue
│   │   └── navComponent.vue
│   ├── config
│   │   ├── env.js                       // 开发 api 路径(项目环境)
│   │   └── fetch.js                     // 封装的异步请求
│   ├── data
│   │   └── detail.json
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── service                          // 项目中全部的异步接口请求文件
│   │   └── dataProcessing.js
│   ├── store
│   │   ├── actions.js
│   │   ├── index.js
│   │   ├── mutations.js
│   │   └── store.js
│   └── view
│       ├── downLoadComponent.vue
│       ├── findMusicPage
│       ├── friendComponent.vue
│       ├── musicManComponent.vue
│       └── myMusicComponent.vue
├── static
│   ├── css
│   │   └── common.css
│   └── js
│       └── util.js
└── test
    ├── e2e
    │   ├── custom-assertions
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    └── unit
        ├── index.js
        ├── karma.conf.js
        └── specs

六、vue-cli-easy

这是我自己根据 vue-cli 环境,添加了 vue-router, vuex, api接口公共抽象配置,elementUI 的脚手架。你可以直接 clone 到你的 workspace 中,进行依赖的安装(npm install),即可以进行自己的项目开发了。

项目地址传送门:github vue-cli-easy 链接

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

About

「网易云音乐」Demo。使用了 Vue2.0 全家桶来开发的。

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages