vue2-happyfri README

The project's README from github.com/bailicangdu/vue2-happyfri. As one markdown file: 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')

vue2-happyfri (bailicangdu/vue2-happyfri)

Searching Database…

10.5K ·GitHub
Vue2-happyfri
这是什么？这是一个简单的入门级演示项目，使用 Vue 2、Vue Router 和 Vuex 构建，用一个小应用展示三者如何协同工作。
这是可复用的框架，还是只是一个示例应用？它是一个小型的完整示例应用，而不是库或框架，用于阅读和运行以学习参考，不用于安装到其他项目中。
怎样才能让它运行起来？克隆仓库，运行 'npm install'，然后用 'npm run dev'（即运行 node build/dev-server.js）启动开发服务器；如需生产环境构建，使用 'npm run build'。
运行它需要先安装什么？Node.js 4.0+（在 Node 6.10 上构建和测试）和 npm 3.0+；应用本身只依赖 vue、vue-router 和 vuex。
这个项目足以学完整个 Vue，还是只能学基础？它只在一个小应用中涵盖 Vuex 和 Vue Router 的基础内容；如果想更全面地了解 Vue 的功能，作者推荐另一个更复杂的项目。
应该怎样预览这个演示？在 Chrome 的移动设备模拟模式下打开演示链接，或用手机扫描提供的二维码，因为该界面是为移动端屏幕设计的。
Vuex 部分具体演示了什么？它逐步讲解如何创建包含 actions 和 mutations 的 store，并将其接入根 Vue 实例，让你完整看到状态管理的整个流程。
为什么要做这个小项目，而不直接学更大的项目？为了给初学者提供一个小而完整的应用，让整个 vue2+vuex+vue-router 的流程一目了然，然后再去学习更复杂的项目。
What are similar projects?vue, vue2-elm, vue-router, vuestic-admin, vue-element-admin, learnVue, vue-admin-template, mall-admin-web
Which topics is it in?example, vue-router, spa, vuex, vue2, demo, beginner, router, vuejs, vue, beginner-friendly, learning
Creator
bailicangdu
Size
5.2 MB
Stars
10.5K
Updated
CommitDec 14
Age
9y
Commits · 90 Days