进阶vue全家桶

有人说只会vue不会vuex还只是个切图仔，所以本项目结合前端Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目，从前端flex布局到前端vue以及组件分离的使用，再到后端Node以及Leancloud的结合，是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题，可以给我留言，我们互相学习讨论，一起进步。

http://www.tuicool.com/articles/Ebe2emm

项目地址： https://github.com/hzzly/xyy-vue

demo地址： http://hjingren.cn/xyy-vue/

欢迎大家的star啦~

功能说明

• 首页轮播图

• 首页热门活动

• 约跑步活动列表

• 约出行活动列表

• 个人中心

  • 查看个人活动

  • 学生认证(待开发)

  • 学生信息修改

  • 消息通知(后台接口待开发)

  • 选择高校(待开发)

• 登录

• 注册

• 活动详情

  • 活动报名

• 活动发布

  • 时间选择组件

  • 地址选择组件

  • 文件上传

• axios的封装

• ……

公共组件

• 弹出文字组件

• 弹出框组件

• loading组件

• toast组件

• 时间选择器组件

• 地址选择器组件

• ……

目录结构

<!–more–>

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

主要难点

1.各个组件数据的共享

传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。而且也会导致代码难以维护

解决方法：采用 vuex 进行状态管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

每一个 Vuex 应用的核心就是 store（仓库）。”store” 基本上就是一个容器，它包含着应用中大部分的状态(state)。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations 。这样使得我们可以方便地跟踪每一个状态的变化。

代码如下(以一个user module为例)：

//vuex/modules/user.jsimport api from '../../fetch/api'import * as types from '../types'const state = {    // 用户登录状态    loginStatus: JSON.parse(localStorage.getItem('loginStatus')) || false,}const actions = {    /**     * 用户登录     */    setUserInfo({ commit }, res) {        localStorage.setItem('loginStatus', true)        commit(types.SET_LOGIN_STATUS, true)    },    /**     * 退出登录     */    setSignOut({ commit }) {        localStorage.removeItem('loginStatus')        commit(types.SET_LOGIN_STATUS, false)    },}const getters = {    loginStatus: state => state.loginStatus}const mutations = {    [types.SET_LOGIN_STATUS](state, status) {        state.loginStatus = status    }   }export default {    state,    actions,    getters,    mutations}//User.vue<template>    <div class="user">        <div v-if="!loginStatus">            ...        </div>        <div v-else>                ...                </div>    </div></template><script>import { mapGetters } from 'vuex'export default {    computed: {        ...mapGetters([            'loginStatus'        ])    }}</script>

2.时间选择组件(要可选择时间段)

规则：

• 默认值为：开始日期在后天，结束日期在第六天

• 今天以前不可选择

• 点击某个日子，则将最近的节点移动过

• 如果离两个节点一样，则将开始日期移动过去

• 两个节点也可选到1天里；显示为各一半

一开始打算在github上搜索一个然后直接拿来用，发现都是不符合我的设计，所以打算自己撸一个，(不要怂，撸起袖子就是干)。

终于经过几个晚上的奋战写出来了(期间遇到了各种坑)。

代码就不贴出来了 代码传送门

总结

虽然只是做了个小小的个人项目，但是我感觉收获还是很大的，很多知识点掌握得更加的牢固，对 vue全家桶 的理解又更深了一些。这个项目还没有完成，后期将不定期更新，敬请期待。。

如果觉得还行，欢迎star

项目地址： https://github.com/hzzly/xyy-vue

好了，溜了溜了。。。