仿网页云音乐首页 vue

喵喵酱仔__

已于 2023-03-29 23:30:39 修改

阅读量242

点赞数

分类专栏：项目文章标签： ui Powered by 金山文档

于 2023-03-21 15:37:15 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/129689154

版权

项目专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1 创建项目

删除无用的文件

app,vue . helloword.vue

1.2 配置路由

1、安装vue-router

第一步使用npm命令下载router,如果是vue2的版本的话,不建议直接安装最新版,不然会报错!!!（别问我怎么知道）

npm i vue-router@3.5.3 -S

第二步在src文件夹下面再创建一个文件夹,在这个新建的文件夹下创建一个js文件,导入router并使用vue.use()安装router

第三步创建VueRouter实例,并完成路由映射配置，再导出VueRouter实例。（在配置路由映射关系之前你还必须再创建一个子组件,就是需要跳转的那个组件。）

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter);

const routes = [{
  path:"/RouterCnp",
  name:'RouterCnp',
  component:() =>import("../components/RouterCnp")
}];
 
const router = new VueRouter({
  routes
});

export default router

第五步在main.js文件中导入router。


import router from './router/index'
 
new Vue({
  // 第五步
  router,
  render: h => h(App),
}).$mount('#app');

第六步在App.vue组件中通过<router-link></router-link>标签和<router-view></router-view>标签使用即可，最后还要给<router-link>标签设置to属性就完成了vue路由的基本使用啦。


    <router-link to="/RouterCnp">路由</router-link>
    <router-view></router-view>

1.3 安装less-loader

npm install less@4 --save-dev
npm install less-loader@7 --save-dev

2 安装vant库

3 安装按需引入组件

3.1 安装插件

npm i vant@latest-v2 -S

3.2 再babel.config.js中引入代码

plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

3.3 按需使用

统一管理

测试：使用组件进行测试

4 移动端适配

4.1 css初始化

/* 
css初始化
*/
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
}
img{
    vertical-align: middle;
}
/* 移动端适配 假设设计稿750px =100vw  */
html{
    font-size: 13.333333vw;
}
/* 防止字体过大 */
@media (min-width: 750px) {
    html {
      font-size: 100px;
    }
  }
body{
    max-width: 750px;
    margin: 0 auto;
    font: 14px/1.5 Helvetica,sans-serif,STHeiTi;
    color: #333;
}

参考：

移动端适配基础(rem,vw,vh

5 tab选项卡

<van-tabs v-model="active">
  <van-tab title="标签 1">内容 1</van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>

export default {
  data() {
    return {
      active: 2,
    };
  },
};

1 代码：

2 调样式：

//vant库 里面 tab样式  
/deep/ .van-tabs--line .van-tabs__wrap{
    border-bottom: 1px solid #dbdbdb;
    .van-tab{
        font-size: 16px;
    }
}

6 根据tab创建三个组件

因为他不更改地址，所以做子组件

将三个tab页面抽取出来，形成三个组件

注意报错：

Unknown custom element: ＜＞ - did you register the component correctly?...

7 推荐音乐

7.1 推荐歌单

7.1.1 编写样式：

1 引入布局

<van-row>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
</van-row>

1 编辑推荐

竖线与文字对齐：用绝对定位定在旁边

.title {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    font-size: 0.34rem;
    position: relative;
    padding-left: 0.2rem;

    &::before {
        content: "";
        position: absolute;
        width: 2px;
        height: 20px;
        top: 2px;
        background: #ff5555;
        left: 0;
    }

.content {
    .item {
        position: relative;

        img {
            width: 100%;
        }

        .total {
            color: #fff;
            position: absolute;
            right: 2px;
            top: 2px;

            img {
                width: 0.3rem;
                position: absolute;
                top: 0.08rem;
                left: -0.34rem;
            }
        }

        .info {
            margin: .14rem;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 0.26rem;
            color: #333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* 这里是超出几行省略 */
        }
    }

    .van-col {
        height: 3.56rem;
    }
}

7.1.2 调用接口

http://iwenwiki.com:3000/toplist/detail

1 安装Axios

2 使用

7.1.3 跨域

/api就代表了 target地址

 devServer: {
    host: '0.0.0.0',
    port: 3001,
    client: {
      webSocketURL: 'ws://0.0.0.0:3001/ws',
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      '/api': {
        target: 'http://iwenwiki.com:3000',//目标地址 请求的后台接口 
        ws: true,
        changeOrigin: true,
        pathRewrite:{//路径重写
          "^/api":''
        }
      },
      //https://interface.music.163.com
      '/foo': {
        target: 'https://interface.music.163.com',//目标地址 请求的后台接口 
        ws: true,
        changeOrigin: true,
        pathRewrite:{//路径重写
          "^/foo":''
        }
      },
      '/boo': {
        target: 'https://music.163.com',//目标地址 请求的后台接口 
        ws: true,
        changeOrigin: true,
        pathRewrite:{//路径重写
          "^/boo":''
        }
      },

    }
  }

7.1.4 播放量数据格式花处理

30000补成3万，如果不够万就不补

方法1：

 <div class="total">{{ num(item.playCount) }}

  //处理播放量的数据格式-------------------------
  num(n) {
            return (n / 10000).toFixed(1);
  }

方法2：

  filters: {
    num (val) {
      if (!val) return
      //val播放量的数值
      val = val > 9999 ? (val / 10000).toFixed(1) + '万' : val
      return val
    }
  }

vue 过滤器实现和使用场景举例

总要格式化数据

7.2 最新音乐

2. 最新音乐
    https://interface.music.163.com/weapi/personalized/newsong
    请求方式：
        post 
    参数：
        params
        encSecKey

7.2.1配置跨域接口配置

只能相对地址，前边补一个/foo （foo 做了跨域配置： foo代替域名）

  /* 
        2. 获取最新音乐

    */
  getNewSong() {
    return axios.post(base.newsong, {
      params:
        "IZ+w5OfW3rRPTIqi7F/038d+jTtdXmo1vsWV2lMZ3nAHFK5h3Ac0fM1z2yK+4kTo",
      encSecKey:
        "14d91aef4f16e63d72081a7195fbdcf9158f946cb46a89ae51c2baf5b95b716e301513d7c70800c74dad1b20350f71c4320e4729b5e6c17f18351a48f85dc04674cc3508b45ce931e4ea2d9c58ce60e5668a1b147aafb7893eca8a5a066581463f4ae653e4ffa06bcafec0712442204676a63952f9d241b73da83ab087d4094b",
    });
  },

7.2.2 编写样式

分左右两个盒子：用flex布局

左边的两行用【两个div】

给图片设置宽度，文字使用dispaly:1

7.2.3 调用接口响应

8 热歌榜

切换tab页，他不重新调用接口。

想要做的话，控制他的显示和隐藏

8.1 热歌列表

<div class="code" :class="{'code-red':index<3}">{{ index>8?index+1 :'0'+ (index+1) }}</div>

.code-red{
    color: #df3436;
  }

文字前三个变红
数据１０之前要补充０　
数组的索引从０开始，　但是显示要从１开始，　所以：　数字＝　索引＋１