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)
})
}
以上是 vue组件库vant-ui和iview组件库使用中遇到的问题小结 的全部内容， 来源链接： utcz.com/z/375218.html
