<%= htmlWebpackPlugin.options.title %>

``` 组件懒加载将需要懒加载的组件放在 `lazy-component` 标签中，即可实现组件懒加载。 ```js // 注册时设置`lazyComponent`选项 app.use(Lazyload, { lazyComponent: true, }); ``` #### 3.2 axios封装、api接口封装 - 此处封装的不好，借鉴第二个项目中的封装。 - 设置 `baseUrl` ```JavaScript import axios from 'axios'; let baseUrl = 'http://localhost:3000' // 获取轮播图的api,type:资源类型,对应以下类型,默认为 0 即PC // 1: android;2: iphone;3: ipad export function getBanner(type=0){ return axios.get(`${baseUrl}/banner?type=${type}`) } // 获取推荐歌单,可选参数 : limit: 取出数量 , 默认为 10 export function getMusicList(limit=10){ return axios.get(`${baseUrl}/personalized?limit=${limit}`) } // 获取歌单的详情 export function getPlaylistDetail(id){ return axios.get(`${baseUrl}/playlist/detail?id=${id}`) } // 获取歌词 export function getLyric(id){ return axios.get(`${baseUrl}/lyric?id=${id}`) } // 搜索歌曲 export function searchMusic(keyword){ return axios.get(`${baseUrl}/search?keywords=${keyword}`) } // 手机登录 export function phoneLogin(phone,password){ return axios.get(`${baseUrl}/login/cellphone?phone=${phone}&password=${password}`) } // 获取用户的详情 export function userDetail(uid){ return axios.get(`${baseUrl}/user/detail?uid=${uid}`) } export default { getBanner,getMusicList,getPlaylistDetail,getLyric,searchMusic,phoneLogin, userDetail } ``` #### 3.3 swiper演示显示多个sliders https://www.swiper.com.cn/demo/index.html ![image-20220410164234440](C:\Users\sxy\AppData\Roaming\Typora\typora-user-images\image-20220410164234440.png) ```javascript

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

``` #### 3.4 登陆页面 ```JavaScript // router/api/index.js import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import store from '@/store/index.js' const routes = [ { path: '/login', name: 'login', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue') }, ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router // vuex/store/index.js import { createStore } from 'vuex' import api from '@/api/index.js' export default createStore({ state: { user:{ isLogin:false, account:{}, userDetail:{} } }, getters:{}, mutations: { setUser(state,value){ state.user = value } }, actions: { async phoneLogin(content,payload){ // console.log(payload) let result = await api.phoneLogin(payload.phone,payload.password) if(result.data.code==200){ content.state.user.isLogin = true; content.state.user.account = result.data.account let userDetail = await api.userDetail(result.data.account.id) content.state.user.userDetail = userDetail.data; localStorage.userData = JSON.stringify(content.state.user) console.log(userDetail) content.commit('setUser',content.state.user) } console.log(result) return result } }, modules: { } }) // components/Login.vue ``` ### 4、CSS技巧 #### 4.1 less 1. 嵌套式样式 ```less ``` #### 4.2 横轴分布与侧轴居中 ```less //横轴 justify-content: space-between; /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */ justify-content: space-around; /* 均匀排列每个元素每个元素周围分配相同的空间 */ justify-content: space-evenly; /* 均匀排列每个元素每个元素之间的间隔相等 */ justify-content: stretch; /* 均匀排列每个元素 //侧轴 align-items: center; ``` #### 4.3 全局字体 ```less font-family: '微软雅黑'; ``` #### 4.4 多行文本省略 - 基于行数截断 ```css .name{ height: 0.6rem; width: 100%; font-size: 0.24rem; line-height: 0.3rem; position: relative; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } ``` ```JavaScript .description{ font-size: 0.24rem; color: #ccc; overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } ``` #### 4.5 CSS filter模糊度及z-index ![image-20220411203850012](C:\Users\sxy\AppData\Roaming\Typora\typora-user-images\image-20220411203850012.png) ```css .bg{ position: fixed; left: 0; top: 0; width: 7.5rem; height: auto; z-index: -1; //在底层 filter:blur(40px) //模糊度 } ``` #### 4.6 跑马灯 ```css

marquee{ width: 5rem; flex: 1; } ``` #### 4.7 播放词条的旋转 ```javascript

