mirror of
https://github.com/tatoMa/neteast-cloud-music-player
synced 2024-11-10 02:04:13 +00:00
initial functional alpha ver
This commit is contained in:
tatoMa
parent
a1cd7026be
commit
c0ce36328e
17 changed files with 599 additions and 99 deletions
1
.env
Normal file
1
.env
Normal file
|
|
@ -0,0 +1 @@
|
|||
VUE_APP_baseURL=https://neteast-cloud-music-api.herokuapp.com
|
||||
106
package-lock.json
generated
106
package-lock.json
generated
|
|
@ -2677,12 +2677,13 @@
|
|||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"version": "0.18.1",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
|
||||
"integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
"follow-redirects": "1.5.10",
|
||||
"is-buffer": "^2.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
|
|
@ -2703,6 +2704,12 @@
|
|||
"debug": "=3.1.0"
|
||||
}
|
||||
},
|
||||
"is-buffer": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
|
||||
"integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==",
|
||||
"dev": true
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
|
|
@ -3792,6 +3799,15 @@
|
|||
"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
|
||||
"dev": true
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.19.2",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
|
||||
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"follow-redirects": "1.5.10"
|
||||
}
|
||||
},
|
||||
"braces": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
|
|
@ -3801,6 +3817,15 @@
|
|||
"fill-range": "^7.0.1"
|
||||
}
|
||||
},
|
||||
"debug": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
|
||||
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "2.0.0"
|
||||
}
|
||||
},
|
||||
"del": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz",
|
||||
|
|
@ -3849,6 +3874,15 @@
|
|||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.5.10",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
|
||||
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"debug": "=3.1.0"
|
||||
}
|
||||
},
|
||||
"glob-parent": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
|
||||
|
|
@ -3908,6 +3942,12 @@
|
|||
"integrity": "sha512-6uCP4Qc0sWsgMLy1EOqqS/3rjDHOEnsStVr/4vtAIK2Y5i2kA7lFFejYrpIyiN9w0pYf4ckeCYT9f1r1P9KX5g==",
|
||||
"dev": true
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
},
|
||||
"path-type": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
||||
|
|
@ -13074,6 +13114,15 @@
|
|||
"util.promisify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"rechoir": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
|
||||
"integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"resolve": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
|
||||
|
|
@ -13781,6 +13830,17 @@
|
|||
"integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
|
||||
"dev": true
|
||||
},
|
||||
"shelljs": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.3.tgz",
|
||||
"integrity": "sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.0.0",
|
||||
"interpret": "^1.0.0",
|
||||
"rechoir": "^0.6.2"
|
||||
}
|
||||
},
|
||||
"shellwords": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
|
||||
|
|
@ -15345,6 +15405,30 @@
|
|||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.11.tgz",
|
||||
"integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
|
||||
},
|
||||
"vue-cli-plugin-axios": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-cli-plugin-axios/-/vue-cli-plugin-axios-0.0.4.tgz",
|
||||
"integrity": "sha512-p2b/fvPJuPBnvU8027PAAuU5DiOzUn2lku8XLG/f6c8FU0N+/MXWZAlOuHhqd9e7+KIZitwe/c8qlmv7TglbTg==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-cli-plugin-vuetify": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.5.tgz",
|
||||
"integrity": "sha512-jtxcidjLT5f1H9QLYKLFjo/ZG42ud4pI9bK3WNO5DXyhiMDMTwSZ7b3NcJVRH7tKYbv5/ty0VPdDGlf4w22AMA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"semver": "^7.1.2",
|
||||
"shelljs": "^0.8.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz",
|
||||
"integrity": "sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
|
||||
|
|
@ -15455,6 +15539,20 @@
|
|||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vuetify": {
|
||||
"version": "2.2.15",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.15.tgz",
|
||||
"integrity": "sha512-okz+Q7YfCkLLJsxdldlYWUHcbRX/G+fo/0zSS3rXU+Ir76sxZzIOkSsqox1exFWQJn1PqA0itiHR0QTWygv8VA=="
|
||||
},
|
||||
"vuetify-loader": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.4.3.tgz",
|
||||
"integrity": "sha512-fS0wRil682Ebsj2as+eruBoMPKaQYDhu/fDAndnTItzSY4RK4LOEIsssVL4vD6QY8dvUgoGL84SUQ6vGr777CA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"register-service-worker": "^1.6.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.1.5",
|
||||
"vuetify": "^2.2.11",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -27,6 +28,7 @@
|
|||
"@vue/cli-service": "~4.2.0",
|
||||
"@vue/eslint-config-standard": "^5.1.0",
|
||||
"@vue/test-utils": "1.0.0-beta.31",
|
||||
"axios": "^0.18.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"chromedriver": "80",
|
||||
"eslint": "^6.7.2",
|
||||
|
|
@ -38,7 +40,10 @@
|
|||
"geckodriver": "^1.19.1",
|
||||
"sass": "^1.25.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
"vue-cli-plugin-axios": "0.0.4",
|
||||
"vue-cli-plugin-vuetify": "^2.0.5",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vuetify-loader": "^1.3.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
|
|
|||
83
src/App.vue
83
src/App.vue
|
|
@ -1,32 +1,59 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<router-view/>
|
||||
</div>
|
||||
<v-app>
|
||||
<v-app-bar
|
||||
app
|
||||
color="secondary"
|
||||
dark
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-img
|
||||
alt="Vuetify Logo"
|
||||
class="shrink mr-2"
|
||||
contain
|
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
|
||||
transition="scale-transition"
|
||||
width="40"
|
||||
/>
|
||||
|
||||
<v-img
|
||||
alt="Vuetify Name"
|
||||
class="shrink mt-1 hidden-sm-and-down"
|
||||
contain
|
||||
min-width="100"
|
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
|
||||
width="100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn
|
||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
||||
target="_blank"
|
||||
text
|
||||
>
|
||||
<span class="mr-2">Latest Release</span>
|
||||
<v-icon>mdi-open-in-new</v-icon>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-content>
|
||||
<!-- <HelloWorld/> -->
|
||||
<router-view></router-view>
|
||||
</v-content>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
components: {
|
||||
// HelloWorld
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
//
|
||||
})
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
|
|||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
|
|
@ -1,63 +1,151 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch" target="_blank" rel="noopener">e2e-nightwatch</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<v-img
|
||||
:src="require('../assets/logo.svg')"
|
||||
class="my-3"
|
||||
contain
|
||||
height="200"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-4">
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
Welcome to Vuetify
|
||||
</h1>
|
||||
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br>please join our online
|
||||
<a
|
||||
href="https://community.vuetifyjs.com"
|
||||
target="_blank"
|
||||
>Discord Community</a>
|
||||
</p>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
What's next?
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Important Links
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Ecosystem
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
|
||||
data: () => ({
|
||||
ecosystem: [
|
||||
{
|
||||
text: 'vuetify-loader',
|
||||
href: 'https://github.com/vuetifyjs/vuetify-loader'
|
||||
},
|
||||
{
|
||||
text: 'github',
|
||||
href: 'https://github.com/vuetifyjs/vuetify'
|
||||
},
|
||||
{
|
||||
text: 'awesome-vuetify',
|
||||
href: 'https://github.com/vuetifyjs/awesome-vuetify'
|
||||
}
|
||||
],
|
||||
importantLinks: [
|
||||
{
|
||||
text: 'Documentation',
|
||||
href: 'https://vuetifyjs.com'
|
||||
},
|
||||
{
|
||||
text: 'Chat',
|
||||
href: 'https://community.vuetifyjs.com'
|
||||
},
|
||||
{
|
||||
text: 'Made with Vuetify',
|
||||
href: 'https://madewithvuejs.com/vuetify'
|
||||
},
|
||||
{
|
||||
text: 'Twitter',
|
||||
href: 'https://twitter.com/vuetifyjs'
|
||||
},
|
||||
{
|
||||
text: 'Articles',
|
||||
href: 'https://medium.com/vuetify'
|
||||
}
|
||||
],
|
||||
whatsNext: [
|
||||
{
|
||||
text: 'Explore components',
|
||||
href: 'https://vuetifyjs.com/components/api-explorer'
|
||||
},
|
||||
{
|
||||
text: 'Select a layout',
|
||||
href: 'https://vuetifyjs.com/layout/pre-defined'
|
||||
},
|
||||
{
|
||||
text: 'Frequently Asked Questions',
|
||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import Vue from 'vue'
|
||||
import './plugins/axios'
|
||||
import App from './App.vue'
|
||||
import './registerServiceWorker'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import vuetify from './plugins/vuetify'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
vuetify,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
|
|||
61
src/plugins/axios.js
Normal file
61
src/plugins/axios.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
'use strict'
|
||||
|
||||
import Vue from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
// Full config: https://github.com/axios/axios#request-config
|
||||
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
|
||||
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
|
||||
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
|
||||
|
||||
const config = {
|
||||
baseURL: process.env.VUE_APP_baseURL || process.env.VUE_APP_apiUrl || '',
|
||||
timeout: 60 * 1000 // Timeout
|
||||
// withCredentials: true // Check cross-site Access-Control
|
||||
}
|
||||
|
||||
const _axios = axios.create(config)
|
||||
|
||||
_axios.interceptors.request.use(
|
||||
function (config) {
|
||||
// Do something before request is sent
|
||||
return config
|
||||
},
|
||||
function (error) {
|
||||
// Do something with request error
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// Add a response interceptor
|
||||
_axios.interceptors.response.use(
|
||||
function (response) {
|
||||
// Do something with response data
|
||||
return response
|
||||
},
|
||||
function (error) {
|
||||
// Do something with response error
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
Plugin.install = function (Vue, options) {
|
||||
Vue.axios = _axios
|
||||
window.axios = _axios
|
||||
Object.defineProperties(Vue.prototype, {
|
||||
axios: {
|
||||
get () {
|
||||
return _axios
|
||||
}
|
||||
},
|
||||
$axios: {
|
||||
get () {
|
||||
return _axios
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
Vue.use(Plugin)
|
||||
|
||||
export default Plugin
|
||||
20
src/plugins/vuetify.js
Normal file
20
src/plugins/vuetify.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import Vue from 'vue'
|
||||
import Vuetify from 'vuetify/lib'
|
||||
|
||||
Vue.use(Vuetify)
|
||||
|
||||
export default new Vuetify({
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
primary: '#ee44aa',
|
||||
secondary: '#424242',
|
||||
accent: '#82B1FF',
|
||||
error: '#FF5252',
|
||||
info: '#2196F3',
|
||||
success: '#4CAF50',
|
||||
warning: '#FFC107'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -11,12 +11,19 @@ const routes = [
|
|||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||
path: '/Song',
|
||||
name: 'Song',
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/Song.vue')
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
name: 'List',
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/List.vue')
|
||||
},
|
||||
{
|
||||
path: '/player',
|
||||
name: 'Player',
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/Player.vue')
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
11
src/utils/api.js
Normal file
11
src/utils/api.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import axios from 'axios'
|
||||
|
||||
const instance = axios.create({
|
||||
baseURL: 'https://neteast-cloud-music-api.herokuapp.com/',
|
||||
timeout: 1000,
|
||||
headers: { 'X-Custom-Header': 'foobar' }
|
||||
})
|
||||
axios.get('/top/playlist')
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
})
|
||||
|
|
@ -1,18 +1,55 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<div v-if="data">
|
||||
<ul>
|
||||
<li v-for="item in data" :key="item.id">
|
||||
<img :src="item.coverImgUrl" :alt="item.name">
|
||||
<div @click="goToList(item)">{{item.name}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
// import HelloWorld from '@/components/HelloWorld.vue'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
HelloWorld
|
||||
// components: {
|
||||
// HelloWorld
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
data: []
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// const instance = axios.create({
|
||||
// baseURL: 'https://neteast-cloud-music-api.herokuapp.com/',
|
||||
// timeout: 1000,
|
||||
// headers: { 'X-Custom-Header': 'foobar' }
|
||||
// })
|
||||
// console.log(process.env.VUE_APP_baseURL)
|
||||
|
||||
axios.get(`${process.env.VUE_APP_baseURL}/top/playlist`)
|
||||
.then((response) => {
|
||||
console.log(response.data.playlists)
|
||||
this.data = response.data.playlists
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goToList (item) {
|
||||
this.$router.push(`/list?id=${item.id}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
img{
|
||||
max-width : 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
54
src/views/List.vue
Normal file
54
src/views/List.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
{{id}}
|
||||
{{name}}
|
||||
{{description}}
|
||||
<img :src="coverImgUrl" alt="">
|
||||
<div v-for="track in tracks" :key="track.id">
|
||||
<p @click="goToSong(track)">{{track.name}} - {{track.id}}</p>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
data () {
|
||||
return {
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
coverImgUrl: '',
|
||||
tracks: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.id = this.$route.query.id
|
||||
axios.get(`${process.env.VUE_APP_baseURL}/playlist/detail?id=${this.id}`)
|
||||
.then((response) => {
|
||||
console.log(response.data.playlist)
|
||||
this.name = response.data.playlist.name
|
||||
this.description = response.data.playlist.description
|
||||
this.coverImgUrl = response.data.playlist.coverImgUrl
|
||||
this.tracks = response.data.playlist.tracks
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goToSong (item) {
|
||||
this.$router.push(`/song?id=${item.id}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
img{
|
||||
max-width: 400px;
|
||||
}
|
||||
</style>
|
||||
36
src/views/Player.vue
Normal file
36
src/views/Player.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<a :href="song.url">play</a>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
data () {
|
||||
return {
|
||||
song: ''
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.id = this.$route.query.id
|
||||
axios.get(`${process.env.VUE_APP_baseURL}/song/url?id=${this.id}`)
|
||||
.then((response) => {
|
||||
console.log(response.data.data)
|
||||
this.song = response.data.data[0]
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
img{
|
||||
max-width: 400px;
|
||||
}
|
||||
</style>
|
||||
44
src/views/Song.vue
Normal file
44
src/views/Song.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<div v-for="song in songs" :key="song.id">
|
||||
<p @click="goToPlayer(song)">{{song.name}} - {{song.id}}</p>
|
||||
<img :src="song.al.picUrl" alt="">
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
data () {
|
||||
return {
|
||||
songs: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.id = this.$route.query.id
|
||||
axios.get(`${process.env.VUE_APP_baseURL}/song/detail?ids=${this.id}`)
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
this.songs = response.data.songs
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
goToPlayer (item) {
|
||||
this.$router.push(`/player?id=${item.id}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
img{
|
||||
max-width: 400px;
|
||||
}
|
||||
</style>
|
||||
5
vue.config.js
Normal file
5
vue.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
transpileDependencies: [
|
||||
'vuetify'
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue