【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'
  }]
})

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)
        })
      }     
}  

  2)vuex使用

   直接放vuex文档

  3)vux使用

   vux调用示例