仿写网易云音乐：移动端项目 （1）项目准备

仿写网易云音乐：移动端项目

技术栈：Vue + vue-router + axios + vant库

1.项目初始化

1.1 创建项目

# vue create 项目名

 1.2 配置

 1.3 运行项目

 2.导入全局样式，清除多余页面和代码

设置根元素大小 移动端适配（全局样式代码包可查，点赞下载）

main.js：

        //导入全局样式

        import "./assets/css/base.css";

 2.安装第三方库 vant：

1. # Vue 2 项目，安装 Vant 2：
   npm i vant@latest-v2 -S
2. 自动按需引入组件 (推荐)  安装插件：
   npm i babel-plugin-import -D
3. /对于使用 babel7 的用户，可以在 babel.config.js 中补充配置
   module.exports = {
       plugins: [
             ['import', {
                 libraryName: 'vant',
                 libraryDirectory: 'es',
                 style: true
            }, 'vant']
        ]
   };
4. 重新启动项目（只要babel.config.js重新配置）

 3.新建文件夹 plugins（插件） 创建 vant.js 配置

参考更多：vant2库网址：Vant 2 - Mobile UI Components built on Vue

 引入插件

【 vant.js 】

import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

4.所有文档应用插件

【main.js】

//导入vant库
import "@/plugins/vant.js"

5.测试

引用代码 测试按钮是否实现

【HomeView.vue】

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

页面测试成功 就可以在库中添加需要的项目开始编译了

预览效果：

6.解决跨域：

【vue.config.js】

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {  //配置跨域
      '/api': {
        target: 'https://interface.music.163.com',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true,  //表示是否改变原域名
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：/api/…… 时
            实际上访问的地址是：http://"你请求的后台地址.com/……",因为重写了 /api
           */
          '^/api': ""
        }
      },
    }
  },
})