加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    说明

    非常简单的一个vue2 + vuex的项目,整个流程一目了然,麻雀虽小,五脏俱全,适合作为入门练习。

    如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ^_^

    或者您可以 "follow" 一下,我会不断开源更多的有趣的项目

    如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR 👍

    开发环境 macOS 10.12.3 Chrome 56 nodejs 6.10.0

    这个项目主要用于 vue2 + vuex 的入门练习,另外推荐一个 vue2 比较复杂的大型项目,覆盖了vuejs大部分的知识点。目前项目已经完成。地址在这里

    项目运行(nodejs 6.0+)

    # 克隆到本地
    git clone https://github.com/bailicangdu/vue2-happyfri.git
    
    # 进入文件夹
    cd vue2-happyfri
    
    # 安装依赖
    npm install 或 yarn(推荐)
    
    # 开启本地服务器localhost:8088
    npm run dev
    
    # 发布环境
    npm run build

    效果演示

    demo地址(请用chrome手机模式预览)

    移动端扫描下方二维码

    路由配置

    import App from '../App'
    
    export default [{
        path: '/',
        component: App,
        children: [{
            path: '',
            component: r => require.ensure([], () => r(require('../page/home')), 'home')
        }, {
            path: '/item',
            component: r => require.ensure([], () => r(require('../page/item')), 'item')
        }, {
            path: '/score',
            component: r => require.ensure([], () => r(require('../page/score')), 'score')
        }]
    }]
    

    配置actions

    import ajax from '../config/ajax'
    
    export default {
    	addNum({ commit, state }, id) {
    		//点击下一题,记录答案id,判断是否是最后一题,如果不是则跳转下一题
    		commit('REMBER_ANSWER', id);
    		if (state.itemNum < state.itemDetail.length) {
    			commit('ADD_ITEMNUM', 1);
    		}
    	},
    	//初始化信息
    	initializeData({ commit }) {
    		commit('INITIALIZE_DATA');
    	}
    }
    

    mutations

    const ADD_ITEMNUM = 'ADD_ITEMNUM'
    const REMBER_ANSWER = 'REMBER_ANSWER'
    const REMBER_TIME = 'REMBER_TIME'
    const INITIALIZE_DATA = 'INITIALIZE_DATA'
    export default {
    	//点击进入下一题
    	[ADD_ITEMNUM](state, payload) {
    		state.itemNum += payload.num;
    	},
    	//记录答案
    	[REMBER_ANSWER](state, payload) {
    		state.answerid[state.itemNum] = payload.id;
    	},
    	/*
    	记录做题时间
    	 */
    	[REMBER_TIME](state) {
    		state.timer = setInterval(() => {
    			state.allTime++;
    		}, 1000)
    	},
    	/*
    	初始化信息,
    	 */
    	[INITIALIZE_DATA](state) {
    		state.itemNum = 1;
    		state.allTime = 0;
    	},
    }

    创建store

    import Vue from 'vue'
    import Vuex from 'vuex'
    import mutations from './mutations'
    import actions from './action'
    
    
    Vue.use(Vuex)
    
    const state = {
    	level: '第一周',
    	itemNum: 1,
    	allTime: 0,
    	timer: '',
    	itemDetail: [],
    	answerid: {}
    }
    
    export default new Vuex.Store({
    	state,
    	actions,
    	mutations
    })

    创建vue实例

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import routes from './router/router'
    import store from './store/'
    
    Vue.use(VueRouter)
    const router = new VueRouter({
    	routes
    })
    
    new Vue({
    	router,
    	store,
    }).$mount('#app')

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/bailicangdu/vue2-happyfri

    发行版本

    当前项目没有发行版本

    贡献者 7

    开发语言

    • JavaScript 63.3 %
    • Vue 29.5 %
    • HTML 4.4 %
    • CSS 2.8 %