// .needle{ width:2.5rem; height: auto; position: absolute; left: 3.5rem; transform-origin: 0.3rem 0; transform: rotate(-10deg); //初始角度 transition: all 1s; z-index: 10; //为了在上层，让播放词条不被覆盖 } .needle.active{ width:2.5rem; height: auto; position: absolute; left: 3.5rem; transform-origin: 0.3rem 0; transform: rotate(15deg); //旋转后角度 transition: all 1s; z-index: 10; } ``` #### 4.8 calc()动态计算公式说明： 1、任何长度值都可以使用calc()函数进行计算； 2、calc()函数支持 "+", "-", "*", "/" 运算； 3、calc()函数使用标准的数学运算优先级规则； 4、需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

```JavaScript .disc{ width: 5.5rem; height: auto; position: absolute; left: calc(50% - 2.75rem) ; top: 2.5rem; } .playImg{ width: 3.4rem; height: 3.4rem; border-radius: 1.7rem; position: absolute; left: calc(50% - 1.7rem); top: 3.55rem; } ``` #### 4.9 offsetWidth与offset Height、offsetLeft与offsetTop、scrollTop 1. 总览 ![img](https://img-blog.csdn.net/20180814155356917?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTE4ODE5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70) 如图所示中间是个div,那么div.offsetTop = 此div border外到父元素border内且都不包括border 那么div.scrollTop = 此div border(包括border)到窗体上边界(如果div比较大,使得外部产生滚动条,那么这个距离将会随着滚动条变化) 2. offsetWidth与offset Height ![Image:Dimensions-offset.png](https://developer.mozilla.org/@api/deki/files/186/=Dimensions-offset.png) 3. offsetTop和scrollTop区别 - 如图所示中间是个div,那么div.offsetTop = 此div border外到父元素border内且都不包括border 那么div.scrollTop = 此div border(包括border)到窗体上边界(如果div比较大,使得外部产生滚动条,那么这个距离将会随着滚动条变化) - scrollTop:当前元素顶端距离窗口顶端距离,鼠标滚轮会影响其数值. ==是这些元素中唯一一个可写可读的==。下面的图是用微信截图随便画的:D（不小心混入了一个光标。。 ![img](https://img2018.cnblogs.com/blog/670878/201810/670878-20181008162649050-2000307786.png) ![img](https://img2018.cnblogs.com/blog/670878/201810/670878-20181008162350402-98055053.png)![img](https://img2018.cnblogs.com/blog/670878/201810/670878-20181008170134916-81833900.png) 所以当滚动条在最顶端的时候， scrollTop=0 ，当滚动条在最低端的时候， scrollTop=115 这个115怎么来的（滚动条高度是15，我量的），见下图。（实为我主观臆测，不保证准确性。。。_(:з」∠)_ ![img](https://img2018.cnblogs.com/blog/670878/201810/670878-20181008170955794-1723253104.png) scrollTop是一个整数。如果一个元素不能被滚动，它的`scrollTop`将被设置为`0`。设置scrollTop的值小于0，`scrollTop` 被设为`0。` 如果设置了超出这个容器可滚动的值, `scrollTop` 会被设为最大值。 4. 汇总 ```JavaScript ``` #### 4.10 flex-wrap & ==flex:1== [CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS) 的 **`flex-wrap`** 属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。 ```css flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: revert; flex-wrap: unset; ``` - nowrap flex 的元素被摆放到到一行，这可能导致 flex 容器溢出。**cross-start** 会根据 [`flex-direction`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction) 的值等价于 **start** 或 **before**。为该属性的默认值。 - wrap flex 元素被打断到多个行中。**cross-start** 会根据 [`flex-direction`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction) 的值等价于 **start** 或**before**。**cross-end** 为确定的 **cross-start** 的另一端。 - wrap-reverse 和 wrap 的行为一样，但是 **cross-start** 和 **cross-end** 互换。 #### 4.11 set去重 - 对于重复的历史搜索进行去重，并控制显示的最大长度 ```JavaScript methods: { saveKeyWord: async function () { this.keywordList.push(this.searchKeyword) this.keywordList = Array.from(new Set(this.keywordList)) if (this.keywordList.length > 10) { this.keywordList = this.keywordList.slice(this.keywordList.length - 10, this.keywordList.length) } localStorage.keywordList = JSON.stringify(this.keywordList) let result = await searchMusic(this.searchKeyword) this.searchSongs = result.data.result.songs console.log(this.searchSongs) }, ``` ### 5、JavaScript技巧或函数 #### 5.1 修改数字 `Number.prototype.toFixed()`确定小数点后位数。 ```JavaScript function changeValue (num){ let res = 0 if(num>=100000000){ res = num/100000000 res = res.toFixed(2) + '亿' }else if(num>10000){ res = num/10000 res = res.toFixed(2) + '万' } return res } ``` #### 5.2 正则分割歌词 - 以换行\n来切割歌词 ```javascript let arr = state.lyric.split(/\n/igs).map((item,i,arr)=>{} ``` #### 5.3 处理歌词样式 - 原始歌词样式 ![image-20220413212839237](C:\Users\sxy\AppData\Roaming\Typora\typora-user-images\image-20220413212839237.png) - JavaScript字符串处理 ```JavaScript // vuex/store/index.js getters:{ lyricList:function(state){ let arr = state.lyric.split(/\n/igs).map((item,i,arr)=>{ let min = parseInt(item.slice(1,3)) ; let sec = parseInt(item.slice(4,6)) ; let mill = parseInt(item.slice(7,10)); return { min,sec,mill, lyric:item.slice(12,item.length), content:item, time:mill+sec*1000+min*60*1000 } }) //components/playMusic.vue

