Vue+Vux專案實踐

阿新 • • 發佈：2019-01-12

利用腳手架搭建專案架構，此步驟不予此地說明，不明之處可上git、百度或者留言。

本專案實踐程式碼，均可執行。

程式碼尚未優化，大牛請繞路。

提供完整的路由，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專案實踐

利用腳手架搭建專案架構，此步驟不予此地說明，不明之處可上git、百度或者留言。本專案實踐程式碼，均可執行。程式碼尚未優化，大牛請繞路。提供完整的路由，services````````````` -------------------------------

Vue + webpack 專案實踐

Vue.js 是一款極簡的 mvvm 框架，如果讓我用一個詞來形容它，就是 “輕·巧” 。如果用一句話來描述它，它能夠集眾多優秀逐流的前端框架之大成，但同時保持簡單易用。廢話不多說，來看幾個例子： <script src="vue.js"></script&g

webpack+vue+bootstrap專案實踐

這幾天進行了一個後臺管理系統的專案開發，協助工具使用了svn(也用了git來安裝bower），在基於node平臺搭建的webpack的開發環境下，根據後臺提供的API，利用bootstrap

vue專案實踐教程2：使用vux設計登入註冊，並講解vue路由，切換頁面標題等內容

上一章筆者介紹vux專案的搭建和簡介，這裡筆者設計幾個登入註冊頁面，來講解vux中的相關元件的使用，和vue的相關基礎知識。 1.我們在與components資料夾同級的目錄下建立一個views資料夾，資料夾中再建立一個user資料夾，用於存放和使用者相關的頁

vue專案實踐教程1：vux專案搭建和簡介

vue作為比較受歡迎的前端開發框架之一，因為其優雅的程式碼結構，輕量化程式碼設計，簡介易懂的API,靈活易用的指令和屬性廣受前端開發者的喜愛，其學習成本和學習難度相對react來說要簡單很多。這裡，筆者以一個小專案為例，向大家介紹vue的使用和開發。在瞭

vue專案實踐004~~~一籃子的實踐技巧

前言繼續總結vue專案實踐中的優化和思考，實踐系列004，請持續關注不要掉隊哦實踐問題批量物件屬性賦值使用場景：主要是針對需要把物件的一些屬性批量的賦值到另外一個物件上，然後如果你的屬性很多可能要寫很多賦值語句。（前提是屬性名一般是相同的）說明：可能有人會問為什麼不直接用這個物件，答

Vue框架—專案部署與實踐

環境配置首先安裝 node.js 去官網安裝 LTS 下的指定版本。檢視是否安裝Node.js 安裝成功，開啟cmd黑視窗，輸入node -v 輸出了版本號說明成功了。輸入npm -v 檢視是否有版本號。使用碼雲：來儲

Vue +vux 搭建移動端專案

一、使用 vue-cli 搭建Vux專案模板 1、全域性安裝 vue-cli npm install --global vue-cli 2、建立一個基於 webpack 模板的新專案 vue init

深入解析Vue.js專案API、Router配置拆分實踐

前後端分離開發方式前端擁有更高的控制權隨著前端框架技術的飛速發展，Router這個概念也被迅速普及到前端專案中，在早期前後的沒有分離的時期下，並沒有明確的路由概念，前端頁面跳轉大多是通過後端進行請求轉發的，比如在Spring MVC專案中，進行一個頁面跳轉如下（畫紅線部分）：

jQuery轉Vue專案實踐總結

工作需要，將公司專案從jQuery轉成Vue來寫。這裡分享下轉變專案的過程並寫了一個小demo，希望能對遇到同樣問題的朋友一些幫助。 PS：本人Android開發，兼職前端，前端知識淺薄，有什麼不對的地方還請指出，大家共同進步。謝謝~ jQue

vue分頁元件專案實踐

最近開發後臺專案需要寫一個vue的分頁元件，所以把寫好的元件分享到這個上面加深一下印象：看了下寫的還是比較多的最開始是父子元件之間的通訊。父元件container裡面的內容 <template> //

vue+vux+axios+vuex+vue-router的專案的理解

　　本文主要是講解專案前期的工作，後期考慮再詳細說明。　　作為一個技術團隊如果你們團隊選擇了上面的技術棧，這說明你們的技術團體對於vue有很熟練的掌握了。在這裡我想說明的是前期架構的重要。這裡有一遍部落格寫的很不錯，點選這裡,主要是講解如何高效的開發一個專案。　　如果你選擇了以上的vue技術棧，那麼你在前

VUE+TS+WEBPACK框架的專案實踐

一、作者簡介 WONDER專注於框架的研究，致力於提升效能，解放生產力。包括但不限於設計流程化，重構流程化，前端流程化，基於資料流、狀態流的自動化測試。致力於基於javascript語言的全平臺解決方案的研究（包括前端(vue為核心)，後端(thinkjs為核

vue專案實踐（vuex + vue-router + vue-resource）

https://segmentfault.com/a/1190000006747096?utm_source=tuicool&utm_medium=referral 初次接觸vue，刷完了堪稱經典的vue官網文件+vue-router文件+vuex文件+vue-c

Vue 小專案的最佳實踐

本專案實現的功能有：根據分享出來的文章ID獲取資料。在網頁內可以開啟或者下載該APP。微信平臺的特殊處理。微信平臺的遮蔽了scheme,文章頁面的開啟APP的功能需要出浮窗提示去瀏覽器中開啟。下載APP頁面在微信中，IOS可以喚起APP Store,安卓

Vue.js 開發實踐：實現精巧的無限加載與分頁功能

cti head 設定命令 webpack transform style time default https://segmentfault.com/a/1190000005351971#articleHeader9 本篇文章是一篇Vue.js的教程，目標在於用一

laravel5.4+vue+vux+element的環境搭配

sass save outer 文件保存 4.0 end pan 部分最近因為項目的需要，需要搭配一個這樣的環境。之前做過的東西沒有這樣用過，在網上找了半天不是過於簡單就是根本行不通，自己踩了半天的坑，終於搭配成功。首先下載laravel5.4,直接去官網一鍵安裝包或

vue+vux+webpack快速構建

lock init node nbsp install class pan project color 在這之前，你需要確定已經具備環境：node.js；vue.js；vue.cli；webpack；一、構建vux # install vue-cli npm

vue+vux 仿飛豬app火車票部分（五）---城市列表保存到MongoDB數據庫並且啟用node.js服務

export ror sco stat mongodb require pre nec 問題把車站列表保存到數據庫，並且從本地創建服務 node.js創建httpserver 1.搭建基於express的運行環境全局安裝express-gengerator

vue項目實踐-添加axios封裝api請求

.proto promise ret .data post ios 接口 debug 請求安裝 axios npm install axios --save 創建實例 (utils/fetch.js) axios 默認提交格式為：application/json 可使用

Vue+Vux專案實踐

相關推薦