Github url

vue2-happyfri

by bailicangdu

bailicangdu /vue2-happyfri

vue2 + vue-router + vuex 入门项目

8.3K Stars 2.6K Forks Last release: Not found MIT License 100 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

说明

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.