一务豺、主要工作：
1好芭、收集用戶信息（文本輸入、單選冲呢、二級(jí)聯(lián)動(dòng)）
2舍败、驗(yàn)證信息，跳轉(zhuǎn)成功頁(yè)
3敬拓、微信分享
二邻薯、總結(jié)
1、parcel作為打包工具（https://github.com/parcel-bundler/parcel）
- 坑1： 開(kāi)發(fā)模式和生成模式下效果不一樣：
html.index:
<input type="text" />
index.scss:
input[type=text] {
border: 1px solid #e0e0e0;
}
上述代碼在生成模式時(shí)乘凸，樣式?jīng)]有生效的厕诡。原因是parcel在parcel build的時(shí)候會(huì)使用 htmlnano壓縮html代碼，而這個(gè)插件會(huì)忽略掉 type屬性营勤，從而產(chǎn)生的壓縮代碼如下：
<input />
換用類選擇器或者其他選擇器代替屬性選擇器進(jìn)行樣式設(shè)置灵嫌。
- 坑2: 打包路徑的問(wèn)題
在parcel倉(cāng)庫(kù)的issue中葛作，有很多提出來(lái)路徑的問(wèn)題寿羞。
在gulp中，項(xiàng)目的文件一般都會(huì)通過(guò)流的方式保存到另一個(gè)（dist）與當(dāng)前（src）嵌套關(guān)系一樣的目錄中赂蠢，gulp本身也不會(huì)對(duì)路徑進(jìn)行修改绪穆。
在webpack中，我們一般會(huì)配置 assetsPublicPath虱岂， 比如 ‘/’玖院；然后生成的文件會(huì)拼在該路徑下。
而parcel中第岖，比如用如下命令打包
parcel build index.html -d dist // 默認(rèn)dist
所有資源生成的文件都會(huì)帶上這個(gè)dist這個(gè)路徑难菌。意思是：部署的時(shí)候這些打包生成的文件必須放置到服務(wù)器中 同樣命名為dist 的目錄下。這很不方便蔑滓。
2郊酒、 布局的問(wèn)題（布局不難遇绞，但花了點(diǎn)時(shí)間，記錄一下）
項(xiàng)目中有大量表單輸入猎塞，類似下圖
表單樣式
實(shí)際上單純的布局并不難试读，考慮到要適配所有的主流機(jī)型杠纵，所以要充分考慮到屏寬的影響荠耽。
左側(cè)固定，右側(cè)自適應(yīng)比藻。
<li class="item name-item">
<label class="label name" for="name">家長(zhǎng)姓名:</label>
<div class="input-wrapper">
<input class="text-input" type="text" id="name">
</div>
</li>
.item {
position: relative;
}
.input-wrapper {
width: 100%;
padding-left: 75px;
box-sizing: border-box;
}
input.text-input {
width: 100%;
}
.name {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
font-size: 16px;
}
這里的fontSize很重要铝量。
如果要rem布局，需要考慮到移動(dòng)端的最大屏寬银亲，最好用媒體查詢控制最大寬度慢叨。
