Vue學習7-MinUI組件與項目託管到碼雲上

上一篇 Vue學習6-(webpack發佈策略)
下一篇 Vue學習8-項目實戰一：完成header、tabbar區域、路由組件切換與輪播圖功能

---

---

一、使用render函數渲染組件

• render函數的特點：可以在頁面指定的容器中渲染一個組件；
• 和傳統的渲染組件方式相比，render 更霸道一些，頁面上，只能渲染這唯一組件，其它的內容，都會被覆蓋掉；

二、在webpack中配置.vue組件頁面的解析

1、運行npm i vue -S將vue安裝爲運行依賴；

2、運行npm i vue-loader vue-template-compiler -D將解析轉換vue的包安裝爲開發依賴；

3、運行npm i style-loader css-loader -D將解析轉換CSS的包安裝爲開發依賴，因爲.vue文件中會寫CSS樣式；

4、在webpack.config.js中，添加如下module規則：

5、創建App.vue組件頁面：

6、創建main.js入口文件：

三、在vue組件頁面中，集成vue-router路由模塊

四、scoped爲css樣式設置作用域

五、使用 MintUI 組件

1、導入所有MintUI組件：

import MintUI from 'mint-ui'

2、導入樣式表：

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

3、在 vue 中使用 MintUI：

Vue.use(MintUI

4、使用的例子：

<mt-button type="primary" size="large">primary</mt-button>

六、使用 MUI 代碼片段（類似Bootstrap）需查文檔

MUI 不同於 Mint-UI，MUI只是開發出來的一套好用的代碼片段，裏面提供了配套的樣式、配套的HTML代碼段，類似於 Bootstrap； 而 Mint-UI，是真正的組件庫，是使用 Vue 技術封裝出來的 成套的組件，可以無縫的和 VUE項目進行集成開發； 因此，從體驗上來說， Mint-UI體驗更好，因爲這是別人幫我們開發好的現成的Vue組件； 從體驗上來說， MUI和Bootstrap類似； 理論上，任何項目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只適用於Vue項目；

七、將項目源碼託管到碼雲

1、生成/添加SSH公鑰

2、新建倉庫

3、只需填寫倉庫名稱，其他默認

4、Git全局設置

5、使用git init 在本地初始化項目

6、分別創建 README.md 和 .gitignore 來創建項目的說明文件和忽略文件；

7、使用git add .將所有文件託管到 git 中

8、使用 git commit -m "init project"將項目進行本地提交

9、使用git remote add origin 倉儲地址將本地項目和遠程倉儲連接，並使用origin最爲遠程倉儲的別名

10、使用git push -u origin master 將本地代碼push到倉儲中

11、回到碼雲刷新，就看到項目了

八、修改項目內容後可在VScode中提交到碼雲

效果：

---

上一篇 Vue學習6-(webpack發佈策略)
下一篇 Vue學習8-項目實戰一：完成header、tabbar區域、路由組件切換與輪播圖功能