Vue3项目实战准备------音乐播放器（开源项目）(一)

目录

1、项目初始化

项目运行

在main.js中导入scss文件

 项目后端接口是用node写好的--------初始化后端------启动

 配置跨域请求（当后端不是自己写的时候后端没有跨域请求，就只能通过前端解决跨域问题）

devServer.proxy（配置参考 | Vue CLI）

2、封装公共组件 

(1)配置路由

 在router文件夹的index.js中配置路由

(2)header组件和tabbar组件

(3)选项卡

---

 

1、项目初始化

vue create music_player

 

项目运行

npm run serve

准备的文件之scss

在main.js中导入scss文件

import './assets/scss/index.scss'

遇到报错：scss中引用样式变量导致报错无法识别

 以及如何关闭语法格式检验：lintOnSave（配置参考 | Vue CLI）

解决方法：vue的vue.config.js配置项文件配置(配置参考 | Vue CLI)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      //导入含变量的scss文件
      scss: {
        additionalData: `
        @import "@/assets/scss/mixin.scss";
        @import "@/assets/scss/variable.scss";
        `
      },
    }
  },
  //关闭语法检测
  lintOnSave: false
})

 项目后端接口是用node写好的--------初始化后端------启动

cd vue3-muisc-player\MusicPlayer_node\NeteaseCloudMusicApi-master
npm i
node app.js

 配置跨域请求（当后端不是自己写的时候后端没有跨域请求，就只能通过前端解决跨域问题）

devServer.proxy（配置参考 | Vue CLI）

vue.config.js: 运行在8080端口---->vue开启一个运行在8080端口的服务器---->3000端口（真实服务器）

module.exports = defineConfig({
  devServer: {
    proxy: 'http://localhost:3000'
  }
})

2、封装公共组件 

(1)配置路由

 在router文件夹的index.js中配置路由

const routes = [
  {
    path: '/',
    // 重定向
    redirect: '/recommend'
  },
  {
    path: '/recommend',
    component: () => import('@/views/Recommend')
  },
  {
    path: '/singer',
    component: () => import('@/views/Singer')
  },
  {
    path: '/toplist',
    component: () => import('@/views/TopList')
  },
  {
    path: '/search',
    component: () => import('@/views/Search')
  },
  
]

(2)header组件和tabbar组件

<template>
<!-- App.vue -->
  <nav>
    <my-header></my-header>
    <my-tabBar></my-tabBar>
  </nav>
  <!-- 路由出口 -->
  <router-view></router-view>
</template>

<script setup>
import MyHeader from "@/components/Header"
import MyTabBar from "@/components/TabBar"
</script>

(3)选项卡

<template>
    <div class="tab-bar">
        <router-link class="tab-item" v-for="item in tabs" :key="item.path" :to="item.path">
            <span class="tab-link">{{ item.name }}</span>
        </router-link>
    </div>
</template>

<script setup>
const tabs =  [
    {
        name: '推荐',
        path: '/recommend',
    },
    {
        name: '歌手',
        path: '/singer',
    },
    {
        name: '排行',
        path: '/toplist',
    },
    {
        name: '搜索',
        path: '/search',
    },
]
</script>