Vue移動端框架Mint UI教程-搭建環境引入框架（一）

今天具體說一說比較經常使用的；Mint UI框架的按鈕組件，Mint UI是 餓了麼團隊開發基於vue .js的移動端UI框架，它包含豐富的 CSS 和 JS 組件，可以知足平常的移動端開發須要。

• 官網：https://mint-ui.github.io/#!/zh-cn
• Github: https://github.com/ElemeFE/mint-ui/

---

 

 

1：安裝node

端開發框架和環境都是須要 Node.js ，先安裝node.js開發環境，vue的運行是要依賴於node的npm的管理工具來實現，下載https://nodejs.org/en/，安裝完成以後，打開cmd開始輸入命令。（我用的是win10系統，因此須要管理員權限，右鍵點擊以管理員身份運行cmd），否則會出現不少報錯。

 

image

2：查看node的版本號

下載好node以後，以管理員身份打開cmd管理工具，，輸入 node -v ，回車，查看node版本號，出現版本號則說明安裝成功。

輸入命令： node -v

 

image

3：安裝淘寶npm鏡像

因爲npm是國外的，使用起來比較慢，咱們這裏使用淘寶的cnpm鏡像來安裝vue.
淘寶的cnpm命令管理工具能夠代替默認的npm管理工具。

輸入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

 

image

4：安裝全局vue-cli腳手架

淘寶鏡像安裝成功以後，咱們就能夠全局vue-cli腳手架，輸入命令：cnpm install --global vue-cli 回車；驗證是否安裝成功，在命令輸入vue，出來vue的信息，及說明安裝成功；

輸入命令：cnpm install --global vue-cli

 

image

5：開始進入主題，初始化一個vue項目

我這裏是在d盤裏面新建一個項目，先用d:的命令，回車鍵進入d盤；回車鍵默認建立項目信息。

vue init webpack mint

 

 

出現這樣的提示，初始化成功

 

 

打開d盤，能夠看到剛纔初始化的項目

 

 

運行初始化demo，輸入命令npm run dev；運行一下初始後的demo，彈出訪問地址，若是沒有問題則進行安裝Mint UI；準備好好以後，開始引入餓了麼Mint UI組件。

cd mint
npm run dev

 

 

 

 

 

 

6：安裝 Mint UI

npm install mint-ui -S

快捷鍵ctrl+c,終止批處理操 做嗎(Y/N)，從上一步退出來，再輸入命令npm install mint-ui -S
成功安裝組件顯示以下

 

 

7：而後在項目中的main.js文件引入全部組件

// 引入所有組件
import Vue from 'vue'; 
import Mint from 'mint-ui'; 
Vue.use(Mint);

 

 

8：在App.vue中寫代碼

 

 

<template>
 <div id="app">
 <mt-button @click.native="handleClick">按鈕</mt-button>
</div>
</template>
 
<script>
export default{
 el: '#app',
 methods: {
  handleClick: function() {
   this.$toast('Hello world!');
  }
 }
}
</script>
 
<style>
</style>

9：再次運行，組件中的效果以下：

輸入命令：

npm run dev

在瀏覽器裏面，咱們能夠看到
http://localhost:8080/#/
demo內容顯示以下：

 

 

 

 

---

原文做者：祈澈姑娘

加入qq技術交流羣聊：649040560。