Git Product home page Git Product logo

说明

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

qwe104's Projects

fks icon fks

前端技能汇总 Frontend Knowledge Structure

flipjs icon flipjs

A helper library for doing FLIP animations.

floating-ui icon floating-ui

A low-level toolkit to create floating elements. Tooltips, popovers, dropdowns, and more

flot icon flot

Attractive JavaScript charts for jQuery(基于jquery的图表插件)

flux icon flux

Application Architecture for Building User Interfaces

formily icon formily

Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3

free icon free

freefq账号已恢复!翻墙、免费翻墙、免费科学上网、免费节点、免费梯子、免费ss/v2ray/trojan节点、蓝灯、谷歌商店、翻墙梯子 -- free proxy node configuration, let programmers from China freely access the global network. Regular updates every 4 hours.

free-api icon free-api

收集免费的接口服务,做一个api的搬运工

freecodecamp icon freecodecamp

The https://freeCodeCamp.org open source codebase and curriculum. Learn to code and help nonprofits.

front-end-collect icon front-end-collect

分享自己长期关注的前端开发相关的优秀网站、博客、以及活跃开发者

front-end-develop-guide icon front-end-develop-guide

💰 Awesome The Front End Develop Guide:这份指南汇集了前端开发所使用语言的主流学习资源,并以开发者的视角进行整理编排而成。

frontend-hard-mode-interview icon frontend-hard-mode-interview

《前端内参》,有关于JavaScript、编程范式、设计模式、软件开发的艺术等大前端范畴内的知识分享,旨在帮助前端工程师们夯实技术基础以通过一线互联网企业技术面试。

frontend-tips icon frontend-tips

Super tiny, quick tips, tricks and best practices of front-end development

frontenddaily icon frontenddaily

前端开发博客,分享互联网最精彩的前端技术,欢迎关注我微信公众号:前端开发博客,回复 1024,领取前端进阶资料包,回复 加群,与大神一起交流学习。

frontendgithub icon frontendgithub

:octocat:GitHub最全的前端资源汇总仓库(包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等)

fuelux icon fuelux

Extends Twitter Bootstrap with additional lightweight JavaScript controls. Easy to install, customize, update, and optimize. All functionality covered by live documentation and unit tests.(基于bootstrap的轻型框架)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.