vue中使用Mint-UI移動端組件庫

用官方提供的vue-cli來搭建一個vue項目，在我前面的博文中有介紹，這裏假定你們已經構建了本身的vue工程。

這裏是個人項目結構fraudApps：

1、Mint-UI移動端組件的安裝

安裝Mint-UI：

npm i mint-ui --save

安裝完成後package.json中能夠看到mint-ui的版本號：

 

2、Mint-UI的使用：

使用以前咱們須要引入組件，引入組件分爲兩種狀況：

1.若是H5應用整個地方大多都用到了該組件，咱們能夠在main.js中進行引入

2.若是隻是某些地方須要用到某一個組件，咱們能夠須要什麼組件再引入什麼組件

(1).咱們在main.js下引入組件：

在別的地方使用組件（例如在app.vue中）：

 

 （2）按需引入

若是你只須要使用某個組件，能夠僅引入這個組件，Mint UI 可以保證在代碼打包時，與這個組件無關的文件不會出如今最終代碼裏。好比須要引入 Button 組件，則在 main.js 中：

 

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';

Vue.component(Button.name, Button);

 

使用方式與上面同樣。