vuejs初上手项目

学习一个框架有两个阶段最难,一个是初期的入门,一个是后期的源码阅读。

虽然vue的官方文档非常棒,在我读完文档之后还是会有一种感觉,知识点我都懂,然后呢?似乎大体知道该怎么利用vue全家桶去搭建一个项目,但具体下笔又有点模糊。vue官方的脚手架并没有将vue-router和vuex包括进去,所以我们需要自己去配置它们。虽然找了一堆的demo,但是都没有达到我想要的效果。正好趁着自己接了一个小项目,拿来练手。

这个项目主要的作用是熟悉 vue vue-router vuex 在初期搭建项目的时候该怎么配置,以及怎么去互相配合,xx.vue文件该怎么写,如何创建和使用组件,vuex的state,mutations,actions,getters怎么配合,形成一个完整的流程。

项目并不复杂,所以拿出来分享,希望对大家有帮助

源码地址:https://github.com/bailicangdu/vue2-happyfri

路由配置

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) {
        commit('REMBER_ANSWER', { id })
        if (state.itemNum < state.itemDetail.length) {
            commit('ADD_ITEMNUM', {
                num: 1
            })
        }
    },

    getData({ commit, state }) {
        ajax('GET', 'http://operating-activities.putao.com/happyfriday?active_topic_id=4').
        then(res => {
            commit('GET_DATA', {
                res
            })
        })
    },

    initializeData({ commit }) {
        commit('INITIALIZE_DATA')
    }
}

mutations

const GET_DATA = 'GET_DATA'
const ADD_ITEMNUM = 'ADD_ITEMNUM'
const REMBER_ANSWER = 'REMBER_ANSWER'
const REMBER_TIME = 'REMBER_TIME'
const INITIALIZE_DATA = 'INITIALIZE_DATA'
const GET_USER_INFORM = 'GET_USER_INFORM'

export default {
    [GET_DATA](state, payload) {
        if (payload.res.httpStatusCode == 200) {
            state.itemDetail = payload.res.topiclist;
        }
    },

    [GET_USER_INFORM](state, payload) {
        state.user_id = payload.res.users_id;
    },

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5228
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2787
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

7166
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

5918
来自专栏魂祭心

原 canvas绘制clock

5104
来自专栏杨龙飞前端

scrollto 到指定位置

2944
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4395
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2936
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2782

扫码关注云+社区