Vue2全家桶+Element搭建的PC端在线音乐网站
1,前言
项目基于Vue2全家桶
及网易云音乐 Node Api
实现,网站风格简约清新,体验比较流畅。
下载地址:https://github.com/pdd11997110103/web-Music
2,已有功能
- 网易云APP扫码登录 & 网易云账号登录
- 注册
- 音乐播放器
- 歌单 & 详情
- 歌手 & 详情
- MV & mv详情
- 排行榜
- 搜索
- 评论
- 歌词
3,使用
- Clone该项目:https://github.com/pdd11997110103/web-Music.git
- 安装:npm install
- 运行:npm run serve
- 测试环境打包:npm run test
- 正式环境打包:npm run build
- 同时打包正式环境 & 测试环境:npm run all
- 修复:npm run lint
4,目录结构
│ .env.development
│ .env.production
│ .env.test => .env环境文件
│ .eslintignore => eslint忽略配置
│ .eslintrc.js => eslint配置
│ .gitignore => git忽略配置
│ babel.config.js
│ package-lock.json
│ package.json
│ README.md => 说明文件
│ vue.config.js => 脚手架配置
├─node_modules => 依赖
├─public
└─src
│ App.vue => 根容器
│ main.js => 根文件
│
├─assets
│ ├─css => 公共样式
│ │ base.css => 基础样式
│ │ globalColor.less => 全局颜色
│ │ init.css => 初始化
│ ├─icon => 字体图标
│ │
│ └─image => 图片
│ │
│ └─info
│
├─components => 公共组件
│
├─mixins
│ path.js => 常用方法
│
├─plugins
│ elementUI.js => 局部引入elementUi
│ snowflake.js => 雪花插件
│
├─request
│ │ fetch.js => axios封装
│ └─api => 接口定义
├─store => vueX
├─utils => 工具类
└─views => 页面
5,页面效果
登录页
首页
排行榜
歌单列表
歌单详情
歌手列表
歌手详情
MV列表
MV详情
搜索页
播放器
如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;END
PS:在本页按F12,在console中输入document.querySelectorAll('.diggit')[0].click(),有惊喜哦
公众号
往期文章
- 助你上手Vue3全家桶之Vue-Router4教程
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细!Vue-Router手把手教程
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
- 超详细!Vue的九种通信方式
- 超详细!Vuex手把手教程
个人主页
Vue2全家桶+Element搭建的PC端在线音乐网站的更多相关文章
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- Vue2全家桶之一:vue-cli(vue脚手架)超详细教程
本文转载于:https://www.jianshu.com/p/32beaca25c0d 都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到 ...
- Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天
前言 这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中.写这个项目主要目的是练习和熟悉vue和vuex ...
- Vue2全家桶之二:vue-router(路由)详细教程,看这个就够了
作者:东西里本文转载于:https://www.jianshu.com/p/514c7588e877来源:简书 转载仅供自己日后看方便. 由于Vue在开发时对路由支持的不足,于是官方补充了vue- ...
- 【前端】Vue2全家桶案例《看漫画》之番外篇、express上传漫画(可选)
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_extra_1.html 项目github地址:https://github.com/sha ...
- vue全家桶项目搭建(vue-cli 2.9.6+vue-router+vuex+axios)
一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目 ...
- 【前端】Vue2全家桶案例《看漫画》之七、webpack插件开发——自动替换服务器API-URL
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_7.html 项目github地址:https://github.com/shamoyuu/ ...
- 【前端】Vue2全家桶案例《看漫画》之六、图片阅读页
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_6.html 项目github地址:https://github.com/shamoyuu/ ...
- 【前端】Vue2全家桶案例《看漫画》之五、引入axios
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_5.html 项目github地址:https://github.com/shamoyuu/ ...
随机推荐
- JVM:Java内存区域与内存溢出异常
Java 虚拟机在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁时间,有些区域随着虚拟机进程的启动而存在,有些区域依赖用户线程的启动和 ...
- NavigationView使用简介
Android支持直接创建带有NavigationView的Activity,这里主要介绍NavigationView的逻辑. NavigationView通常是跟DrawerLayout一起使用.D ...
- Codeforces Global Round 16题解
E. Buds Re-hanging 对于这个题该开始还是没想法的,但这显然是个思维题,还是要多多动手推样例,实践一下. 简化题意:给定一个有根树,规定某个点为树干,当且仅当这个点不是根,且这个点至少 ...
- Flink入门-第一篇:Flink基础概念以及竞品对比
Flink入门-第一篇:Flink基础概念以及竞品对比 Flink介绍 截止2021年10月Flink最新的稳定版本已经发展到1.14.0 Flink起源于一个名为Stratosphere的研究项目主 ...
- .NET 生态系统的蜕变之 .NET 6云原生
云原生的英文名是cloud native,native 就是土著的意思,也就是土著对当地的环境是非常适应的,在云的环境和传统的数据中心是非常不同的,云原生就是要用的云的技术来构建应用, 利用云的技术来 ...
- kubernetes常见日志采集问题和解决方案分析
传统日志与kubernetes日志对比 传统服务 目录固定 重启不会丢失 不用关注标准与错误日志输出 容器服务 节点不固定 重启服务会漂移 需要关注标准与错误日志输出 日志文件重启会丢失 日志目录不固 ...
- MSSQL SQL注入 总结
0x00 MSSQL 基础 MSSQL系统自带库和表 系统自带库 MSSQL安装后默认带了6个数据库,其中4个系统级库:master,model,tempdb和msdb:2个示例库:Northwind ...
- 在Vs code中使用sftp插件以及连接windows远程sftp协议部署指导(解决vscode的sftp插件中文目录乱码问题)
一.启动SFtp 二.上手vs code SFTP插件 2.1 初始配置 2.2解决乱码问题 三.SFTP配置 3.1常用配置 3.2示例配置 四.SFTP使用 五.扩展阅读 一.启动SFtp 话说小 ...
- .NET Protobuf包装器库
Wodsoft Protobuf Wrapper 内容 关于 需求 安装 用法 序列化 反序列化 字段定义 字段排序 非空构造函数对象 获取Protobuf包装器 高级 支持的属性类型与Protobu ...
- APM监控--(三)zipkin部署手册
一,基础知识储备分布式跟踪的目标一个分布式系统由若干分布式服务构成,每一个请求会经过多个业务系统并留下足迹,但是这些分散的数据对于问题排查,或是流程优化都很有限,要能做到追踪每个请求的完整链路调用,收 ...