vue2 + vue-router + vuex 入门项目
JavaScript Vue HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 32c0ba4 May 12, 2018
Permalink
Failed to load latest commit information.
build updata Dec 23, 2016
config updata Dec 23, 2016
happyfri 部分优化 Jun 20, 2017
src itemcontainer Mar 14, 2018
.babelrc updata Dec 8, 2016
.editorconfig updata Dec 8, 2016
.gitignore updata Dec 8, 2016
LICENSE Update LICENSE Jun 1, 2017
README.md sub for md May 12, 2018
index.html Update index.html Aug 16, 2017
package.json Update package.json Aug 17, 2017

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')