Giter VIP home page Giter VIP 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

----- icon -----

前端资料大全资源教程-综合类-前端知识体系-前端知识结构-web前端开发大系概览-web前端开发大系概览-中文版-web-front-end-stack-v2.2-en类资源汇总-免费的编程中文书籍索引-前端书籍-前端免费书籍大全-免费的编程中文书籍索引-智能社---精通javascript开发-重新介绍-javascript(js-教程)

1loc icon 1loc

What's your favorite JavaScript single LOC (line of code)?

30-days-of-javascript icon 30-days-of-javascript

30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace.

30-days-of-react icon 30-days-of-react

30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take up to 100 days, follow your own pace.

30-seconds-of-code icon 30-seconds-of-code

A curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

33-js-concepts icon 33-js-concepts

:scroll: 每个 JavaScript 工程师都应懂的33个概念 @leonardomso

accounting.js icon accounting.js

A lightweight JavaScript library for number, money and currency formatting - fully localisable, zero dependencies.

ace-1 icon ace-1

Twitter bootstrap 3 admin template(后台模版)

acwj icon acwj

A Compiler Writing Journey

administrative-divisions-of-china icon administrative-divisions-of-china

中华人民共和国行政区划:省级(省份直辖市自治区)、 地级(城市)、 县级(区县)、 乡级(乡镇街道)、 村级(村委会居委会) ,**省市区镇村二级三级四级五级联动地址数据。

affine icon affine

There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.

ag-grid icon ag-grid

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

airtap icon airtap

Run TAP unit tests in 1789+ browsers.

algorithm-base icon algorithm-base

专门为刚开始刷题的同学准备的算法基地,没有最细只有更细,立志用动画将晦涩难懂的算法说的通俗易懂!

alist icon alist

Alibaba Group Unified List Solution.

all-the-countries icon all-the-countries

🌎 Just a quick app, for learning the countries, their capital cities, flags and other info

amis icon amis

前端低代码框架,通过 JSON 配置就能生成各种页面。

animate.css icon animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

anime icon anime

JavaScript animation engine

any-rule icon any-rule

🦕 常用正则大全, 支持web / vscode / idea / Alfred Workflow多平台

apijson icon apijson

🚀 零代码、热更新、全自动 ORM 库,后端接口和文档零代码,前端(客户端) 定制返回 JSON 的数据和结构。 🚀 A JSON Transmission Protocol and an ORM Library for automatically providing APIs and Docs.

app-ideas icon app-ideas

A Collection of application ideas which can be used to improve your coding skills.

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.