移動端vue項目構建（二）配置環境 vue-router路由 VUX ui框架 axios請求等等~~
首先說一下，此項目的配置環境插件，因為是移動端所以有一部分考慮的都是移動端 ：
路由 vue-router 路由
路由是vue項目中很重要的東西，構建的時候一路回車就是選好了。
Ui框架 vux
- Ui框架集成的是VUX
- Vux 基於WeUI和Vue(2.x)開發的移動端UI組件庫，主要服務於微信頁面
- 官網：https://vux.li/#/
ui庫網上有什麽多種，看你是什麽開發環境選擇什麽樣的，之前PC端的時候我選的是element 就是餓了麽的ui框架，挺好用的，因為這次是微信公眾號開發所以選了vux
樣式
less
less less-loader可編譯less源碼
樣式我選的less，也可以選sass 網上有很多教程搜一下就安裝了
yaml-loader
如遇到語音文件，可進行語言文件讀取
Fastclick
移動端點擊延遲300秒處理
移動端存在點擊延遲300s的問題，這個主要是處理這個問題
發送請求
vue更新到2.0之後,vue-resource不再更新,固項目選取axios發送請求。
可並發請求，攔截器處理也是用axios攔截器，下面有個簡單的示例，詳細使用方法見百度
axios使用方法
Eg：發送一個GET請求
axios.get(‘/user‘,{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
移動端頁面自適應
移動端最重要的就是自適應了，有了這個方便很多
- px2remLoader用法
- 直接寫px，編譯後會直接轉化成rem —- 除開下面兩種情況，其他長度用這個
- 在px後面添加/no/，不會轉化px，會原樣輸出。 — 一般border需用這個
- 在px後面添加/px/,會根據dpr的不同，生成三套代碼。—- 一般字體需用這個
Eg：
.example{
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
- *在組件中寫單位直接寫px 然後在瀏覽器中的檢查就可以看到單位是rem
Vuex
集中式存儲管理，中大型項目必用，重要！！！
瀑布流
Vue-waterfall
因為項目有需要所以就裝了，就順帶說一下
先把meta標簽寫上移動端的視口
index.html入口頁面 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
以上都是介紹，這個項目裏面都裝了什麽，目的是什麽，以下就是一步一步的安裝了~~
所有cnpm 的東西都是配置在package.json裏面的，我們安裝的依賴就在node_modules內。如果把node_modules刪除，再npm install 的時候就是根據package.json裏面有的去生成node_modules依賴包。
把這個文件夾開著，下載一個，看一下有沒有下載成功。
1.vux
cnpm install vux --save
像這樣都沒提示，也沒報錯，說明就是正常的！然後看一下package.json裏面有沒有增加，如下圖就是安裝好了。
所以配置的用法，這篇文章不講，下一篇講，這篇只講安裝。
緊接著
在build/webpack.base.conf.js配置：
1.const vuxLoader = require(‘vux-loader‘)
2.把module.exports賦值變量 const webpackConfig ={裏面代碼不動}
3.把下面這段代碼放在頁面的最底部
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [‘vux-ui‘, ‘progress-bar‘, ‘duplicate-style‘]
})
如圖：
安裝vux-loader
使用命令cnpm install vux-loader -D
2.less
cnpm install less less-loader --save-dev
3.yaml-loader
cnpm install yaml-loader --save-dev
4.去掉點擊延遲300秒
cnpm install fastclick --save
在main.js裏面配置
const FastClick = require(‘fastclick‘)
FastClick.attach(document.body) //去掉點擊延遲300秒
5.axios
cnpm install axios --save
6.lib-flexible.js和rem實現移動端頁面自適應
1.安裝lib-flexible.js
cnpm install lib-flexible --save
2.在項目入口文件main.js中引入lib-flexible
import ‘lib-flexible‘
3.安裝px2rem-loader
cnpm install px2rem-loader --save-dev
4.配置px2rem-loader
首先找到 build/utils.js文件，在utils.js中添加如下配置
const cssLoader = {
loader: ‘css-loader‘,
options: {
minimize: process.env.NODE_ENV === ‘production‘,
sourceMap: options.sourceMap,
importLoaders:2//在css-loader應用loader的數目，默認為0 ，如果不加@import外部的css文件將不能正常轉換,不生效調大數字，必須重啟
}
}
const px2remLoader = {
loader: ‘px2rem-loader‘,
options: {
remUnit: 75 //設計稿的1/10，假設設計稿是750px
}
}
找到generateLoaders方法，在函數裏如下配置
這樣基本配置就完成了，重啟項目就可以使用lib-flexible+rem編寫移動端頁面了，直接寫px，瀏覽器上查看會是rem
還有好幾個下次再寫~~~~
移動端vue項目構建（二）配置環境 vue-router路由 VUX ui框架 axios請求等等~~