基於Mint UI開發VUE專案一之環境搭建和頭部底部導航欄的實現
一：簡介
Mint UI 包含豐富的 CSS 和 JS 元件，能夠滿足日常的移動端開發需要。通過它，可以快速構建出風格統一的頁面，提升開發效率。真正意義上的按需載入元件。可以只加載宣告過的元件及其樣式檔案，無需再糾結檔案體積過大。考慮到移動端的效能門檻，Mint UI 採用 CSS3 處理各種動效，避免瀏覽器進行不必要的重繪和重排，從而使使用者獲得流暢順滑的體驗。依託 Vue.js 高效的元件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮後的檔案體積也僅有 ~30kb (JS + CSS) gzip。
注意：MUI不同於Mint-ui，Mui只是開發出來一套好用的程式碼片段，裡面提供了配套的樣式，配套的HTML程式碼段，類似於bootstrap，而Mint-UI是真正的元件庫，是使用VUE技術封裝出來的成套的元件可以無縫的和VUE專案進行整合開發；因此從體驗上來說，Mint-UI體驗更好，因為這是別人幫我們開發好的現成元件，從體驗上看來MUI和Bootstrapt類似；理論上，任何專案都可以使用MUI和Bootstrapt，但是Mint-U只適用於Vue專案。
注意：MUI並不能使用npm去下載，需要手動從github上下載現成的包，自己解壓出來，然後手動拷貝到專案中去使用
Mint-UI 官網：https://mint-ui.github.io/#!/zh-cn
二：基本框架搭建
專案目錄：
app.vue
index.html
main.js
router.js
.babelrc
package.json
webpack.config.js
三：導航頭部
main.js
app.vue
樣式展示
解決上面固定佈局脫離文件流遮蓋問題：app.vue
四：底部導航欄
引入MUI
GitHub下載MUI包，取檔案到專案中
main.js
app.vue
五：程式碼管理
1：創立開源協議，LICENSE參考如下
https://choosealicense.com/
https://choosealicense.com/licenses/mit/#
2：gitignore
3：專案描述檔案，自我陳述
4：提交程式碼
git init 新建一個空的倉庫
git status 檢視狀態
git add . 新增檔案
git commit -m '註釋' 提交新增的檔案並備註說明
git remote add origin
git push -u origin master 將本地倉庫檔案推送到遠端倉庫
git log 檢視變更日誌
git reset --hard 版本號前六位 迴歸到指定版本
git branch 檢視分支
git branch newname 建立一個叫newname的分支
git checkout newname 切換到叫newname的分支上
git merge newname 把newname分支合併到當前分支上
git pull origin master 將master分支上的內容拉到本地上
六：底部導航欄圖示更改及路由切換
注意：部分圖示需要用到extra.ttf，注意fonts檔案新增，並匯入css樣式
註冊路由
七：路由切換高亮
八：底部導航頁面元件路由
建立元件檔案
router.js
app.vue
專案待續，具體請參考下一篇：基於Mint UI開發VUE專案二之主頁功能的實現