vite2+vue3全家桶来了

771 阅读1分钟

前言

为了学习vite和熟悉vue3语法,做了这个仿网易云音乐的h5,欢迎大家的讨论。

预览效果

image.png

地址

  1. 在线访问地址: online
  2. git地址: vite-demo

技术栈

  1. vue3 + vue-router4 + vuex4
  2. vant3 (ui框架)
  3. typescript

目录结构


├── README.md
├── dist
│   ├── assets
│   ├── favicon.ico
│   └── index.html
├── hosts
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── proxy.ts  
├── public
│   └── favicon.ico
├── src                 ---src
│   ├── App.vue
│   ├── api             --- 接口和axios封装
│   ├── assets      
│   ├── components      --- 组件
│   ├── main.ts
│   ├── page           
│   ├── router         --- 路由
│   ├── shims-vue.d.ts
│   ├── store          --- 数据状态管理
│   └── utils          --- 公共方法
├── tsconfig.json
└── vite.config.ts     --- 配置文件 

功能

  1. 项目整体结构搭建
  2. axios封装
  3. 代理配置
  4. 项目部署(部署到vercel)
  5. eslint/prettierrc配置
  6. autoprefixer配置

说明

此次功能仅实现了 推荐列表歌单页小播放器三块功能,但后续我暂时没有接着完善功能的想法,因为

  1. 麻雀虽小,五脏俱全,作为一个音乐类的h5,其最小的逻辑已经完成
  2. 我的目标已经达到,我希望学到的vite和vue3全家桶已经全部用到,后续接着完善功能对我个人而言手艺不是很大了。 期待下次接着完善这个项目的契机

感谢

最后感谢Binaryify大佬的开源项目NeteaseCloudMusicApi,让我有接口可以直接用,专心搞前端