一个开源小作--Vue全家桶
发布于 7 年前 作者 hzzly 2704 次浏览 来自 分享
粉丝福利 : 关注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

目录结构

|——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

回到顶部