vue组件库vant-ui和iview组件库使用中遇到的问题小结

1  最近项目需要临时做一个调查问卷页面。考虑到性能和复杂度,决定通过使用cdn方式编写该页面。

效果如下:

移动端采用vant.ui

vue组件库vant-ui和iview组件库使用中遇到的问题小结_第1张图片

遇到的问题:

(1) 通过cdn方式进行开发的时候,引入官网的链接。查看network会报302错误。

解决的办法:复制该链接,下载到本地,重新链接本地地址

(2)引入链接也有讲究,script标签最好在写在body部分dom,而不能写在head里。这涉及到生命周期的问题和js引擎解析顺序问题。所以正确写法如下:


 


   


         
          
             
起始日期

        

          
起始日期

          
   
   


 
 

(3)如果不设置viewport。会出现文本过小的问题。一定要记得设置view-port进行适配
       

--------------------------------------------------------------------------------------------------------------------

pc端则采用了iview的ui组件库。其中也遇到了一些问题:

效果如下:

vue组件库vant-ui和iview组件库使用中遇到的问题小结_第2张图片

问题一: 通过cdn引用组件,比如

     

      选择日期

     

   

这样是没有效果的。必须要在前面加上i。所以正确写法:

 
                                 结束日期
                                 
                               

 (2) 通过cdn方式引入方式开发。引入组件的时候会出现字体图标缺失的情况。比如日期选择器
     data-pick右上角的日期小图标会无法显示。
     解决办法:通过github拷贝iview的(dist/styles/)fonts文件夹至当前项目css同级目录即可显示

(3)通过vue-cli方式进行开发。在发送请求向后台传递参数的时候,我们序列化参数可以通过qs这个插件。如果是通过cdn方式进行开发。注意这里是Qs,

示例:


你可能感兴趣的:(vue,vant,iview)