Need help with vue2-happyfri?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

bailicangdu
8.5K Stars 2.6K Forks MIT License 102 Commits 16 Opened issues

Description

vue2 + vue-router + vuex 入门项目

Services available

!
?

Need anything else?

Contributors list

说明

非常简单的一个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')

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.