网易云音乐 web 项目 线上地址: https://music.it666.top
运行此项目需先在本地把 api 接口跑起来, 并且事先需要安装 node 环境
1. 将 node 项目 clone 到本地
官方 API 文档: https://binaryify.github.io/NeteaseCloudMusicApi/#/
官方 GitHub 地址: https://github.com/Binaryify/NeteaseCloudMusicApi
2. 安装依赖
cmd 进入项目目录
npm install
3. 运行项目
node app.js
也可在 vue.config.js 文件中直接将 devServer 的代理地址直接替换为 https://musicapi.it666.top
npm install
npm run serve
vue + vuex + vue-router + vue-cli
- 利用 rem + 视口缩放适配移动端。
- 使用 postcss-pxtorem 自动将 px 转换成 rem。
- 通过 .browserslistrc 文件指定需要兼容的浏览器。
- 使用 fastclick 解决移动端 300 ms 点击延迟问题。
- 初始化默认的全局样式。
- 颜色换肤&图片换肤&文字换肤.
- 使用 router-link 实现 tab 选项卡。
- 路由懒加载。
- 图片懒加载。
- 网络工具类封装。
- 使用 axios.all 实现并发请求。
- 滚动组件封装。
- 使用 swiper 实现 banner 轮播图。
- 使用 vue-router 管理路由。
- 使用 vuex 进行状态管理
- 使用 transition 标签结合 velocity 实现动画。
- vue 自定义指令。
- vue 创建使用 plugin。
- 使用
<keep-alive>
缓存组件。 - 预渲染技术解决 SPA 应用 SEO 难的问题。
- 使用 vue-meta-info 统一管理 SEO 三大标签。
- 在 nodejs 通过 jsdom 获取网页节点。