recherche

Maison  >  Article  >  interface Web  >  Tutoriel complet de code pour la pratique du projet Vue+Vux

Tutoriel complet de code pour la pratique du projet Vue+Vux

小云云
小云云original
2018-05-19 10:26:186707parcourir

Cet article partagera avec vous un code détaillé pour présenter les idées pratiques du projet Vue+Vux. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Fournir un routage complet, des 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>
  <p id="app-box"></p>
  <!-- built files will be auto injected -->
 </body>
</html>

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

main.js

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;
import VueRouter from &#39;vue-router&#39;
import FastClick from &#39;fastclick&#39;
import {WechatPlugin, AjaxPlugin, LoadingPlugin, ToastPlugin, AlertPlugin} from &#39;vux&#39;
import App from &#39;./app.vue&#39;
/**
 * 加载插件
 */
Vue.use(Vuex)
Vue.use(VueRouter)
Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)
Vue.use(LoadingPlugin)
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)
/**
 * 定义常量
 */
const domainName = &#39;localhost:8010&#39;
const serverName = &#39;localhost:3000&#39;
const apiPrefix = serverName + &#39;/api/outer&#39;
const loginTimeOutErrorCode = &#39;login_timeout_error&#39;
/**
 * 设置vuex
 */
const store = new Vuex.Store({})
store.registerModule(&#39;vux&#39;, {
 state: {
  loading: false,
  showBack: true,
  title: &#39;&#39;
 },
 mutations: {
  updateLoading (state, loading) {
   state.loading = loading
  },
  updateShowBack (state, showBack) {
   state.showBack = showBack
  },
  updateTitle (state, title) {
   state.title = title
  }
 }
})
/**
 * 设置路由
 */
const routes = [
 // 初始页
 {
  path: &#39;/&#39;,
  component: function (resolve) {
   require([&#39;./components/init.vue&#39;], resolve)
  }
 },
 // 主页
 {
  path: &#39;/index&#39;,
  component: function (resolve) {
   require([&#39;./components/index.vue&#39;], resolve)
  },
  children: [
   // 测试页
   {
    path: &#39;test&#39;,
    component: function (resolve) {
     require([&#39;./components/tests/page.vue&#39;], resolve)
    }
   }
  ]
 },
 // 绑定页
 {
  path: &#39;/bind&#39;,
  component: function (resolve) {
   require([&#39;./components/bind.vue&#39;], resolve)
  }
 }
]
const router = new VueRouter({
 routes
})
router.beforeEach(function (to, from, next) {
 store.commit(&#39;updateLoading&#39;, true)
 store.commit(&#39;updateShowBack&#39;, true)
 next()
})
router.afterEach(function (to) {
 store.commit(&#39;updateLoading&#39;, 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: &#39;Loading&#39;
 })
 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 = &#39;请求失败&#39;
   if (response && response.data) {
    if (response.data.code === loginTimeOutErrorCode) {
     window.location.href = &#39;/&#39;
    }
    errorMessage = response.data.message
   }
   vue.$vux.alert.show({
    title: &#39;提示&#39;,
    content: errorMessage
   })
  } else {
   opts.error(error.response.data.data)
  }
 })
}
Vue.prototype.get = function (opts) {
 opts.method = &#39;get&#39;
 this.http(opts)
}
Vue.prototype.post = function (opts) {
 opts.method = &#39;post&#39;
 this.http(opts)
}
Vue.prototype.put = function (opts) {
 opts.method = &#39;put&#39;
 this.http(opts)
}
Vue.prototype.delete = function (opts) {
 opts.method = &#39;delete&#39;
 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: &#39;请检查输入&#39;
  })
 }
}
Vue.prototype.closeShowBack = function () {
 this.$store.commit(&#39;updateShowBack&#39;, false)
}
Vue.prototype.updateTitle = function (value) {
 this.$store.commit(&#39;updateTitle&#39;, value)
}
/**
 * 创建实例
 */
new Vue({
 store,
 router,
 render: h => h(App)
}).$mount(&#39;#app-box&#39;)
app.vue
<template>
 <p id="app">
  <loading v-model="isLoading"></loading>
  <transition>
   <router-view></router-view>
  </transition>
 </p>
</template>
<script>
 import {Loading} from &#39;vux&#39;
 import {mapState} from &#39;vuex&#39;
 export default {
  name: &#39;app&#39;,
  components: {
   Loading
  },
  computed: {
   ...mapState({
    isLoading: state => state.vux.isLoading
   })
  }
 }
</script>
<style lang="less">
 @import &#39;~vux/src/styles/reset.less&#39;;
 body {
  background-color: #fbf9fe;
 }
</style>
components/index.vue
<template>
 <p style="height:100%;">
  <top style="margin-bottom:46px"></top>
  <transition>
   <router-view></router-view>
  </transition>
  <bottom></bottom>
 </p>
</template>
<script>
 import Top from &#39;./layouts/top.vue&#39;
 import Bottom from &#39;./layouts/bottom.vue&#39;
 export default {
  components: {
   Top,
   Bottom
  }
 }
</script>
<style>
 html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
 }
</style>
components/tests/page.vue
<template>
 <p>
  <page @loadMore="loadMore" @refresh="refresh">
   <p>
    <p v-for="i in n">placeholder {{i}}</p>
   </p>
  </page>
 </p>
</template>
<script>
 import Page from &#39;../kits/page.vue&#39;
 import {cookie} from &#39;vux&#39;
 export default {
  components: {
   Page
  },
  created () {
   let vue = this
   vue.closeShowBack()
   vue.updateTitle(&#39;测试页面&#39;),
   //获取常量
    console.log(0)
   vue.get({
    url: &#39;/test/constants&#39;,
    headers: {
     &#39;token&#39;: cookie.get(&#39;token&#39;)
    },
    success: function (data) {
     cookie.set(&#39;constants&#39;,JSON.stringify(data),{
      expires: 1
     })
    }
   })
  },
  data () {
   return {
    n: 10,
   }
  },
  methods: {
   loadMore () {
    this.n += 10
   },
   refresh () {
    this.n = 10
   },
  }
 }
</script>

La page d'importation depuis '../kits/page.vue' dans le code composants/tests/page.vue est un pull- down rafraîchissement écrit par moi Composants ajoutés, supprimez simplement ces références lors de l'exécution.

Ce résumé d'enregistrement fait partie du code extrait du projet qui vient de se terminer (Remarque : le code pratique de ce projet est exécutable, exécutable, exécutable, exécutable)

Recommandations associées :

Comment utiliser les propriétés calculées dans vue

Le implémentation spécifique du chargement à la demande de Vue

Explication détaillée de la méthode de code de vue pour ajouter vux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la méthode d'ajout de code vux de vueArticle suivant：Explication détaillée de la méthode d'ajout de code vux de vue

Articles Liés

Voir plus