vue-cli雖然強(qiáng)大匠楚，但是它有很多個(gè)步驟要我們?nèi)ミx擇配置良哲，而實(shí)際上公司業(yè)務(wù)很多配置是固定的，比如要安裝vue-router系任、規(guī)定了必須使用sass恳蹲，這樣在vue-cli配置完成后還必須要npm install node-sass和sass-loader，還有axios等也是一定要安裝的俩滥。所以不應(yīng)該每次新建一個(gè)項(xiàng)目都去一步步選擇vue-cli的那些配置然后還要去安裝sass等嘉蕾，應(yīng)該在vue-cli基礎(chǔ)上根據(jù)公司自身的情況打造團(tuán)隊(duì)的腳手架，只需運(yùn)行腳手架霜旧，就可以初始化整個(gè)項(xiàng)目错忱。
GitHub地址是：vue-cli整合vux，打造webapp的項(xiàng)目腳手架
技術(shù)棧
Vue.js : 前端頁面展示
Vuex : 全局狀態(tài)通信
axios：網(wǎng)絡(luò)請(qǐng)求
Vue-router：路由跳轉(zhuǎn),實(shí)現(xiàn)單頁的核心
Vux：移動(dòng)端UI組件庫
fastclick：去除點(diǎn)擊延時(shí)
vue-scroller：刷新組件
reset.css：初始化瀏覽器樣式
flexible.js：移動(dòng)端rem布局
打造目錄結(jié)構(gòu)
1.通過vue-cli挂据，初始化vue項(xiàng)目
可以參考我的上一篇文章vue-cli入門（一）-使用vue-cli搭建項(xiàng)目
其中以清，src是項(xiàng)目文件存放目錄，src/assets和static/是兩個(gè)存放靜態(tài)資源的目錄崎逃，之間的區(qū)別是：static目錄中的靜態(tài)資源不會(huì)被webpack處理掷倔，這里適合放一些外部不需要webpack處理的資源，build后的靜態(tài)資源都會(huì)被放進(jìn)這個(gè)目錄个绍。
2.配置Vuex
在src目錄中勒葱，新建一個(gè)store目錄，用于存放全局狀態(tài)巴柿，可以參考文章vue進(jìn)階 - vuex安裝及使用
3.配置Vue-router
通過vue-cli凛虽，初始化vue項(xiàng)目，默認(rèn)是安裝了Vue-router广恢，我們不需要在另外安裝涩维，使用可以參考我的另一篇文章vue進(jìn)階 - vue-router安裝及使用
4.配置axios
可以參考我的另一篇文章vue進(jìn)階 - axios安裝及使用
5.配置Vux
官方地址查看官網(wǎng)的安裝使用說明，
直接安裝或者更新：
npm install vux --save
安裝vux-loader
npm install vux-loader --save-dev
安裝less-loader以正確編譯less源碼
npm install less-loader --save-dev
vux2必須配合vux-loader使用, 請(qǐng)?jiān)赽uild/webpack.base.conf.js里參照如下代碼進(jìn)行配置：
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原來的 module.exports 代碼賦值給變量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
6.安裝sass
安裝node-sass和sass-loader
npm install node-sass --save-dev
npm install sass-loader --save-dev
vue-cli生成的項(xiàng)目袁波，已經(jīng)默認(rèn)加入了處理sass的loader，只需要這樣即可
<style lang="scss" scope>
</style>
7.添加Fastclick移除移動(dòng)端點(diǎn)擊延遲
安裝fastclick
npm install fastclick --save
在main.js中引用
import FastClick from 'fastclick'
FastClick.attach(document.body)
8.安裝vue-scroller
安裝
cnpm install vue-scroller -S
使用,在main.js中引用
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
使用方法可以參考vue-scroller
9.初始化瀏覽器樣式
下載地址：cssreset
10.移動(dòng)端rem布局
移動(dòng)端rem布局方案：flexible.js
使用參考資料：使用Flexible實(shí)現(xiàn)手淘H5頁面的終端適配
安裝 lib-flexible蜗侈，完成后在 main.js 中引入
npm i lib-flexible --save
// main.js
import 'lib-flexible/flexible';
使用postcss-pxtorem自動(dòng)轉(zhuǎn)換rem（不推薦使用篷牌，發(fā)現(xiàn)不會(huì)轉(zhuǎn)化vux框架里面的px）
1.安裝 postcss-pxtorem
npm install postcss-pxtorem -D
2.在.postcssrc.js中做如下配置
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, //換算基數(shù)(根據(jù)html的字體大小）
unitPrecision: 3, //計(jì)算后的最小精度值踏幻，默認(rèn)保留5位
propList: ["*",'!font*'], //設(shè)置哪些屬性可以px轉(zhuǎn)換rem, !不匹配屬性（這里是字體相關(guān)屬性不轉(zhuǎn)換）
selectorBlackList: [], //過濾枷颊，給定哪些選擇器不轉(zhuǎn)換rem，保留px
replace: true,
mediaQuery: false, //Boolen類型该面，是否允許在媒體查詢中轉(zhuǎn)換px
minPixelValue: 2 // 替換的最小像素值
}
}
}
或者用px2rem-loader夭苗，配置方法自行百度。
fastclick與ios11.3相關(guān)bug原因分析
問題1：在ios 11.3移動(dòng)端頁面 input輸入框第一次觸摸可以彈起鍵盤隔缀，后續(xù)再觸摸需要很難彈起鍵盤题造，或者需要在輸入框停一會(huì)才能彈起鍵盤。
解決方法：
Issues中給出的修復(fù)方法是強(qiáng)制元素focus猾瘸，即在改寫的focus響應(yīng)函數(shù)中直接觸發(fā)元素的focus事件：
方法一：修改源代碼：
if(deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
length = targetElement.value.length;
targetElement.focus();
targetElement.setSelectionRange(length, length);
} else {
targetElement.focus();
}
方法二：修改原型方法
FastClick.prototype.focus = function(targetElement) {
targetElement.focus();
};
問題2：當(dāng)app或鎖屏超過幾分鐘時(shí)間界赔，回到頁面會(huì)導(dǎo)致click事件失效丢习。
解決方法：
github有相關(guān)的解決代碼，下載替換原文件
地址一
地址二
我本人也上傳了一個(gè)版本淮悼，同時(shí)解決了問題1,2
gitgub地址
參考文獻(xiàn)：
fastclick解析與ios11.3相關(guān)bug原因分析
iOS11.3 fastclick.js相關(guān)bug
fastclick
