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同级目录即可显示