vue元件庫vant-ui和iview元件庫使用中遇到的問題小結
1 最近專案需要臨時做一個調查問卷頁面。考慮到效能和複雜度，決定通過使用cdn方式編寫該頁面。
效果如下：
移動端採用vant.ui
遇到的問題：
（1） 通過cdn方式進行開發的時候，引入官網的連結。檢視network會報302錯誤。
<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
解決的辦法：複製該連結，下載到本地，重新連結本地地址
（2）引入連結也有講究，script標籤最好在寫在body部分dom，而不能寫在head裡。這涉及到生命週期的問題和js引擎解析順序問題。所以正確寫法如下：
<head>
<link href="./css/vant.css""></link>
</head>
<body>
<div id="#app">
<van-row>
<van-col span="12">
<div @click="openDateLayout">起始日期</div>
</van-col>
<div @click="getEndDate">起始日期</div>
</van-row>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<script src="./js/vant.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
}
})
</script>
</body>
（3）如果不設定viewport。會出現文字過小的問題。一定要記得設定view-port進行適配
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1">
--------------------------------------------------------------------------------------------------------------------
pc端則採用了iview的ui元件庫。其中也遇到了一些問題：
效果如下：
問題一： 通過cdn引用元件，比如
<Row>
<Col span="12">選擇日期</Col>
<Col span="12"> <DatePick ></DatePick></Col>
</Row>
這樣是沒有效果的。必須要在前面加上i。所以正確寫法：
<i-row>
<i-col span="4">結束日期</i-col>
<i-col span="20"><date-picker type="date" placeholder="請選擇日期"></date-picker> </i-col>
</i-row>
</i-row>
(2) 通過cdn方式引入方式開發。引入元件的時候會出現字型圖示缺失的情況。比如日期選擇器
data-pick右上角的日期小圖示會無法顯示。
解決辦法：通過github拷貝iview的(dist/styles/)fonts資料夾至當前專案css同級目錄即可顯示
（3）通過vue-cli方式進行開發。在傳送請求向後臺傳遞引數的時候，我們序列化引數可以通過qs這個外掛。如果是通過cdn方式進行開發。注意這裡是Qs，
示例：
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.js"></script>
<script type="text/javascript">
window.onload=function(){
btn.onclick=function(){
var data={
mobile:name,
password:pass
}
fetch(url+"/account/login",{
method:'POST',
headers:{
'Content-Type': 'application/x-www-form-urlencoded'
},
body:Qs.stringify(data)
}).then((res)=>{
console.log("res:",res)
return res.json()
}).then(data=>{
console.log("data:",data)
}).catch(err=>{
console.log("err:",err)
})
}