vue+vue-router+vuex+axios+es6+sass

19人阅读 评论(0) 收藏 举报
分类:

项目地址: github.com/hzzly/xyy-v…
demo地址: 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

主要难点

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


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

规则:

  • 默认值为:开始日期在后天,结束日期在第六天
  • 今天以前不可选择
  • 点击某个日子,则将最近的节点移动过
  • 如果离两个节点一样,则将开始日期移动过去
  • 两个节点也可选到1天里;显示为各一半

一开始打算在github上搜索一个然后直接拿来用,发现都是不符合我的设计,所以打算自己撸一个,(不要怂,撸起袖子就是干)。
终于经过几个晚上的奋战写出来了(期间遇到了各种坑)。
代码就不贴出来了 代码传送门

总结

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

查看评论

VC6中两个对话框的同时显示 作者:黄基前

 对于VC++初学者,可能会遇到这样一个问题:一个基于Dialog的MFC AppWizard应用程序,再Insert一个对话框,如何同时显示这两个对话框呢? ---- 其实这个问题很简单,想要在屏幕...
  • ghj1976
  • ghj1976
  • 2001-01-09 10:47:00
  • 1392

vue引入sass全局变量

vue引入sass全局变量        sass或者less都提供变量...
  • qq_27868533
  • qq_27868533
  • 2018-03-22 13:45:16
  • 167

vue 常用UI库

UI组件element ★9305 - 饿了么出品的Vue2的web UI工具套件Vux ★6802 - 基于Vue和WeUI的组件库mint-ui ★4776 - Vue 2的移动UI元素iview...
  • yelin042
  • yelin042
  • 2018-04-16 20:06:25
  • 65

如何在vue项目中使用sass(scss)

前提:用vue -cli脚手架生成vue项目,cmd进入到项目根目录1.用npm安装sass的依赖包(可使用cnpm淘宝镜像)npm install --save-dev sass-loader /...
  • m0_37782372
  • m0_37782372
  • 2018-04-02 11:06:28
  • 13

vue实现引用less,sass全局变量

1、npm install sass-resources-loader --save-dev; 2、build/utils.js中,在 function generateLoaders (load...
  • u014292161
  • u014292161
  • 2018-01-29 11:53:17
  • 631

在vue中使用sass的配置的方法

1、创建一个基于 webpack 模板的新项目$ vue init webpack myvue2、在当前目录下,安装依赖$ cd my-project $ npm install3、安装sass的依赖...
  • lily2016n
  • lily2016n
  • 2017-07-18 16:45:38
  • 15946

VUE 全局变量的几种实现方式

1、全局变量专用模块就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好。全局变量专用模块 Global.vueconst colorList = [ '#F9F900', '...
  • weixin_38788947
  • weixin_38788947
  • 2017-08-22 13:35:54
  • 266

nuxt <em>sass全局变量</em>也就是公共 scss 解决方案 案例

<em>SASS</em>、SCSS和css的关系 关于<em>vue</em>项目中全局引入一个 .scss文件的问题解决 nuxt <em>sass全局变量</em>也就是公共 scss 解决方案 案例 立即下载 上传者: 雪狼之夜 时间...
  • 2018年04月14日 00:00

如何在vue中使用sass

为了使用sass,我们需要安装sass的依赖包npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --sa...
  • a419419
  • a419419
  • 2017-11-05 22:03:19
  • 3083

vue访问端口号定义全局变量

1.在config里面找到dev.env.js以及prod.env.js两个文件,分别写上定义的常量以及端口号,注意单引号双引号 2. 在ajax的时候直接写     `${process...
  • qq_32963841
  • qq_32963841
  • 2018-01-11 14:45:51
  • 135
    个人资料
    持之以恒
    等级:
    访问量: 41万+
    积分: 6271
    排名: 4916
    技术交流
    QQ联系方式:326202439
    最新评论