vue2 + router + vuex + vux + axios 开发的一点总计

建议一般单页面应用架构模式：vue2 + router + vuex + vux + axios

 

其中涉及很多npm的安装可以百度一下

 

路由配置

 

 

vuex ，小项目可以放弃模块store，模块store有命名空间的概念

 

 

main.js

 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from './store/index'
import router from './router'
import  {AlertPlugin, LoadingPlugin, Confirm} from 'vux'

Vue.use(AlertPlugin)
Vue.use(LoadingPlugin)
Vue.use(Confirm)

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  created: function () {
    var docEl = document.documentElement
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
    // 判断是否在安卓和ios运行
    var u = navigator.userAgent
    if (!(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1)) {
      if (!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        docEl.style.fontSize = 40 + 'px'
      }
    }
  },
  // template: '<App/>',
  // components: { App },
  render: h => h(App)
})

 

 

 

config文件夹 注意是公共配置文件 可以注入vuex全局使用，模块的小项目直接data（）使用就够

 

工具文件夹

 

 

notice.js封装vux 弹窗

 

import Vue from 'vue'

const notify = {
  alert: (title = '提示', content, showFn, hideFn) => {
    return Vue.$vux.alert.show({
      title: title,
      content: content,
      onShow () {
        if (typeof showFn === 'function') {
          showFn ()
        }
      },
      onHide () {
        if (typeof hideFn === 'function') {
          hideFn ()
        }
      }
    })
  },
  loading: (text = 'Loading') => {
    return Vue.$vux.loading.show({
      text: text
    })
  },
  cloLoading: () => {
    Vue.$vux.loading.hide()
  }
}

export default notify;

 

 

 

request.js封装axios的ajax请求

 

import axios from 'axios'
import qs from 'qs'
import config from '../config/config'
// import util from './util'

axios.interceptors.request.use(config => {
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
})

export default {
  post (method, data = {}) {
    data.buId = '00000000-0000-0000-0000-000000000000'
    data.operatorId = '398c2e79-8816-4ef5-891c-b2ae2a8bd904'
    data.token = '00000000-0000-0000-0000-000000000000'
    data.method = method
    return axios({
      method: 'post',
      url: config.getHost() + config.getApi(),
      data: qs.stringify(data),
      timeout: 5000,
      headers: {
        // 'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then((response) => {
      // util.consoleGroup(method, [response.data])
      return response.data
    }).then((res) => {
      return res
    }).catch((res) => {
      console.log(res)
    })
  },
  get (method, params = {}) {
    params.method = method
    return axios({
      method: 'get',
      url: config.getApi(),
      // get 请求时带的参数
      params,
      timeout: 5000,
      headers: {
        // 'X-Requested-With': 'XMLHttpRequest'
      }
    }).then((response) => {
      // util.consoleGroup(method, [response.data])
      return response.data
    }).then((res) => {
      return res
    }).catch((res) => {
      console.log(res)
    })
  },
  all (req) {
    return axios.all(req)
    .then((response) => {
      console.log(response)
    }).then((res) => {
      console.log(res)
    })
  }
}

 

 

 

util.js 公共处理函数封装

 

掉过的坑：

图片的引入问题，template子件文件直接因为文件会报路径错误，可以写在data () 用request引入，我写在less单独文件中不出现这个问题

打包发布问题，打包后index.html引入报错问题，在webpack.prod.conf.js 文件找到output

属性增加

publicPath: './'