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 相关文章推荐
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
ajax异步请求详解
Jan 06 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
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制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
Python变量和字符串详解
2017/04/29 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
django 模版关闭转义方式
2020/05/14 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
班主任工作经验材料
2014/02/02 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
学校端午节活动方案
2014/08/23 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python