// 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，不使用高清方案
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
实现真机热调试
手机电脑链接到同一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
<style lang="less">
@import '~vux/src/styles/reset.less';
</style>
