初始化項目
1确丢、在安裝了node.js的前提下珠十，使用以下命令
npm install --g vue-cli
2、在將要構(gòu)建項目的目錄下
vue init webpack myproject(項目目錄名稱)
一路回車如下
中間會讓選擇ESLint進行項目代碼風(fēng)格檢查，為了美觀和效率瓜贾，可以開起來，vue-router用起來携悯，紅框框中的兩個測試祭芦，不要也罷，后面是問要使用哪個進行install依賴包憔鬼，默認(rèn)npm好了龟劲；然后回車，等待下載依賴轴或；慢的話可以用鏡像昌跌。
下載完成之后會看到如下提示：
按照步驟往下走就好了
接下來在瀏覽器里輸入localhost:8080，就可以進入到vue的世界了
只有這些還不夠照雁，這距離一個響應(yīng)式的app框架還差好多蚕愤，接下來就正式搭建一個移動端的項目吧。
?首先我們來看一下剛構(gòu)建好的vue的項目結(jié)構(gòu)
可以發(fā)現(xiàn)項目中有assets和static兩個文件夾可存放靜態(tài)文件饺蚊，那豈不是沖突了萍诱？其實不然，assets中存放的靜態(tài)文件是會經(jīng)過webpack處理的污呼，一般放一些圖片之類的靜態(tài)資源裕坊，而static則不會收到webpack的影響，調(diào)用的時候也是通過絕對路徑調(diào)用的燕酷，通常用來存放一些第三方的靜態(tài)資源庫籍凝。
此項目將基于vue-cli的項目目錄進行改造，使其集成vue-router苗缩、vuex静浴、axios，而且可以自動適配移動端大小挤渐。
在開始寫代碼之前苹享，先說一下ESlint警告和報錯，可以選擇性修改校驗規(guī)則浴麻，點擊參考修改得问，也可以使用 /* eslint-disable */ 選擇性忽略校驗
路由（vue-router）
一個項目的路由是一個項目的基礎(chǔ)，我們先從路由開始软免，在剛一開始初始化項目的時候宫纬，vue-router就被引進項目里來了，上面的圖片里在src\router里面放的就是路由配置文件膏萧，按照個人習(xí)慣我將對上面的目錄結(jié)構(gòu)進行調(diào)整漓骚，如下
新建page目錄存放主邏輯頁面蝌衔，components存放公共組件，router統(tǒng)一管理路由
如圖引入新的頁面蝌蹂，路由跳轉(zhuǎn)可通過this.$router.push('/Home')
路由vue-cli都給封裝的差不多了噩斟，倒也沒什么要大改的地方，接下來來看下vuex
vuex（狀態(tài)管理模塊）
關(guān)于vuex的介紹官網(wǎng)也給了比較詳細的介紹孤个，對其作用不太了解的話可以參考什么是vuex剃允，這里只說怎么集成在項目里面，并且簡單介紹其用法
（1）安裝vuex
npm install vuex --save
（2）配置vuex
根據(jù)個人開發(fā)習(xí)慣齐鲤，項目中vuex的配置也不相同斥废，不過大體都差不多，也有差別大的地方给郊，比方說官網(wǎng)推薦在actions里寫異步操作改變state狀態(tài)牡肉，但是我還是比較喜歡將請求數(shù)據(jù)等異步操作放在store外面操作，在通過commit去改變狀態(tài)淆九，具體將會在下面的數(shù)據(jù)請求模塊的封裝里提到
廢話不多說了荚板，看下面圖片
首先創(chuàng)建了一個狀態(tài)的文件夾，用于管理整個狀態(tài)吩屹；在modules里面分開來寫各個模塊的狀態(tài)跪另，如下
mutation-type定義了一些修改state的方法，如下
在index.js統(tǒng)一輸出煤搜，如下
這里用到了一個vuex的內(nèi)置插件免绿，如上圖，開啟之后狀態(tài)的每次改變都可以在console里面查看修改信息如下圖
這里的index配置好之后就是要在main.js里注冊一下
通過以上幾步設(shè)置擦盾，就可以在項目里面使用狀態(tài)了嘲驾，這里以home.vue為例，看下面代碼
到這里vuex的引入就結(jié)束了迹卢，下面來繼續(xù)看數(shù)據(jù)請求模塊（axios）
axios（數(shù)據(jù)請求模塊）
之前vue數(shù)據(jù)請求模塊用的是vue-resource辽故，官方不推薦，棄之腐碱；說下axios的集成步驟誊垢，以及需要注意的一些地方
（1）安裝axios和js-cookie
npm install axios --save
（2）配置axios
在src目錄下面新建apiconfig文件夾，用來封裝請求和定義一些關(guān)于請求的全局變量症见；同時創(chuàng)建api文件夾喂走，用來分別聲明各個模塊的請求方法，如下圖
先來看apiconfig里的公共封裝部分谋作；這里會對請求做以下處理
定義一些像請求返回成功的狀態(tài)芋肠、請求超時時間等常量，
對請求做一次公共的封裝遵蚜，
對token的存儲和攔截當(dāng)操作帖池，
下面看代碼
以上代碼以post請求為例奈惑，對請求進行公共封裝，并且定義了一些常量以供請求使用睡汹，另外分別對請求和響應(yīng)進行了攔截肴甸，方便在請求或者數(shù)據(jù)返回時，對數(shù)據(jù)進行統(tǒng)一處理帮孔，具體在代碼的注釋里都可以看到雷滋，下面就以登錄為例不撑，對封裝的請求方法進行調(diào)用文兢。
下面來看api模塊部分，以home-api為例焕檬，看代碼
在文件里引入fetch方法和baseUrl姆坚，這里為什么可以簡寫成'config/index'呢，需要在'build/webpack.base.conf.js'里添加以下代碼实愚，后面引入api同理
這里export登錄方法loginUserNo之后兼呵，就可以在組件里面使用這個登錄方法了，如下代碼
在點擊登錄之后執(zhí)行登錄方法腊敲，就可以調(diào)用請求方法了击喂，但是這里還有一個問題
關(guān)于數(shù)據(jù)請求，避不開的一個老生常談的問題就是跨域碰辅，同樣的上面點擊登錄也會涉及到跨域無法請求的問題懂昂，不過好在vue-cli里面已經(jīng)配置了解決跨域問題的模塊，我們可以在config/index.js里面配置以下要代理的地址念脯，如下圖
將以root開頭的api轉(zhuǎn)發(fā)出去诺凡，將地址指向接口地址把介，這樣就解決了跨域的問題。
到此铲敛，vue全家桶的引入及應(yīng)用就基本完成了，但是到目前為止這個項目還只能進行簡單的路由跳轉(zhuǎn)会钝、狀態(tài)存儲以及數(shù)據(jù)請求伐蒋，而我們的目標(biāo)是一個移動端應(yīng)用框架，接下來我們還要解決如下幾個問題
移動端適配問題
移動端ui框架的引入
項目組織架構(gòu)的優(yōu)化問題
下面我們就先從移動端適配問題入手
項目的適配
因為移動端設(shè)備屏幕大小迁酸，屏幕比例什么的差別比較大咽弦，所以移動端項目的適配問題就顯得尤為重要，這里我們主要使用flexible.js進行適配胁出，關(guān)于flexible.js型型，不懂得話可以點這里，這里我們以最常用的750*1334的尺寸為例
引入flexible.js全蝶，在main.js里引入flexible.js文件闹蒜，可將flexible.js作為靜態(tài)文件放在最外層static文件夾里引入寺枉，如下圖
使用less作為css預(yù)處理器，首先安裝less
（1）安裝less和less-loader
npm install less?less-loader --save-dev
（2）配置less
在build/webpack.base.conf.js 的module.exports.module.rules 里面添加
然后在組件里面使用的時候绷落，在style標(biāo)簽上加上 lang="less"姥闪，就可以正常的使用less了，這里我們來引入幾個初始化項目的less文件砌烁，在src下面創(chuàng)建styles文件夾筐喳，放入以下文件
在每個組件里的style標(biāo)簽里引入index.less和variable.less
?然后上面寫關(guān)于像素的樣式的時候，都在mixin.less定義下函喉，就可以實現(xiàn)對所有移動端的適配問題避归。
移動端頁面切換及切換動畫
此處將切換動畫單獨拿出來說以下，作為移動端一般要實現(xiàn)的需求是管呵，第一級菜單切換不需要轉(zhuǎn)場動畫梳毙，第一級菜單向第二級菜單轉(zhuǎn)場時需要過渡動畫；針對這一需求提供以下解決方案捐下。
需要用到動畫的話肯定會用到vue的transition账锹，不熟悉的話可以看這里，這里實現(xiàn)動畫的解決方案是判斷要執(zhí)行路由的方向坷襟，如下代碼奸柬，在路由配置文件里定義路由的方法
上面在執(zhí)行路由跳轉(zhuǎn)的時候，在App.vue里面判斷滑動的方向婴程，來指定動畫的方向廓奕，不需要動畫的話，可以直接使用this.$router.push('****')排抬，下面是App.vue里處理的動畫代碼
在組件中使用的話則使用
還有一步懂从，就是監(jiān)聽點擊瀏覽器返回按鈕，在main.js里寫如下代碼
移動端UI框架選擇
?作為移動端項目蹲蒲，上面步驟其實已經(jīng)算完善了番甩，但是往往會遇到項目工期緊，或者缺少人手的時候届搁，這個時候引入一個移動端的UI就如虎添翼了缘薛，不用自己去封裝一些ui組件了，這里使用mint-ui卡睦，優(yōu)點可自行搜索宴胧，這里講一下對mint-ui的引入。
（1）安裝mint-ui
npm install mint-ui --save
（2）引入mint-ui
在main.js里引入mint-ui
1import Mint from 'mint-ui'2import 'mint-ui/lib/style.css'// 引入css3Vue.use(Mint)// 全局使用
這樣就可以在整個vue項目里面使用mint-ui的組件了表锻。
打包
打包遇到的一些問題
（1）打包之后在ios上點擊元素會閃出來一個半透明的灰色框恕齐，這里需要加一句css做下兼容-webkit-tap-highlight-color:rgba(0,0,0,0); 放入#app的css里
（2）點擊事件右300ms的延遲，可采用fastclick.js解決瞬逊，參考以下代碼
1npm install fastclick --save23// 在main.js引入4import FastClick from 'fastclick'5FastClick.attach(document.body)
打包注意事項
如果將項目打包用于移動端瀏覽器显歧，則直接打包仪或，不需要更改其它的東西，在包之后上傳至服務(wù)器士骤，使用nginx做下接口轉(zhuǎn)發(fā)即可
如果想將打包的靜態(tài)文件進一步打包成移動端應(yīng)用范删，則需要修改以下config/index.js
在config/prod.env.js新增baseUrl
打包成app之后，移動端不會存在跨域問題拷肌。
寫在最后
上面項目純屬個人搭建到旦，適用于移動端項目，包括瀏覽器端巨缘，微信公眾號以及打包之后的android添忘，ios應(yīng)用，目前還存在一些不足的地方带猴，不過基本功能可以正常使用昔汉，具體的代碼懈万，如有需要可在我的github中下載使用拴清，如果覺得對你有用，請給我點贊会通，如有修改建議口予，請?zhí)岢觥?/p>
