基於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項目二之主頁功能的實現

原文出處：https://www.cnblogs.com/jinzhaozhao/p/10022577.html