支持ajax的移动webui,Vue移动端项目配合第三方ui库快速搭建开发环境

// 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

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像素的设计标准，如果设计图为750则要自己除以二处理一下，这个适配第三方的方式有很多种，如果有好的建议可以联系我一起探讨哈

}

}

// 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，不使用高清方案

实现真机热调试

手机电脑链接到同一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"

},

cnpm install vuex -S

cnpm install axios --save

// mian.js

import axios from 'axios'

Vue.prototype.$axios = axios // 挂载到Vue原型链上

cnpm install stylus --save-dev

cnpm install stylus-loader --save-dev

样式重置 reset.less

// app.vue

@import '~vux/src/styles/reset.less';