vue2 + vue-router + vuex 入门项目

# 说明 > 非常简单的一个vue2 + vuex的项目，整个流程一目了然，麻雀虽小，五脏俱全，适合作为入门练习。 > 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^ > 或者您可以 "follow" 一下，我会不断开源更多的有趣的项目 > 如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍 > 开发环境 macOS 10.12.3 Chrome 56 nodejs 6.10.0 > 这个项目主要用于 vue2 + vuex 的入门练习，另外推荐一个 vue2 比较复杂的大型项目，覆盖了vuejs大部分的知识点。目前项目已经完成。[地址在这里](https://github.com/bailicangdu/vue2-elm) ## 项目运行（nodejs 6.0+） ``` bash # 克隆到本地 git clone https://github.com/bailicangdu/vue2-happyfri.git # 进入文件夹 cd vue2-happyfri # 安装依赖 npm install 或 yarn(推荐) # 开启本地服务器localhost:8088 npm run dev # 发布环境 npm run build ``` # 效果演示 [demo地址](https://cangdu.org/happyfri/)（请用chrome手机模式预览） ### 移动端扫描下方二维码 <img src='https://github.com/bailicangdu/vue2-happyfri/blob/master/src/images/demo.png' width="200" height="200" /> ## 路由配置 ```js 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 ```js 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 ```js 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 ```js 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实例 ```js 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') ```