进阶 vue 全家桶
Posted SegmentFault
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了进阶 vue 全家桶相关的知识，希望对你有一定的参考价值。
有人说只会vue不会vuex还只是个切图仔，所以本项目结合前端Vue2.0全家桶(vue+vue-router+vuex+axios+es6+sass)以及后端Node,一个前后端分离的练手项目。本项目可以作为一个前端vue进阶项目，从前端flex布局到前端vue以及组件分离的使用，再到后端Node以及Leancloud的结合，是一个打通前后端流程的一个项目。欢迎大家前来star。如果有任何问题，可以给我留言，我们互相学习讨论，一起进步。
https://github.com/hzzly/xyy-vue
http://hzzly.net/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
主要难点
1.各个组件数据的共享
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。而且也会导致代码难以维护
解决方法：采用vuex进行状态管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
每一个 Vuex 应用的核心就是 store（仓库）。"store" 基本上就是一个容器，它包含着应用中大部分的状态(state)。
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化。
代码如下(以一个user module为例)：
//vuex/modules/user.js
import 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上搜索一个然后直接拿来用，发现都是不符合我的设计，所以打算自己撸一个，(不要怂，撸起袖子就是干)。终于经过几个晚上的奋战写出来了(期间遇到了各种坑)。代码就不贴出来了，代码传送门：https://github.com/hzzly/xyy-vue/blob/master/src/components/timePicker.vue
总结
虽然只是做了个小小的个人项目，但是我感觉收获还是很大的，很多知识点掌握得更加的牢固，对 vue全家桶 的理解又更深了一些。这个项目还没有完成，后期将不定期更新，敬请期待。。
相关讲堂推荐
相关文章推荐
以上是关于进阶 vue 全家桶的主要内容，如果未能解决你的问题，请参考以下文章