vuejs初上手項目

• 2019 年 12 月 4 日
• 筆記

學習一個框架有兩個階段最難，一個是初期的入門，一個是後期的源碼閱讀。

雖然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')