商城分析

入口程序分析main.js  

require('es6-promise').polyfill()       
import Vue from 'vue'
import App from './App'
import router from './router'
import 'babel-polyfill'
import '@/plugins/flexible'
import MintUI from 'mint-ui'
import store from '@/store'
import FastClick from 'fastclick'
import '@/utils/directives'
import '@/utils/filters'
import VeeValidate from 'vee-validate';
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

Vue.use(MintUI)
Vue.use(VeeValidate);
router.beforeEach((to,from,next)=>{
    next();
});
Vue.config.productionTip = false;

/* fundebug */
function formatComponentName(vm)
{
  if (vm.$root === vm) return 'root';

  const name = vm._isVue ? (vm.$options && vm.$options.name) || (vm.$options && vm.$options._componentTag) : vm.name;
  return (name ? 'component <' + name + '>' : 'anonymous component') + (vm._isVue && vm.$options && vm.$options.__file ? ' at ' + (vm.$options && vm.$options.__file) : '');
}

Vue.config.errorHandler = function(err, vm, info)
{
  const componentName = formatComponentName(vm);
  const propsData = vm.$options && vm.$options.propsData;

  fundebug.notifyError(err,
  {
      metaData:
      {
          componentName: componentName,
          propsData: propsData,
          info: info
      }
   });
};


/* eslint-disable no-new */
Vue.prototype.errorEvent = e => { e.target.src = './assets/images/logo.png' };
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
});

首先是Babel转码器支持，因为使用了很多ES6语法，为了使代码在各类浏览器运行时没有问题，需要引入Babel。

其次引入Mint-UI组件库，引入表单以及域校验组件VeeValidate，还有避免点击延时的 fastclick组件，以及登陆不同终端适配的fexible.js

HTTP请求封装：

1、科普 Promise，解决Node服务端的 有序异步调用，参见这里 通过链式调用解决了生产线上工序间的前后依赖问题。

2、Axios 和Promise结合完美解决，Node的服务器请求问题。(Axios中文)

utils:依赖axios，es6-promise, main.js依赖mint-ui, vee-validate, fastclick