基于Mint UI和MUI開發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@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項目二之主頁功能的實現