import {mapState} from 'vuex' computed:{ ...mapState(['lyric','currentTime','playlist','playCurrentIndex']), }, ``` - 更改后效果 ![image-20220413213456401](C:\Users\sxy\AppData\Roaming\Typora\typora-user-images\image-20220413213456401.png) #### 5.4 切换上一首歌词 ```JavaScript // store/index.js setPlayIndex(state,value){ state.playCurrentIndex = value }, // components/playMusic.vue

``` #### 6.3 v-for循环拿取数据 ```html

``` #### 6.4 ==Vuex、store== - 使用技巧 ```JavaScript // commit 使用同步mutation increment: () => store.commit('increment'), // dispatch 使用异步action asyncIncrement: () => store.dispatch('asyncIncrement') ``` - 整体引入 ```javascript import { createStore } from 'vuex' import api from '@/api/index.js' export default createStore({ state: { playlist:[{ name: "彩券", id: 1486513704, al:{ id: 96680121, name: "彩券", pic: 109951165386012140, picUrl: "http://p3.music.126.net/NP1Zg57UUbHNzAhw7n-LeA==/109951165386012146.jpg", pic_str: "109951165386012146" }}], playCurrentIndex:0, lyric:'', currentTime:0, intervalId:0, user:{ isLogin:false, account:{}, userDetail:{} } }, getters:{ lyricList:function(state){ let arr = state.lyric.split(/\n/igs).map((item,i,arr)=>{ let min = parseInt(item.slice(1,3)) ; let sec = parseInt(item.slice(4,6)) ; let mill = parseInt(item.slice(7,10)); return { min,sec,mill, lyric:item.slice(12,item.length), content:item, time:mill+sec*1000+min*60*1000 } }) arr.forEach((item,i)=>{ if(i==0){ item.pre = 0; }else{ item.pre = arr[i-1].time } }) return arr } }, mutations: { setPlaylist:function(state,value){ state.playlist = value }, pushPlaylist:function(state,value){ state.playlist.push(value) }, setPlayIndex(state,value){ state.playCurrentIndex = value }, setLyric(state,value){ state.lyric = value }, setCurrentTime(state,value){ state.currentTime = value }, setUser(state,value){ state.user = value } }, actions: { async reqLyric(content,payload){ console.log(payload) let result = await api.getLyric(payload.id) content.commit('setLyric',result.data.lrc.lyric) console.log(result.data.lrc.lyric) }, async phoneLogin(content,payload){ // console.log(payload) let result = await api.phoneLogin(payload.phone,payload.password) if(result.data.code==200){ content.state.user.isLogin = true; content.state.user.account = result.data.account let userDetail = await api.userDetail(result.data.account.id) content.state.user.userDetail = userDetail.data; localStorage.userData = JSON.stringify(content.state.user) console.log(userDetail) content.commit('setUser',content.state.user) } console.log(result) return result } }, modules: { } }) ``` - Vue2在子组件使用 `store` ==先import引入，再…结构== ```javascript import {mapState, mapMutations} from 'vuex' export default { data () { return { paused: true, show: false } }, computed: { ...mapState(['playlist', 'playCurrentIndex']) }, mounted () { console.log([this.$refs.audio]) this.$store.dispatch('reqLyric', { id: this.playlist[this.playCurrentIndex].id }) }, updated () { console.log(this.playlist[this.playCurrentIndex]) this.$store.dispatch('reqLyric', { id: this.playlist[this.playCurrentIndex].id }) }, } ``` - Vue3正规使用Vuex，`useStore` ## 组合式API[#](https://vuex.vuejs.org/zh/guide/composition-api.html#组合式api) 可以通过调用 `useStore` 函数，来在 `setup` 钩子函数中访问 store。这与在组件中使用选项式 API 访问 `this.$store` 是等效的。 ```javascript import { useStore } from 'vuex' export default { setup () { const store = useStore() } } ``` ## 访问 State 和 Getter[#](https://vuex.vuejs.org/zh/guide/composition-api.html#访问-state-和-getter) 为了访问 state 和 getter，需要创建 `computed` 引用以保留响应性，这与在选项式 API 中创建计算属性等效。 ```javascript import { computed } from 'vue' import { useStore } from 'vuex' export default { setup () { const store = useStore() return { // 在 computed 函数中访问 state count: computed(() => store.state.count), // 在 computed 函数中访问 getter double: computed(() => store.getters.double) } } } ``` ## 访问 Mutation 和 Action[#](https://vuex.vuejs.org/zh/guide/composition-api.html#访问-mutation-和-action) 要使用 mutation 和 action 时，只需要在 `setup` 钩子函数中调用 `commit` 和 `dispatch` 函数。 ```javascript import { useStore } from 'vuex' export default { setup () { const store = useStore() return { // 使用 mutation increment: () => store.commit('increment'), // 使用 action asyncIncrement: () => store.dispatch('asyncIncrement') } } } ``` #### 6.5 v-if & v-else & v-show - 播放与暂停图标的切换 ```javascript

