前端框架Vue(15)——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目
一、前言
在这个 vue 系列的第一篇文章,我写过是 vue-cli-simple 脚手架的环境搭建。前段时间,也刚好给公司做了一个后台管理系统的产品,用的就是 vue-cli-simple。 一个月的时间将系统从无到上线,组件化、模块化开发的非常快速、可读性、复用性,整理架构清晰,易管理、维护。
所以,这次利用 vue-cli 完整版来实践一下。那么这个 simple 在哪呢?其实,simple 是 webpack-simple。这个脚手架的 webpack 有更全的功能。
而且,目录结构有了比较大变化。可自行去 github 克隆仓库到本地比较。我在开发完成后,将 Demo 打包放到了 xshell 上部署,发现只要在config 文件夹中的 index.js 稍稍改动就不会出现空白页 404 的情况。
二、仿网易云音乐
vue-cli-demo github地址传送门
这是一张 Demo 的截图,大致模块四个,header、carousel、pages、footer。主要功能,组件(页面间的切换),登录(待做),轮播图组件,公共数据、状态管理。完成这个项目可以体验到:
1、vue-cli 的环境搭建,项目目录。
2、学习组件化、模块化开发。
3、学习 vue 全家桶:vue-router 路由、vuex 状态管理。
4、了解 webpack 的压缩、打包。
三、技术栈
vue.js + vue-router + vuex + ElementUI
四、vue-cli 环境搭建
vue(脚手架) 推荐开发环境,一文中详细的介绍了 simple 的环境搭建,而 vue-cli,只需要改成 vue init webpack <项目名字>
,即可。
五、目录结构
|——build //构建 |——config //配置|——node_modules //npm项目依赖|——src |——assets //静态资源,图片
| |——components—— //公共组件
| |——carousel.vue //轮播图组件|
| |——footerComponent.vue //底部组件|
| |——headerComponent.vue //头部组件|
| |——navComponent.vue //红色部分|
||——config——
| |——env.js //开发api路径|
| |——fetch.js //封装的异步请求|——data
||——router—— //路由
| |——index.js|——service //项目中全部的异步接口请求文件
| |——store—— //vuex状态管理
| |——action.js|
| |——index.js|
| |——mutations.js|——view—— //组件页面部分
| |——findMusicPage——| |——musicTypeController
| || |——findMusicComponent.vue
| |——downloadComponent.vue|
| |——friendComponent.vue |
| |——musicManComponent.vue|
| |——myMusicComponent.vue|——app.vue //主文件
| |——main.js //主文件入口
|——static|——test //单元测试|——index.html //首页|——package.json|——README.md
六、vue-cli-easy
这是我自己根据 vue-cli 环境,添加了 vue-router, vuex, api接口公共抽象配置,elementUI 的脚手架。你可以直接 clone 到你的 workspace 中,进行依赖的安装(npm install),即可以进行自己的项目开发了。
项目地址传送门:github vue-cli-easy 链接
github 上的 README.md 持续的会完善 … …
前端框架Vue(15)——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目相关推荐
- 小程序能用vue写么_仿网易云音乐APP的微信小程序【小程序和Vue版本】
小程序版本: 首先是网易云的音乐接口: npm 源码获取见文章底部. 目前实现功能 用户 歌单 FM 播放 评论 MV 专辑 歌手 登录 歌曲红心,FM trash,收藏单曲至歌单 收听记录 歌单歌曲 ...
- Vue实现web端仿网易云音乐 完成大部分功能
采用vue2+element,后台网易云接口为github某位大佬写的,上传到腾讯云服务器实现在线接口 1.代码结构 一.未登录页面 1.未登录效果预览 动图经过压缩可能渐变色不明显..... 由于图 ...
- 计算机毕业设计Node.js+Vue安卓仿网易云音乐客户端APP(程序+源码+LW+部署)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流 项目运行 环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
- 基于vue的高仿网易云音乐网站,实现大多数功能
文章目录 前言 项目演示地址 线上地址 项目仓库 总结 前言 基于Vue + Vue-Router + Vuex + axios + elementui,ui参考网易云音乐,后端接口使用网易云音乐接口 ...
- 毕业设计:基于Springboot + Vue仿网易云音乐网站(一)开源
项目背景 最近自学了springboot.vue.redis等技术,为了巩固,决定自己做个小网站玩玩,把学到的东西都使用一下,因为自己比较喜欢听音乐,去年一年网易云就听了1800个小时,然后也喜欢周杰 ...
- 高仿网易云音乐(vue实战项目)
高仿网易云音乐(Vue实战项目)
- 移动应用开发——uni-app框架 仿网易云音乐播放器学习心得
目录 一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架 二.开发工具与项目创建 1.开发工具 2.项目创 ...
- 我做了一个网易云音乐外链播放器的Vue组件,很nice
话不多说,上视频: https://www.bilibili.com/video/BV1p44y1M7KC/ 介绍 起因是我的一个小项目用到了网易云音乐的外链播放器:于是将它从项目里剥离出来做成一个V ...
- 一款仿网易云音乐Java开源系统(附源码)
嗨喽!Java后端编程的各位小伙伴们,由于公众号做了乱序推送改版,为了保证公众号的推文能够第一时间及时送达到大家手上,大家记得将公众号 加星标置顶 ,公众号每天会送上Java技术干货推文 ! 上篇推文 ...
- node.js+uniapp计算机毕业设计安卓仿网易云音乐客户端APP(程序+APP+LW)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流 项目运行 环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
最新文章
- 卓越性能代码_开启win10隐藏的“超级性能模式”
- 漫谈时序设计(1)跨时钟域是设计出来的,而非约束出来的!
- 机会的度量:概率和分布
- centos7 安装 mysql rpm_CentOS7使用rpm安装MySQL8
- 小结 frambuffer 原理及流程 (五)
- Visual Studio2005入门.Net系列视频教程
- 程序员加班文化是怎么来的?
- PTA浙大版python程序设计题目集--第1章-2 从键盘输入三个数到a,b,c中,按公式值输出 (30 分)
- oracle数据库元数据SQL查询
- 微信APP支付的坑 - errorcode=-1
- saltstack部署java应用失败无日志——CICD 部署
- sql2008能否打开mysql数据库_mysql数据库数据能不能导入到sql server中
- Memcached的Web管理工具MemAdmin(待实践)
- JS中什么是回调函数?
- 侵犯计算机软件著作权的行为,侵犯计算机软件著作权的行为有哪些?
- Java将.docx文件转换为.pdf文件
- Toncat环境变量的配置
- http转义与url编码
- 即时与及时有什么区别_仙剑奇侠传6即时制与回合制有什么区别 怎么切换回合制...
- 【光伏并网柜电流过载跳闸原因】