vue-cli雖然強大，但是它有很多個步驟要我們去選擇配置，而實際上公司業務很多配置是固定的，比如要安裝vue-router、規定了必須使用sass，這樣在vue-cli配置完成后還必須要npm install node-sass和sass-loader，還有axios等也是一定要安裝的。所以不應該每次新建一個項目都去一步步選擇vue-cli的那些配置然后還要去安裝sass等，應該在vue-cli基礎上根據公司自身的情況打造團隊的腳手架，只需運行腳手架，就可以初始化整個項目。
GitHub地址是：vue-cli整合vux，打造webapp的項目腳手架
技術棧
Vue.js : 前端頁面展示
Vuex : 全局狀態通信
axios：網絡請求
Vue-router：路由跳轉,實現單頁的核心
Vux：移動端UI組件庫
fastclick：去除點擊延時
vue-scroller：刷新組件
reset.css：初始化瀏覽器樣式
flexible.js：移動端rem布局
打造目錄結構
1.通過vue-cli，初始化vue項目
可以參考我的上一篇文章vue-cli入門（一）-使用vue-cli搭建項目
其中，src是項目文件存放目錄，src/assets和static/是兩個存放靜態資源的目錄，之間的區別是：static目錄中的靜態資源不會被webpack處理，這里適合放一些外部不需要webpack處理的資源，build后的靜態資源都會被放進這個目錄。
2.配置Vuex
在src目錄中，新建一個store目錄，用于存放全局狀態，可以參考文章vue進階 - vuex安裝及使用
3.配置Vue-router
通過vue-cli，初始化vue項目，默認是安裝了Vue-router，我們不需要在另外安裝，使用可以參考我的另一篇文章vue進階 - vue-router安裝及使用
4.配置axios
可以參考我的另一篇文章vue進階 - axios安裝及使用
5.配置Vux
官方地址查看官網的安裝使用說明，
直接安裝或者更新：
npm install vux --save
安裝vux-loader
npm install vux-loader --save-dev
安裝less-loader以正確編譯less源碼
npm install less-loader --save-dev
vux2必須配合vux-loader使用, 請在build/webpack.base.conf.js里參照如下代碼進行配置：
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生成的項目，已經默認加入了處理sass的loader，只需要這樣即可
<style lang="scss" scope>
</style>
7.添加Fastclick移除移動端點擊延遲
安裝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.移動端rem布局
移動端rem布局方案：flexible.js
使用參考資料：使用Flexible實現手淘H5頁面的終端適配
安裝 lib-flexible，完成后在 main.js 中引入
npm i lib-flexible --save
// main.js
import 'lib-flexible/flexible';
使用postcss-pxtorem自動轉換rem（不推薦使用，發現不會轉化vux框架里面的px）
1.安裝 postcss-pxtorem
npm install postcss-pxtorem -D
2.在.postcssrc.js中做如下配置
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 37.5, //換算基數(根據html的字體大小）
unitPrecision: 3, //計算后的最小精度值，默認保留5位
propList: ["*",'!font*'], //設置哪些屬性可以px轉換rem, !不匹配屬性（這里是字體相關屬性不轉換）
selectorBlackList: [], //過濾，給定哪些選擇器不轉換rem，保留px
replace: true,
mediaQuery: false, //Boolen類型，是否允許在媒體查詢中轉換px
minPixelValue: 2 // 替換的最小像素值
}
}
}
或者用px2rem-loader，配置方法自行百度。
fastclick與ios11.3相關bug原因分析
問題1：在ios 11.3移動端頁面 input輸入框第一次觸摸可以彈起鍵盤，后續再觸摸需要很難彈起鍵盤，或者需要在輸入框停一會才能彈起鍵盤。
解決方法：
Issues中給出的修復方法是強制元素focus，即在改寫的focus響應函數中直接觸發元素的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：當app或鎖屏超過幾分鐘時間，回到頁面會導致click事件失效。
解決方法：
github有相關的解決代碼，下載替換原文件
地址一
地址二
我本人也上傳了一個版本，同時解決了問題1,2
gitgub地址
參考文獻：
fastclick解析與ios11.3相關bug原因分析
iOS11.3 fastclick.js相關bug
fastclick
