找回密码
当前位置：前端开发者 > Vue.js > 正文

Vue.js 2.0前端开发 的初上手项目

2018-05-26 分类：Vue.js 阅读(849) 评论(0)

vue.js 2.0前端开发|前端开发者

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

vue的官方文档非常棒，在读完文档之后还是会有一种感觉，知识点都懂，然后呢？似乎大体知道该怎么利用vue全家桶去搭建一个项目，但具体下笔又有点模糊。

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

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

路由配置

javascript 代码

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

javascript 代码

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

javascript 代码

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

javascript 代码

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实例

javascript 代码

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.js 2.0前端开发|web前端开发
https://www.rokub.com
赞(0)
前端开发者 » Vue.js 2.0前端开发 的初上手项目
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论