1.Vue3实战——网易云音乐

Vue3实战—网易云音乐

效果展示

参考资料

Vue2_网易云音乐项目_哔哩哔哩_bilibili

14_项目_网络请求封装_哔哩哔哩_bilibili

Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)

Interactive CSS Grid Generator | Layoutit Grid

Flex 布局语法教程 | 菜鸟教程 (runoob.com)

CSS代码调试_哔哩哔哩_bilibili

视频转gif - 在线工具 (tool.lu)

不要太屌丝，奋斗，有点精气神！！

不要把别人当傻子，也不要觉得自己很聪明，这都是缺乏存在感，野心存于胸，去做。这几年，他肯已经成熟进步，不要原地踏步，越颓废越丧。用时间去做自己的事情。你要一头扎进去。静下心来。去试试看看有没有错。

自己注意力的本质是身体的内核核心，要有不断的能量补充进去。

需求&技术栈&项目分析

1.如何开始构思一个项目？

1.需求分析
2.技术栈选择(新手会什么用什么即可)
3.项目结构设计：设计组件和路由
4.界面设计
5.开始开发

实际开发，大致看一下教程，先找到具备的【功能】;
然后看一下技术，用到了哪些
最后规划一下大致组件设计【可以使用什么画图工具啥的】
记住【一个优秀的程序员，架构时间永远比敲代码时间长， 一直敲的都是新手，合理选择技术栈】

2.网易云音乐的构思思路

组件命名

1.需求/功能分析（组件用【】表示）
	一共3个页面和一个布局容器【Layout】放下面和上面的路由导航以及中间的页面
    Layout
    	配置对应路由
    推荐页
    	【Recommended playlist】
        【The latest music】
         	【Song details】
            	【Song review】
    热歌榜页
    	【Popular song ranking】
    搜索页
		【Search】
2.技术栈就用最新的那套：vant+axios+scss(super css)+vue3
3.项目结构设计
	路由：
    	Recommendation page	
        Hit song list page
        Search page
        xxx[]——>Song details:router-link[paramas] to details useRoute
4.

3.后台接口启动

1. 拿到接口地址

2. 去下载该后台项目
3. 配置node启动后台接口

项目结构设计

D:\课程\2024学习\前端项目\网易云音乐\01_笔记和ppt 相关笔记参考

D:\源码\OutCode\学习代码\黑马Vue\my-music

1.准备工作：创建项目，安装vant+axios+router，配置axios 【体力活】
2.创建页面【参考设计阶段命名】
3.布局页面
4.封装请求
5.获取后台数据
6.完成业务开发

0.VueStart

Vue工程搭建有很多【体力活】重复部分，因此将此划分为通用部分。
	1.必备插件：scss,router,axios,pinia
				pnpm  i scss  vue-router axios pinia 
    2.	import xxx  from xx  
		vueUse()

1.style.css

Vue官方做的响应式设计
	1.流式宽高
	2.媒体查询
#app {
   
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

@media (prefers-color-scheme: light) {
   
  :root {
   
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
   
    color: #747bff;
  }
  button {
   
    background-color: #f9f9f9;
  }
}

2.router.js

import {
    createRouter, createWebHistory } from "vue-router";
const routes = [
    {
   
        path: "/",
        name: "Home",
        component: () => import("../views/Home.vue"),
    },
    {
   
        path: "/detail/:id",
        name: "detail",
        component: () => import("../views/SingleDetails.vue"),
        props: true

    }
];

const router = createRouter({
   
    history: createWebHistory(),
    routes
});

export default router;

3.pinia.js

import {
    createPinia } from 'pinia'
const pinia = createPinia()

import {
    defineStore } from 'pinia'


export const useTestStore = defineStore('testStore', {
   
  state: () => {
   
    return {
   
      count: 0
    }
  },
  actions: {
   
    increment() {
   
      this.count++
    },
    decrement() {
   
      this.count--
    }
  },
  getters: {
   
    doubleCount(state) {
   
      return state.count * 2
    }
  }
})

4.vite.config.js @路径配置

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [vue()],
  resolve: {
   
    alias: {
   
      '@': '/src',
    },
  },
 
})

1.Vant组件库

Vant 4 - 轻量、可定制的移动端组件库 (vant-ui.github.io)

1.安装 pnpm i vant
2.引入注册【一次性注册所有组件】
	import Vant from 'vant';
    import {
    createApp } from 'vue';
	import 'vant/lib/index.css';

    const app = createApp();

    app.use(Vant);