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 条评论
登录 后参与评论

相关文章

来自专栏AI研习社

十分钟搞定 Tensorflow 服务

Tensorflow 服务是谷歌推荐用来部署 Tensorflow 模型的方法。如果你不具备一定的计算机工程知识背景,即使你对 Tensorflow 本身感觉很...

3866
来自专栏Bingo的深度学习杂货店

Q171 Excel Sheet Column Number

Related to question Excel Sheet Column Title Given a column title as appear in a...

3225
来自专栏中国白客联盟

识别验证码继续爆破后台(三)

有的时候,并不是说所有验证码用api或者tesseract都可以正确识别出来的,还是需要经过相关训练,让tesseract知道你想让它识别出来的验证码。

934
来自专栏用户2442861的专栏

Caffe学习系列(12):训练和测试自己的图片

学习caffe的目的,不是简单的做几个练习,最终还是要用到自己的实际项目或科研中。因此,本文介绍一下,从自己的原始图片到lmdb数据,再到训练和测试模型的整个...

661
来自专栏AI研习社

一个应用于物体识别的迁移学习工具链

迁移学习指的是,通过对预训练模型的参数进行微调,将训练好的模型应用到相似或者只有细微差异的不同任务中。通过这个方法,我们可以基于一些性能顶尖的深度学习模型得到别...

822
来自专栏ATYUN订阅号

【框架】为降低机器学习开发者门槛,苹果发布了Turi Create框架

近日,苹果在GitHub上发布了Turi Create框架。苹果表示,这个框架旨在通过简化机器学习模型的开发,降低开发者构建模型的门槛。详细说明如下: Turi...

3416
来自专栏杨建荣的学习笔记

关于导入导出sequence(r4笔记第11天)

sequence在平时的工作中是一个默默无闻的角色。可能创建好之后很少会去修改它,它就在默默地自增长。直到一些特殊的原因导致sequence出现问题,比如提供了...

2615
来自专栏梦里茶室

毫秒级检测!你见过带GPU的树莓派吗?

树莓派3B+英特尔神经计算棒进行高速目标检测 转载请注明作者梦里茶 ? 代码: 训练数据预处理: https://gist.github.com/ahan...

2.3K7
来自专栏专知

【下载】苹果发布Turi Create机器学习框架,5行代码开发图像识别

【导读】苹果公司在GitHub 上分享了一个机器学习框架TuriCreate。 这一框架有可视化界面,非常简单易用,可以让开发者更容易构建机器学习模型,甚至可以...

2778
来自专栏分子生物和分子模拟计算

构象搜索案例(Hyperchem)

1934

扫码关注云+社区