移動端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

---

 

 

還有好幾個下次再寫~~~~