一个开源小作--Vue全家桶
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
有人说只会vue不会vuex还只是个切图仔,所以本项目将带领你进阶vue全家桶。前端结合Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目,从前端flex布局到前端vue以及组件分离的使用,再到后端Node以及Leancloud的结合,是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题,可以给我留言,我们互相学习讨论,一起进步。注:本项目为开源项目,非本人同意不能用于商业应用。
项目地址: https://github.com/hzzly/xyy-vue demo地址: http://hjingren.cn/xyy-vue/ 欢迎大家的star啦~
功能说明
- 首页轮播图
- 首页热门活动
- 约跑步活动列表
- 约出行活动列表
- 个人中心
- 查看个人活动
- 学生认证(待开发)
- 学生信息修改
- 消息通知(后台接口待开发)
- 选择高校(待开发)
- 登录
- 注册
- 活动详情
- 活动报名
- 活动发布
- 时间选择组件
- 地址选择组件
- 文件上传
- axios的封装
- …
公共组件
- 弹出文字组件
- 弹出框组件
- loading组件
- toast组件
- 时间选择器组件
- 地址选择器组件
- …
目录结构
|——xyy-vue/
| |——build/
| |——confg/
| |——node_modules/
| |——src/
| | |——assets/ //静态文件
| | |——components/ //公共组件
| | |——fetch/
| | | |——api.js //axios封装与api
| | |——pages/ //存放项目页面
| | | |——Detail.vue //活动详情页面
| | | |——Home.vue //首页
| | | |——Login.vue //登录页面
| | | |——Navbar.vue //我的发布
| | | |——NotFound.vue //出错页面
| | | |——Post.vue //发布活动页面
| | | |——Regist.vue //注册页面
| | | |——Set.vue //设置页面
| | | |——Sport.vue //约跑步活动列表页面
| | | |——Travel.vue //约出行活动列表页面
| | | |——User.vue //个人中心页面
| | | |——UserInfo.vue //个人详情页面
| | | |——UserMsg.vue //消息列表页面
| | |——router/
| | | |——index.js //页面路由
| | |——util //公用方法
| | |——vuex / //存放vuex代码
| | | |——modules / //数据模块
| | | |——store.js //vuex主入口
| | | |——types.js //vuex的types文件
| | |——App.vue //父组件
| | |——main.js //入口文件
| |——static/
| |——.babelrc
| |——.editorconfig
| |——.gitgnore
| |——index.html
| |——package.json
| |——README.md
文章来源:hzzly技术blog