Vue 3 + Vite + NeteasyApi + YesPlayMusic

Copy the vuE3 project from YesPlayMusic!! Study project so the code is not quite correct, if there is an error or better way to write, please correct

function

Very simple, many problems have not changed, temporarily just set up a shelf, only a playlist, through the playlist to play music. You can directly change the url to login to the /login page.

project

API source code from Binaryify/imitation YesPlayMusic NeteaseCloudMusicApi page

Preview online, because of the deployment of Vercel, so the interface has point card source address

preview



Some configurations of VUE3

VueRouter

The installation

npm i vue-router@4

configuration

1. Create SRC /router/index.js

import { createRouter, createWebHashHistory } from'vue-router'
import Home from'@/views/home.vue'
const routes = [ 
  { path: '/'.name: 'Home'.component: Home }
] 
const router = createRouter({ 
  history: createWebHashHistory(), 
  routes 
}) 
export default router
Copy the code

​

2. Mount main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')
Copy the code

use

<script setup>
import { useRoute, useRouter } from '@/router'
const route = useRoute()
const router = useRouter()

router.push({ name:'home'.params:route.params })
</script>
Copy the code

Vuex

The installation

npm i vuex@next

configuration

1. Create SRC /store/index.js

import { createStore } from 'vuex'

export const store = createStore({
    state: {
      userinfo: null
    },
    mutations: {
    SET_USERINFO(state,data){
      state.userInfo=data
    },
  },
  getters: {
    userInfo(state){
      return state.userInfo
    },
  }
})

export function useStore(){
  return store
}
Copy the code

2. Mount main.js

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './router/index'
createApp(App).use(store).mount('#app')
Copy the code

use

<script setup>
import { useStore } from '@/store'
const store = useStore()
const setinfo = 'asdf'
store.commit('SET_USERINFO', setinfo)
const userinfo=computed(() = >{
  return store.state.userinfo
})
</script>
Copy the code

Element Plus

The installation

npm i element-plus

configuration

1. Complete introduction

import { createApp } from 'vue' 

import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css' 

import App from './App.vue' 

const app = createApp(App) 
app.use(ElementPlus) app.mount('#app')
Copy the code

​

2. Introduce the NPM install -d unplugin-vue-components configuration as required

//vite.config.js
import Components from 'unplugin-vue-components/vite' 
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' 
export default defineConfig({
plugins: [     // ...
Components({      
resolvers: [ElementPlusResolver()], 
}),   
], 
})
Copy the code

Axios, SCSS

Axiso can be used to install NPM I SASS directly using immutable SCSS

SVG

The installation

npm i vite-plugin-svg-icons

configuration

//vite.config.js
import viteSvgIcon from 'vite-plugin-svg-icons' 
import { resolve } from 'path'
export default defineConfig({
    plugins: [     
        // ...
        viteSvgIcons({
        // Specify the icon folder to cache
        iconDirs:[resolve(process.cwd(),'src/assets/icons')].// Specify the symbolId format
        symbolId:'icon-[dir]-[name]',})]})Copy the code

New SRC/components/SvgIcon. Vue

<template>
<svg :class="svgClass" :width="size" :height="size" aria-hidden="true">
<use:xlink :href="iconName" :fill="color"/>
</svg>
</template>
<script setup>
import { computed } from'vue'
const props=defineProps({
    name: {type:String.required:true,},className: {type:String.default:' ',},size: {type:String.default:'22',},color: {type:String.default:'# 000000',}})const iconName=computed(() = >{
return`#icon-${props.name}`
})
const svgClass=computed(() = >{
if(props.className){
return`svg-icon ${props.className}`
}
return'svg-icon'
})
</script>
Copy the code

main.js

import svgIcon from './components/SvgIcon.vue'
const app=createApp(App)
app.component('svg-icon',svgIcon)
Copy the code

use

Add an SVG file to the specified SRC /assets/ ICONS path. < svG-icon name=” SVG file name to use “/>

Vite uses environment variables

Env file VITE_APP_NETEASE_API_URL = '/ API '/ /axios modify baseUrl process.env.node_env === 'production'? import.meta.env.VITE_APP_NETEASE_API_URL:'http://localhost:3000/'Copy the code

Deployment to Vercel

The deployment of the API

  1. The fork Binaryify/NeteaseCloudMusicApi project
  2. Click on New Project on the Vercel website
  3. Click Import Git Repository and select the NeteaseCloudMusicApi project you fork and click Import
  4. Click on the PERSONAL ACCOUNT select
  5. Click on the Continue
  6. Set PROJECT NAME to Other and press Deploy for FRAMEWORK PRESET and wait for deployment to complete

The deployment of the front-end

Import front-end projects like apis

  1. The project root directory needs to have vercel.json

{
  "rewrites": [{"source": "/api/:match*"."destination": "Https://image red box address /:match*"}}]Copy the code
  1. Add Environment Variables. Set Name to VUE_APP_NETEASE_API_URL and Value to/API
Env file VITE_APP_NETEASE_API_URL = '/ API '/ /axios modify baseUrl process.env.node_env === 'production'? import.meta.env.VITE_APP_NETEASE_API_URL:'http://localhost:3000/'Copy the code