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);

 

使用方式与上面同样。