“Vue是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。”這是Vue.js的官網對Vue的簡介。我在小組中負責顧客端訂餐頁面的設計，通過了解餓了麼的移動端web實現，我決定使用Vue作為前端設計頁面的框架。

　根據以往對Nodejs中Express框架和Koa框架的瞭解，我決定用vue-cli構建專案。

一、安裝及使用vue-cli新建專案

# 全域性安裝vue-cli
 

npm install -g vue-cli
# 建立一個基於webpack模板的新專案my-project
# 在此過程中按需填寫專案名，專案描述，作者，是否安裝vue-router等資訊
vue init webpack my-project
# 進入專案，安裝依賴並執行
cd my-project
npm run dev

　訪問localhost:8080可以看到如下頁面，說明成功新建了一個vue專案

二、在新建專案中使用Mint UI

　前面說到vue便於與第三方庫整合，於是我嘗試著使用Mint UI這個來自餓了麼的移動端UI庫。

# 在專案中安裝mint-ui
 

npm i mint-ui -S

　然後在專案中的檔案main.js新增如下：

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

　然後就可以在專案中使用Mint UI的元件了。比如在ＨelloWorld.vue中新增Mint UI的Spinner元件:

　可以看到Spinner已經顯示在網頁中。

三、Chromium模擬移動端顯示

　谷歌瀏覽器可以模擬移動端顯示，在調出除錯視窗之後（右鍵-檢查，或者按F12），可以看到左上角有個不明顯的手機標誌（下圖藍色部分），點選即可模擬移動端顯示

　效果如下圖，還可以調節型號和螢幕解析度。雖然說不上完美地模擬真機，但非常方便流暢。