一：簡介
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@github.com:jinzhaogit/git.git 連接遠程倉庫
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
九：輪播圖的實現
1：按需引入
:
2：基礎用法
3：注意：默認輪播圖無高，需取組件內設類名設置高度
4：vue-resource獲取數據並渲染
4.1：下載vue-resource
4.2：引入並注冊
4.3：HomeContainer.vue調用
4.4：渲染頁面，注意key值的設置
4.5：修改圖片樣式
十：九宮格的實現
1：HomeContainer.vue
十一：注意給路由添加一個重定向
十二：實現組件之間切換動畫
1：包裹動畫內容區域
注意底部會出現滾動條，這時候使用mode=“”out-in“”並不起作用,
解決如下，在最外層橫向設置為隱藏，注意不可設y方向，因為中間部分需要下拉很多內容
2：定義動畫效果
項目待續，具體請參考下一篇：基於Mint UI和MUI開發VUE項目二之主頁功能的實現