【vue】仿追書神器②

項目中使用axios，vuex，vux ( vux文檔) 

   VUX是基於WeUI和Vue(2.x)開發的移動端UI組件庫，主要服務於微信頁面。

1.在項目的根目錄下，經過如下命令對應安裝axios，vuex

   npm install axios --save-dev

   npm install vuex --save  //無需另行安裝，此處在用airyland/vux2初始項目時已添加

 

2.1在 webpack 的入口文件 main.js 中以下配置，以對應註冊axios

    import axios from 'axios'

    Vue.prototype.$http=axios    // 將axios改寫爲Vue的原型屬性

2.2 vuex註冊 （與vue-router的引入方式相相似）

  1)在新建的store文件夾 中新建入口文件 index.js 中以下配置vuex註冊

    import Vue from 'vue';

    import Vuex from 'vuex';

    Vue.use(Vuex );

    完整配置

  2)在webpack的入口文件main.js中 ①引入store；②實例化Vue對象中註冊store對象以便子組件使用

    

2.3  vux搭配

    vux要搭配下列組件在Vue工程中正確使用，在vux文檔手動配置中有簡述

   1)安裝vux-loader（做用：配置vue-loader，配置babel-loader以正確編譯 VUX 的js源碼,此處在用airyland/vux2初始項目時已添加）

  npm install vux-loader --save-dev

   2)安裝less-loader（做用：以正確編譯less源碼，不然會出現 ' Cannot GET / '）

  npm install less less-loader --save-dev

   3)安裝yaml-loader（做用：以正確進行語言文件讀取，此處在用airyland/vux2初始項目時已添加）

  npm install yaml-loader --save-dev

   4)在main.js裏引用fastclick（做用：移除移動端頁面點擊延遲,此處在用airyland/vux2初始項目時已添加）

   5)添加vue-router（不須要可忽略，此處是在項目初始時已添加vue-router）

   6)在build/webpack.base.conf.js文件進行配置 （調用merge方法對原來webpack配置進行操做 ,此處在用airyland/vux2初始項目時已添加-略微不一樣）

     —》

    代碼:

const webpackConfig ={...}   // 原來的 webpack.base.js 配置賦值給變量 webpackConfig

const vuxLoader = require('vux-loader')

module.exports = vuxLoader.merge(webpackConfig, {
  options: {},
  plugins: [{
    name: 'vux-ui'
  }]
})

View Code

3.在組件中使用

  1)axios使用

   在每一個組件的methods中調用$http命令完成數據請求

methods: {
      get(){
        this.$http({
          method:'get',
          url:'/url',
          data:{}
        }).then(function(res){
          console.log(res)
        }).catch(function(err){
          console.log(err)
        })
        
        this.$http.get('/url').then(function(res){
          console.log(res)
        }).catch(function(err){
          console.log(err)
        })
      }     
}  

View Code

  2)vuex使用

   直接放vuex文檔

  3)vux使用

   vux調用示例