脚本宝典收集整理的这篇文章主要介绍了

从0开始的Vue全栈项目(仿网易云音乐App)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

转行前端一年多,之前一直忙于写业务代码,刚好近期不忙,就想写一个完全属于自己的项目。原本打算用react来做的,但是估计边翻api边写可能会花特别长的时间,所以打算这个项目完成后写个react的项目。
本项目因为时间关系暂时只做了部分功能,但是有空会继续更新的。

运行项目

  1. 将代码克隆到本地git clone https://github.com/chenging/vue.git;
  2. 安装依赖:进入项目根目录,命令行工具输入npm install;
  3. 运行前端服务器:命令行工具输入npm start,打开http://localhost:8888即可预览项目;
  4. 安装数据库:可以直接到mongodb官网下载,安装完在C盘目录下新建文件夹data,进入data文件夹再新建一个db文件夹,此为mongodb默认存放数据目录;
  5. 开启mongodb数据库:进入mongodb安装目录,找到mongod.exe文件,双击打开;
  6. 运行node.js后台服务器:进入项目根目录,命令行工具输入node server,第一次运行会存入初始数据。

一、目录结构

项目结构

二、主要技术栈

  1. 前端:vue+vue-router+axios+es6+webpack+canvas;
  2. 后端:node.js+koa
  3. 数据库:mongodb+mongoose

三、目前已完成的功能

  1. 音乐播放:包括播放进度条、播放动画、歌曲切换
  2. 视频播放:播放视频时暂停音乐播放,结束后会继续音乐播放;
  3. 登录注册:登录、注册、修改资料
  4. 歌曲搜索:通过歌曲名称、演唱者名字、歌词模糊查询。
  5. 图片轮播:自动切换图片及手动切换图片

四、参考资料

  1. webpack官方文档https://webpack.js.org/guides...
  2. 廖老师nodejs教程https://www.liaoxuefeng.com/w...
  3. mongoose官方文档http://mongoosejs.com/docs/ap...

五、在线演示及项目地址

  1. 在线演示地址:https://chenging.github.io/vu...
  2. github地址:https://github.com/chenging/vue

项目截图和代码部分就不放了,里面有详细的注释(主要是怕自己给忘了。。。)
第一次写文章,也是第一个个人项目,包括后台和数据库都是第一次。。。。
更多的是对自己的一个总结吧,也欢迎大家对代码或者项目部分提出意见和建议。
项目未完成的部分后续会逐渐完成。


总结

以上是脚本宝典为你收集整理的

从0开始的Vue全栈项目(仿网易云音乐App)

全部内容,希望文章能够帮你解决

从0开始的Vue全栈项目(仿网易云音乐App)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过