非常简单的一个vue2 + vuex的项目,整个流程一目了然,麻雀虽小,五脏俱全,适合作为入门练习。
这个项目主要用于 vue2 + vuex 的入门练习
# 克隆到本地
git clone https://github.com/swustlqsh/vue-demo-simple.git
# 进入文件夹
cd vue-demo-simple
# 安装依赖
yarn 或者 npm install
# 开启本地服务器localhost:8088
yarn dev 或者 npm run dev
# 发布环境
yarn build 或者 npm run build
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')
}]
}]
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');
}
}
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;
},
}
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
})
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')