// export default { data () { return { paused: true, show: false } }, ``` - 通过v-show设置歌词组件的显示 ```javascript

// export default { data () { return { paused: true, show: false } }, ``` - 同一位置上播放与暂停按钮的样式切换 ```css // .icon{ fill: #fff; width: 0.5rem; height: 0.5rem; } .play.icon{ width: 1rem; height: 1rem; } ``` #### 6.6 父向子组件传值 - 传递playList,让歌词组件获取歌词数据 ```javascript //父组件 //子组件

export default { props:['playDetail','paused','play'], ``` #### 6.7 子向父组件传值 - 歌词组件向父组件传递返回按钮，来控制子组件（歌词组件）的显示（v-show） ```javascript //子组件

//父组件 ``` #### 6.8 axios(api接口)+vuex(store) - 获取歌词 ```JavaScript // axios/api/index.js import axios from 'axios'; export function getLyric(id){ return axios.get(`${baseUrl}/lyric?id=${id}`) } export default { getBanner,getMusicList,getPlaylistDetail,getLyric,searchMusic,phoneLogin, userDetail } // vuex/store/index.js import { createStore } from 'vuex' import api from '@/api/index.js' export default createStore({ state: {}, mutations: { setLyric(state,value){ state.lyric = value }, }, actions: { async reqLyric(content,payload){ console.log(payload) let result = await api.getLyric(payload.id) // commit 使用同步mutation // dispatch 使用异步action content.commit('setLyric',result.data.lrc.lyric) console.log(result.data.lrc.lyric) }, } // ``` #### 6.9 ==watch监听== - watch监听时间，控制歌词滚动和高亮 ```JavaScript // components/playMusic.vue

import { watch } from 'vue' import {mapState} from 'vuex' export default { props:['playDetail','paused','play'], data:function(){ return { isLyric:true, } }, computed:{ ...mapState(['lyric','currentTime','playlist','playCurrentIndex']), }, watch:{ currentTime:function(newValue){ console.log(newValue) console.log([this.$refs.playLyric]) let p = document.querySelector('p.active') if(p){ let offsetTop = p.offsetTop; this.$refs.playLyric.scrollTop = p.offsetTop; //直接将活跃歌词移到屏幕中央 console.log([p]) } } }, } ``` #### 6.10 vue-router之路由守卫 - beforeEnter在登陆页面进行操作 ```JavaScript import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import store from '@/store/index.js' const routes = [ { path: '/login', name: 'login', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue') }, { path: '/me', name: 'me', beforeEnter:(to,from,next)=>{ console.log(store.state.user) if(store.state.user.isLogin){ next() }else{ next("/login") } }, // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/Me.vue') } ] ```