学习一个框架有两个阶段最难,一个是初期的入门,一个是后期的源码阅读。
虽然vue的官方文档非常棒,在我读完文档之后还是会有一种感觉,知识点我都懂,然后呢?似乎大体知道该怎么利用vue全家桶去搭建一个项目,但具体下笔又有点模糊。vue官方的脚手架并没有将vue-router和vuex包括进去,所以我们需要自己去配置它们。虽然找了一堆的demo,但是都没有达到我想要的效果。正好趁着自己接了一个小项目,拿来练手。
这个项目主要的作用是熟悉 vue vue-router vuex 在初期搭建项目的时候该怎么配置,以及怎么去互相配合,xx.vue文件该怎么写,如何创建和使用组件,vuex的state,mutations,actions,getters怎么配合,形成一个完整的流程。
项目并不复杂,所以拿出来分享,希望对大家有帮助
源码地址:[url]https://github.com/bailicangdu/vue2-happyfri[/url]
## 路由配置
```js
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
```js
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
```js
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
```js
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实例
```js
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')
```
虽然vue的官方文档非常棒,在我读完文档之后还是会有一种感觉,知识点我都懂,然后呢?似乎大体知道该怎么利用vue全家桶去搭建一个项目,但具体下笔又有点模糊。vue官方的脚手架并没有将vue-router和vuex包括进去,所以我们需要自己去配置它们。虽然找了一堆的demo,但是都没有达到我想要的效果。正好趁着自己接了一个小项目,拿来练手。
这个项目主要的作用是熟悉 vue vue-router vuex 在初期搭建项目的时候该怎么配置,以及怎么去互相配合,xx.vue文件该怎么写,如何创建和使用组件,vuex的state,mutations,actions,getters怎么配合,形成一个完整的流程。
项目并不复杂,所以拿出来分享,希望对大家有帮助
源码地址:[url]https://github.com/bailicangdu/vue2-happyfri[/url]
## 路由配置
```js
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
```js
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
```js
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
```js
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实例
```js
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')
```