模仿网易云音乐pc端

先写写心得体会吧，经过半个月，我实现了网易云音乐的一些功能。最开始的时候，我记得我几乎写点东西，就会去看我学vue的笔记，（笔记真的好有用，什么忘记了，就拿出来看看，不懂的再百度）。我觉得这半个月最难的就是，音乐播放部分了，终于昨天晚上，我成功的实现了音乐自动播放下一首，点击按钮切换上一首，下一首，我真的好开心，哈哈哈哈哈哈。不过，项目中出现过很多问题，我要一点点的总结下来，[项目地址(https://github.com/xhysah/xhymusic).

项目搭建

• 基本项目

  安装脚手架：npm install -g @vue/cli
  创建一个新项目： vue create my-project(自己想取的项目名称)
  1.Please pick a preset？(选择手动的，可以自己想要的配置)-------manully
  2.Check the features needed for your project(询问项目需求)：我选择的如下图
  
  2. Use history mode for router(路由模式是否使用history)? -------yes
  3. Pick a CSS pre-processor(询问项目的css预处理器)：--------Stylus
  4. Pick a linter / formatter config(询问项目的格式校验方式)：------Standard
  5. Pick additional lint features:(询问项目是什么时候校验格式)------lint on save(保存时就校验，哈哈哈哈，因为我不知道怎么写代码是规范的，需要他实时约束我)
  6. Where do you prefer placing config for Babel, ESLint, etc.?（询问项目的配置文件放在那里）-----In dedicated config files
  7. Save this as a preset for future projects? (是否保存该配置，若是，你以后创建新项目的时候，就会看见这个配置)----no
  然后vue-cli就开始自己下载了，等待他
  

• 引入项目中使用的东西------axios，element-Ul

  1.axios
  下载npm install axios --save，运行时也会使用，所有要保存在你的运行时依赖中
  在src/main.js中：导入import axios from ‘axios’，
  挂载到vue原型上Vue.prototype.http=axios−−−−使用的时候，就可以this.http = axios----使用的时候，就可以this.http=axios−−−−使用的时候，就可以this.http
  全局配置axios.defaults.baseURL = ‘http://192.168.1.5:3000’
  axios.defaults.withCredentials = true 表示跨域请求时是否需要使用凭证
  2.element-UI
  下载npm i element-ui -save
  我是在src下面建了一个elementUI文件夹，再建了一个element.js文件
  在这个文件中，按需引入elementUI

import Vue from 'vue'
import {Form,FormItem}from 'element-ui';Vue.use(Form)Vue.use(FormItem)

再在main.js中引入import ‘./elementUi/element’
最后删掉views，components里面原本存在的vue文件，连同src/router/index.js里的路由一起删掉----然后做完这些，我就开始研究文档了，一开始真的好难上手
网易云github地址.
下载后 node app.js 就可以了

遇到的问题

• 播放音乐

最开始的时候，我知道肯定会用audio标签，建立了一个musicPlayer组件，然后把它固定在浏览器底部，因为有好几个页面都有音乐播放，所以我只能把音乐数据放在vuex里面统一管理，传给vuex的值都是可用数据了，每次只能播放一首歌，播放完后，就直接停止了，我应该在他的ended事件里面做些什么。逻辑是这样的

大概吧，我真的不知道怎么表述了，反正数据，我都存在vuex里面了，
总结：

• 1.在actions里面可以调用mutation--------context.commit(‘事件类型’,‘参数’)，网络请求等异步操作，放在actions里面------------组件调用this.$store.dispatch(‘事件类型’, ‘参数’)
• 2.mutations------组件调用this$store.commit(‘事件类型’,‘参数’)–vuex的store状态的更新唯一方式，注意不能在actions里直接修改state里的值，改是可以改的，不提倡，容易出问题

• 路由跳转

问题：elementui中的导航菜单，自带的:default-active=“activeIndex”，他只有点击才有对应的效果，你要是选择了第二项，然后刷新，他就会自动跳到第一个上面，整个导航菜单就会乱掉

• 我把首页里的activeName值保存在vuex中，同时也从vuex中取值，每次跳转时，都会在生命周期created里面提交修改activeName的值，路由就不会乱掉了

• flex布局

在项目中，我经常遇到布局问题，因为好多图片，都要居中对齐，看起来整洁一点，总结一下经常用的

• 容器的justify-content属性，属性值space-between两端项目之间的距离都相等，center居中对齐
• 容器的flex-warp----定义一行排不下item，如何换行----wrap换行
• 容器属性
  
• 项目属性
  

• 定位

relative：相对定位，不脱离文档流，参考自身的静态位置
absolute：绝对定位，参考最近一个不为static的父级元素的位置
fixed：固定定位，参照对象为可视窗口
static ：默认，按照正常流进行排列

• 修饰符sync

在我使用elementUI时，我发现经常有数据，会加上这个修饰符.sync,一直不明白是什么意思

• 其实sync是一个语法糖，是什么语法糖呢？
• 在子组件中不能修改父组件中的值，要想修改父组件中的值，必须向父组件发射一个方法this.$emit(‘方法名’,‘修改的的值);，然后父组件接收这个方法@方法名=‘处理数据操作’
• 如果使用.sync,就不用上面操作了，在子组件中修改的值，父组件也会同步变化

• sessionStorage

存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.只能存储字符串类型,如果存储的数据类型不是字符串类型，存储时，会自动调用toString方法,存入一个对象数据，会变成 [object Object]字符串
数据存储不正确，获取的sessionStorage数据也就不对了

• 1.存储时：JSON.stringify()方法转换成字符串，再存储到sessionStorage中
• 2.使用时：通过JSON.parse()方法将字符串转换成JSON格式即可

• 使单行文字超过一定长度显示…

  • 1.规定元素的宽度
    width: 200px;
  • 2.定义超过元素宽度的文字隐藏
    overflow: hidden
  • 3.规定当文本溢出时包含元素时发生的事情------ellipsis(显示省略符号来代表被修剪的文本)
    text-overflow: ellipsis
  • 4.规定元素不换行
    white-space: nowrap

• 多行文字显示…

  • 1.规定元素的宽度
    width: 200px;
  • 2.定义超过元素宽度的文字隐藏
    overflow: hidden
  • 3.设置盒子样式
    display: -webkit-box
  • 4.设置盒子参考方式
    -webkit-box-orient: vertical
  • 5.设置超出多少行显示省略号
    -webkit-line-clamp 2

项目截图

vue+elementUI实战之网易云音乐--半月总结！！！相关推荐

1. 基于vue的高仿网易云音乐网站，实现大多数功能

   文章目录 前言 项目演示地址 线上地址 项目仓库 总结 前言 基于Vue + Vue-Router + Vuex + axios + elementui,ui参考网易云音乐,后端接口使用网易云音乐接口 ...

2. python爬取网易云音乐_Python 从零开始爬虫(七)——实战：网易云音乐评论爬取（附加密算法）...

   前言 某宝评论区已经成功爬取了,jd的也是差不多的方法,说实话也没什么好玩的,我是看上它们分析简单,又没加密才拿来试手的.如果真的要看些有趣的评论的话,我会选择网易云音乐,里面汇聚了哲学家,小说家,s ...

3. Android 贝塞尔曲线实战之网易云音乐鲸云特效，2021程序员进阶宝典

   一阶这个比较简单,因为没有在网上找到可以直接输入数学公式的工具,就手工推导了下. ![在这里插入图片描述](https://img- <Android学习笔记总结+最新移动架构视频+大厂安卓面试 ...

4. Android 贝塞尔曲线实战之网易云音乐鲸云特效，apm性能监控系统

   小说阅读 APP 的翻页效果. 简介 ===================================================================== 在开始实战之前,我们还 ...

5. Android 贝塞尔曲线实战之网易云音乐鲸云特效

   作者:哈哈将 -个推 Android 高级开发工程师 前言 APP开发市场已经告别"野蛮生长"时代,人们不再满足于APP外形创新,而将目光转向全方面的用户体验上.在这过程中,动效化 ...

6. python网易云爬虫网络技术的意义_Python3爬虫实战之网易云音乐

   Xpath最初被设计用来搜寻XML文档,但它同样适用于HTML文档的搜索.通过简洁明了的路径选择表达式,它提供了强大的选择功能:同时得益于其内置的丰富的函数,它可以匹配和处理字符串.数值.时间等数据格 ...

7. 【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）

   No8.网易云音乐案例 知识点自测 知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...

8. 基于Vue 全家桶实现网易云音乐 WebApp

   基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp,UI 界面参考了安卓 ...

9. Python爬虫实战：网易云音乐爬取！

   本次目标 爬取网易云音乐 https://music.163.com/ PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资料以及群交流解答点击即可加入 环境 ...

最新文章

1. [小明爬坑系列]AssetBundle原理介绍
2. MySQL 性能调优的10个方法
3. 使用Kotlin打造Android路由框架-KRouter
4. 函数（复习），闭包，DOM
5. iptables规则基本用法
6. 性能标准两腿走：IE9平台预览版初步体验
7. 图文解说：Nginx+tomcat配置集群负载均衡
8. 测试环境服务器硬盘塞满问题排查
9. 工作流实战_21_flowable 加签 任务向前加签 向后加签
10. c# 获取键盘的输入
11. 我的开源项目：H.264码流分析器
12. 猎豹网校 ASP.NET全套教程
13. 做网站用企业网站模板好不好
14. 2022年了，Windows Vista还能用吗？
15. 电商平台微服Dubbox实战，实现高并发抢购
16. 电脑键盘指法的正确练习步骤
17. js 关键技术集合
18. 罗克韦尔PLC程序，水处理自动化最高程序
19. 自动驾驶领域常见英文缩写及其中文含义（不断完善中）
20. 交叉销售(Cross-Selling)与链接分析

热门文章

1. JointJS零基础入门01-JointJS
2. eclipse 2021-09版本汉化--英化
3. 广东省汕头市谷歌卫星地图下载
4. 测试开发是什么？什么是测试开发工程师？软件测试开发详谈
5. FTP服务器和客户端
6. 锐捷智能无线交换机的配置
7. Docsify使用指南，使用Typora+Docsify打造最强、最轻量级的个人团队文档，及免费和开源且低成本文档工具
8. MQTT移植到stm32开发板——使用TencentOS tiny操作系统
9. 跨平台开发方案的三个时代
10. android设备什么手机号码,安卓手机如何查看本机号码 查看本机号码的方法有哪些...