Vue+Vux项目实践完整代码


Posted in Javascript onNovember 30, 2017

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

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

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>insurance-weixin</title>
 </head>
 <body>
  <div id="app-box"></div>
  <!-- built files will be auto injected -->
 </body>
</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
<template>
 <div id="app">
  <loading v-model="isLoading"></loading>
  <transition>
   <router-view></router-view>
  </transition>
 </div>
</template>
<script>
 import {Loading} from 'vux'
 import {mapState} from 'vuex'
 export default {
  name: 'app',
  components: {
   Loading
  },
  computed: {
   ...mapState({
    isLoading: state => state.vux.isLoading
   })
  }
 }
</script>
<style lang="less">
 @import '~vux/src/styles/reset.less';
 body {
  background-color: #fbf9fe;
 }
</style>
components/index.vue
<template>
 <div style="height:100%;">
  <top style="margin-bottom:46px"></top>
  <transition>
   <router-view></router-view>
  </transition>
  <bottom></bottom>
 </div>
</template>
<script>
 import Top from './layouts/top.vue'
 import Bottom from './layouts/bottom.vue'
 export default {
  components: {
   Top,
   Bottom
  }
 }
</script>
<style>
 html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
 }
</style>
components/tests/page.vue
<template>
 <div>
  <page @loadMore="loadMore" @refresh="refresh">
   <div>
    <p v-for="i in n">placeholder {{i}}</p>
   </div>
  </page>
 </div>
</template>
<script>
 import Page from '../kits/page.vue'
 import {cookie} from 'vux'
 export default {
  components: {
   Page
  },
  created () {
   let vue = this
   vue.closeShowBack()
   vue.updateTitle('测试页面'),
   //获取常量
    console.log(0)
   vue.get({
    url: '/test/constants',
    headers: {
     'token': cookie.get('token')
    },
    success: function (data) {
     cookie.set('constants',JSON.stringify(data),{
      expires: 1
     })
    }
   })
  },
  data () {
   return {
    n: 10,
   }
  },
  methods: {
   loadMore () {
    this.n += 10
   },
   refresh () {
    this.n = 10
   },
  }
 }
</script>

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

本次记录摘要是从刚刚完成的项目中抽离的部分代码(注:本项目实践代码,可运行,可运行,可运行,可运行)

Vue+Vux项目实践完整代码Vue+Vux项目实践完整代码Vue+Vux项目实践完整代码

Vue+Vux项目实践完整代码

总结

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

Javascript 相关文章推荐
学习并汇集javascript匿名函数
Nov 25 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
基本DOM节点操作
Jan 17 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
vue+element实现表单校验功能
May 20 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Bootstrap Table 搜索框和查询功能
Nov 30 #Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 #Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 #Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 #Javascript
微信小程序支付及退款流程详解
Nov 30 #Javascript
windows下更新npm和node的方法
Nov 30 #Javascript
实例教学如何写vue插件
Nov 30 #Javascript
You might like
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
浅谈Python的异常处理
2016/06/19 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python实现大量图片重命名
2020/03/23 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
利用python实现逐步回归
2020/02/24 Python
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
大学军训感言
2014/01/10 职场文书
课外活动总结范文
2014/07/09 职场文书
法人授权委托书
2014/09/16 职场文书
2014年依法行政工作总结
2014/11/19 职场文书