🎼vue全家桶+typescript重构qq音乐移动端
Switch branches/tags
Nothing to show
Clone or download
Latest commit 0c932ea Aug 1, 2018
Permalink
Failed to load latest commit information.
build 新增编译文件 Feb 28, 2018
config 重新打包 Feb 28, 2018
dist �重新打包,并且修改 md Mar 1, 2018
logo add logo Aug 1, 2018
src modify player Mar 2, 2018
static modify md Aug 1, 2018
.gitignore Initial commit Feb 11, 2018
LICENSE Initial commit Feb 11, 2018
README.md modify md Aug 1, 2018
index.html 重新打包 Mar 1, 2018
package.json 完成 Feb 28, 2018
tsconfig.json 完成 Feb 28, 2018
tslint.json 完成 Feb 28, 2018
yarn.lock 完成 Feb 28, 2018

README.md

vue全家桶+typescript重构qq音乐移动端

预览(请在手机上观看)

可能加载有点慢,服务器在国外🤣 ===> QQ音乐🎵

说明

本项目是基于我的原生 js 项目qq 音乐重构完成。在此期间,参考了一些vue与typescript的整合的教程,对我帮助挺大的,感谢写这些教程的作者们,在这里由衷的感谢!以下是参考的教程:

  1. vue + typescript 新项目起手式

  2. Vue2.5+ Typescript 引入全面指南 - Vuex篇

安装方法

打开终端 ,输入:

git clone git@github.com:shenzekun/vue-qq-music.git

切换到克隆下来的文件夹:

cd vue-qq-music

然后输入:

yarn

然后运行

npm run dev

最后在浏览器中打开 http://localhost:8080/

项目结构

使用see-dirtree 显示目录树

vue-qq-music
├──LICENSE
├──README.md
├──index.html
├──package.json
├──tsconfig.json
├──tslint.json
├──yarn.lock
├──static
├──src
│  ├──App.vue
│  ├──main.ts
│  ├──vue-shim.d.ts
│  ├──style
│  │  ├──_var.scss
│  │  └──reset.scss
│  ├──store
│  │  ├──action.ts
│  │  ├──index.ts
│  │  ├──mutation-types.ts
│  │  └──mutations.ts
│  ├──service
│  │  └──getData.ts
│  ├──router
│  │  └──index.ts
│  ├──pages
│  │  ├──search
│  │  │  └──search.vue
│  │  ├──recommend
│  │  │  └──recommend.vue
│  │  ├──rank
│  │  │  └──rank.vue
│  ├──config
│  │  ├──api.ts
│  │  ├──fetch.ts
│  │  ├──mixin.ts
│  │  └──utils.ts
│  ├──components
│  │  ├──NavHeader.vue
│  │  ├──Player.vue
│  │  └──Swipe.vue
│  ├──assets
│  │  ├──clock_ic.png
│  │  ├──default_pic.jpg
│  │  ├──favicon.ico
│  │  ├──icon_loading.png
│  │  ├──list_sprite.png
│  │  ├──loading.gif
│  │  ├──logo.png
│  │  ├──search_sprite.png
│  │  └──sprite_play.png
├──config
│  ├──dev.env.js
│  ├──index.js
│  └──prod.env.js
├──build
│  ├──build.js
│  ├──check-versions.js
│  ├──logo.png
│  ├──utils.js
│  ├──vue-loader.conf.js
│  ├──webpack.base.conf.js
│  ├──webpack.dev.conf.js
│  └──webpack.prod.conf.js

16 directories, 48 files.

使用的组件

  1. swiper
  2. vue-lazyload