// copy

cnpm install --save es6-promise

cnpm install --save babel-polyfill

cnpm install fastclick -S

cnpm i lib-flexible -S

cnpm install px2rem-loader -S-d

cnpm install vuex -S

cnpm install axios --save

cnpm install stylus --save-dev

cnpm install stylus-loader --save-dev

使用vux模板
vux快速開始

vue init airyland/vux2 demo

兼容不支持promise的瀏覽器 (兩種方法)
es6-promise

cnpm install --save es6-promise
require('es6-promise').polyfill() // main.js

babel-polyfill

cnpm install --save babel-polyfill
import "babel-polyfill" // main.js

使用vux axios封裝AjaxPlugin

// app.vue
import { AjaxPlugin } from 'vux'
Vue.use(AjaxPlugin)

使用方式

// 全局中使用
Vue.http.post('/api').then()
// 組件中使用
export default {
  created () {
    this.$http.post('/api').then(({data}) => {
      console.log(data)
    })
  }
}

FastClick (vux中已處理)

cnpm install fastclick -S
const FastClick = require('fastclick') // main.js
FastClick.attach(document.body)

lib-flexible
手淘移動端rem適配方案配合第三方ui庫

cnpm i lib-flexible -S
cnpm install px2rem-loader -S-d
// main.js
import 'lib-flexible'

• px2rem-loader配置

// build/utils.js
  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

// one
  var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5  // 很多第三方庫采用的是375像素的設(shè)計標(biāo)準(zhǔn)，如果設(shè)計圖為750則要自己除以二處理一下，這個適配第三方的方式有很多種牺六，如果有好的建議可以聯(lián)系我一起探討哈
    }
  }
// end one
  // generate loader string to be used with extract text plugin
  // two => 添加 px2remLoader 到配置項
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
// ...

• index.html適配處理項

// 手動配置viewport，不使用高清方案
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

實現(xiàn)真機熱調(diào)試

手機電腦鏈接到同一wifi下豌鸡，修改page.json文件添加 --host 0.0.0.0炭剪，
使用win+r打開命令行ipconfig查看本機ip每币，手機使用IP:8080訪問即可
  "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

vuex

cnpm install vuex -S

axios

cnpm install axios --save
// mian.js
import axios from 'axios'
Vue.prototype.$axios = axios  // 掛載到Vue原型鏈上

stylus

cnpm install stylus --save-dev
cnpm install stylus-loader --save-dev

樣式重置 reset.less

// app.vue
<style lang="less">
@import '~vux/src/styles/reset.less';
</style>