# cloudMusic_vue **Repository Path**: wy-cp3/cloud-music_vue ## Basic Information - **Project Name**: cloudMusic_vue - **Description**: vue+vuex+vue-router+iconfont+html5+less+es6 - **Primary Language**: Unknown - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2022-04-14 - **Last Updated**: 2022-04-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: vue3, vue2 ## README # 项目总结 [TOC] ## 一、vue3网易云音乐设计 ==特别提醒:接口必须一直运行== - 首先在`NeteaseCloudMusicApi-master`文件夹下打开终端,通过`node app.js`运行。 - 然后再`musicapp`文件夹下运行 `npm run serve`,便可以观看运行效果。 - 随后`npm ruun build`打包为上传服务器做准备。 - git上传gitee,利用gitee pages部署 - 修改 api/index.js  - `npm ruun build`打包 - gitee新建仓库并上传 - 点击仓库服务中的Gitee Pages启动 ### 0、Vscode使用方法及其他补充 #### 0.1 Vue3 语法 - `ref` 响应式变量, `toRefs`变成响应式变量 - `reactive`响应式对象 #### 0.2 emmet语法 链接:https://blog.csdn.net/qq_44871797/article/details/111143872     ### 1、自适应rem格局 ```JavaScript function remSize(){ var deviceWidth = document.documentElement.clientWidth || window.innerWidth; // ?说window.innerWidth是为了应对谷歌浏览器和IE,看官方都支持 if(deviceWidth>=750){ deviceWidth = 750 } if (deviceWidth <= 320){ deviceWidth = 320 } document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px' document.querySelector('body').style.fontSize = 0.3 +'rem' // 设计稿是750px. // 设置1半的宽度,那么就是375px // 1rem == 100px的设计稿宽度 // 表达一半的宽度就是3.75rem } remSize() window.onresize = function(){ remSize() } ``` #### 1.1 Element.clientWidth 内联元素以及没有 CSS 样式的元素的 `**clientWidth**` 属性值为 0。`**Element.clientWidth**` 属性表示元素的内部宽度,以像素计。该属性包括内边距 padding,但不包括边框 border、外边距 margin 和垂直滚动条(如果有的话)。 ==当在根元素(\元素)上使用clientWidth时(或者在\
上,如果文档是在quirks(怪异)模式下),将返回viewport的宽度(不包括任何滚动条). [This is a special case of `clientWidth`](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth).== 该属性值会被四舍五入为一个整数。如果你需要一个小数值,可使用 [`element.getBoundingClientRect()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)。 [语法] ```JavaScript var intElemClientWidth = element.clientWidth; ``` `intElemClientWidth` 是一个整数,表示元素的 `clientWidth`。`clientWidth` 是一个只读属性。 [示例]  #### 1.2 @viewport **已废弃:** 该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。 **`@viewport`** 规则让我们可以对文档的大小进行设置 [viewport](https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport) 。这个特性主要被用于移动设备,但是也可以用在支持类似“固定到边缘”等特性的桌面浏览器,如微软的Edge。 ==按百分比计算尺寸的时候,就是参照的**初始视口(viewport)**。初始视口指的是任何用户代理和样式对它进行修改之前的视口。桌面浏览器如果不是全屏模式的话,一般是基于窗口大小==。 在移动设备上(或者桌面浏览器的全屏模式),初始视口通常就是应用程序可以使用的屏幕部分。它可能是全屏或者减去由操作系统或者其它应用程序所占用的部分(例如状态栏)。 ```javascript @viewport { width: 100vw; /*将视口宽度设为与设备宽度相同*/ } ``` Copy to Clipboard [语法] @规则包含一组包含在CSS代码块中的嵌套的 [descriptor](https://developer.mozilla.org/zh-CN/docs/Glossary/Descriptor_(CSS))。 缩放因子`1.0` 或者 `100%` 表示不缩放,大于1表示放大,小于1表示缩小。 [描述符] 目前,大多数浏览器对 `@viewport` 的支持很差,Internet Explorer和Edge对其支持较好。但即使在这些浏览器中,也只有少量的描述符可用。如果浏览器不支持 `@viewport`,浏览器会忽略 `@viewport` 以及任何和其相关的描述符。 - [`min-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 设置viewport的最小宽度 - [`max-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 设置viewport的最大宽度 - [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 同时设置 `min-width` 和 `max-width` - [`min-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 设置viewport的最小高度 - [`max-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 设置viewport的最大高度 - [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 同时设置 `min-height` 和 `max-height` - [`zoom`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 设置初始缩放系数 - [`min-zoom`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 设置最小缩放系数 - [`max-zoom`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 设置最大缩放系数 - [`user-zoom`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 设置用户是能更改缩放系数 - [`orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 设置文档的方向 - [`viewport-fit` (en-US)](https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport) 控制文档在非矩形显示器上的显示。 #### 1.3 Window.innerWidth ==只读的 [`Window`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window) 属性 `**innerWidth**` 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在,则这个属性将包括它的宽度。== 更确切地说,`innerWidth` 返回窗口的 [layout viewport (en-US)](https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport) 的宽度。 窗口的内部高度——布局视口的高度——可以从 [`innerHeight`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerHeight) 属性中获取到。 [语法](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerWidth#语法) ```javascript let intViewportWidth = window.innerWidth; ``` [值](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerWidth#值) 一个整数型的值表示窗口的布局视口宽度是以像素为单位的。这个属性是只读的,并且没有默认值。 若要更改窗口的宽度,请使用 [`Window`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window) 的方法来调整窗口的大小,例如[`resizeBy()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/resizeBy) 或者 [`resizeTo()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/resizeTo)。 [使用说明](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerWidth#使用说明) ==如果你需要获取除去滚动条和边框的窗口宽度,请使用根元素 [`html`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/html)的[`clientWidth`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth) 属性。== `innerWidth` 属性在任何表现类似于窗口的任何窗口或对象(例如框架或选项卡)上都是可用的。 [示例](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerWidth#示例) ```javascript // 返回视口的宽度 var intFrameWidth = window.innerWidth; // 返回一个框架集内的框架的视口宽度 var intFrameWidth = self.innerWidth; // 返回最近的父级框架集的视口宽度 var intFramesetWidth = parent.innerWidth; // 返回最外层框架集的视口宽度 var intOuterFramesetWidth = top.innerWidth; ``` ### 2、阿里图标库iconfont 1. 更新项目库图标时,要将`public`中的链接更新 ```javascript{{item.lyric}}
import {mapState} from 'vuex' computed:{ ...mapState(['lyric','currentTime','playlist','playCurrentIndex']), }, ``` - 更改后效果  #### 5.4 切换上一首歌词 ```JavaScript // store/index.js setPlayIndex(state,value){ state.playCurrentIndex = value }, // components/playMusic.vue