Vue+Vux项目实践完整代码

Vue+Vux项目实践完整代码

提供完整的路由，services`````````````

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

index.html

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

main.js

import vue from 'vue'

import Vuex from 'vuex'

import VueRouter from 'vue-router'

import FastClick from 'fastclick'

import {WechatPlugin, AjaxPlugin, LoadingPlugin, ToastPlugin, AlertPlugin} from 'vux'

import App from './app.vue'

/**

* 加载插件

*/

Vue.use(Vuex)

Vue.use(VueRouter)

Vue.use(WechatPlugin)

Vue.use(AjaxPlugin)

Vue.use(LoadingPlugin)

Vue.use(ToastPlugin)

Vue.use(AlertPlugin)

/**

* 定义常量

*/

const domainName = 'localhost:8010'

const serverName = 'localhost:3000'

const apiPrefix = serverName + '/api/outer'

const loginTimeOutErrorCode = 'login_timeout_error'

/**

* 设置vuex

*/

const store = new Vuex.Store({})

store.registerModule('vux', {

state: {

loading: false,

showBack: true,

title: ''

},

mutations: {

updateLoading (state, loading) {

state.loading = loading

},

updateShowBack (state, showBack) {

state.showBack = showBack

},

updateTitle (state, title) {

state.title = title

}

}

})

/**

* 设置路由

*/

const routes = [

// 初始页

{

path: '/',

component: function (resolve) {

require(['./components/init.vue'], resolve)

}

},

// 主页

{

path: '/index',

component: function (resolve) {

require(['./components/index.vue'], resolve)

},

children: [

// 测试页

{

path: 'test',

component: function (resolve) {

require(['./components/tests/page.vue'], resolve)

}

}

]

},

// 绑定页

{

path: '/bind',

component: function (resolve) {

require(['./components/bind.vue'], resolve)

}

}

]

const router = new VueRouter({

routes

})

router.beforeEach(function (to, from, next) {

store.commit('updateLoading', true)

store.commit('updateShowBack', true)

next()

})

router.afterEach(function (to) {

store.commit('updateLoading', false)

})

/**

* 点击延迟

*/

FastClick.attach(document.body)

/**

* 日志输出开关

*/

Vue.config.productionTip = true

/**

* 定义全局公用常量

*/

Vue.prototype.domainName = domainName

Vue.prototype.serverName = serverName

Vue.prototype.apiPrefix = apiPrefix

/**

* 定义全局公用方法

*/

Vue.prototype.http = function (opts) {

let vue = this

vue.$vux.loading.show({

text: 'Loading'

})

vue.$http({

method: opts.method,

url: apiPrefix + opts.url,

headers: opts.headers || {},

params: opts.params || {},

data: opts.data || {}

}).then(function (response) {

vue.$vux.loading.hide()

opts.success(response.data.data)

}).catch(function (error) {

vue.$vux.loading.hide()

if (!opts.error) {

let response = error.response

let errorMessage = '请求失败'

if (response && response.data) {

if (response.data.code === loginTimeOutErrorCode) {

window.location.href = '/'

}

errorMessage = response.data.message

}

vue.$vux.alert.show({

title: '提示',

content: errorMessage

})

} else {

opts.error(error.response.data.data)

}

})

}

Vue.prototype.get = function (opts) {

opts.method = 'get'

this.http(opts)

}

Vue.prototype.post = function (opts) {

opts.method = 'post'

this.http(opts)

}

Vue.prototype.put = function (opts) {

opts.method = 'put'

this.http(opts)

}

Vue.prototype.delete = function (opts) {

opts.method = 'delete'

this.http(opts)

}

Vue.prototype.valid = function (opts) {

let vue = this

let valid = true

if (opts.ref && !opts.ref.valid) {

valid = false

}

if (opts.ignoreRefs) {

let newRefs = []

for (let i in opts.refs) {

let ref = opts.refs[i]

for (let j in opts.ignoreRefs) {

let ignoreRef = opts.ignoreRefs[j]

if (ref !== ignoreRef) {

newRefs.push(ref)

}

}

}

opts.refs = newRefs

}

for (let i in opts.refs) {

if (!opts.refs[i].valid) {

valid = false

break

}

}

if (valid) {

opts.success()

} else if (opts.error) {

opts.error()

} else {

vue.$vux.toast.show({

text: '请检查输入'

})

}

}

Vue.prototype.closeShowBack = function () {

this.$store.commit('updateShowBack', false)

}

Vue.prototype.updateTitle = function (value) {

this.$store.commit('updateTitle', value)

}

/**

* 创建实例

*/

new Vue({

store,

router,

render: h => h(App)

}).$mount('#app-box')

app.vue

components/index.vue

components/tests/page.vue

placeholder {{i}}

components/tests/page.vue代码中的 import Page from '../kits/page.vue'是我自己写的下拉刷新上啦加在的组件，运行的话删掉这些引用就可以了。

本次记录摘要是从刚刚完成的项目中抽离的部分代码（注：本项目实践代码，可运行，可运行，可运行，可运行）

总结

以上所述是给大家介绍的Vue+Vux项目实践完整代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。