外賣商城類app（一），基於vue.js（2.x版本）
數據是通過Mob平臺提供的數據API接口進行模擬的。
第一步：需求分析
實際項目中這一部分其實很重要，但是貌似一些小公司並不重視，我前端生涯的第一份工作就是一家小公司，需求分析基本不做，看着原型就開始做，什麼效果，什麼事件全靠自己想。客戶不滿意又重新做，毫無效率，代碼也很亂。
第二步：技術選型
這裏使用vue，mint-ui。
擴展：這裏使用的icon圖標是阿里巴巴矢量圖標
使用方式：
- 去阿里圖標矢量圖標庫將想要的圖標添加入庫
- .再去庫中將圖標添加到項目。然後下載代碼到本地
- 在vue項目的assets文件夾下新建一個iconfont文件夾（名字隨意），將剛剛下載下來的代碼包中的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfont.woff複製到iconfont文件夾下。
- 在main.js中全局引入iconfont.css（
import './assets/iconfont/iconfont.css'） - 之後就可以在項目中正常使用了
< i class = "iconfont icon-icon-chaxun"></i>
第三步：項目結構劃分
主要目錄src，這個是由vue-cli生成,大體目錄是如下劃分
建立項目遇到的問題：
1.sass編譯不成功
- 第一個是css-loader沒下載
- 第二個是sass-loader因爲網絡問題下載失敗
配置sass
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
關於頁面子路由問題
我喜歡用父級路由嵌套子路由的做法，然後在切換標籤的div加上自定義屬性，屬性值爲子路由的name。具體代碼如下：
< div class="tab-item flex-1 txt-c" data-type="good"
@click="tabChange($event)" >
商品
< /div >
tabChange(e){
console.log(e.target.dataset.type)
}
在事件中傳參$event是關鍵的一點