vue项目如何引入Mint UI

vue项目如何引入Mint UI

Mint UI 是一个基于 Vue.js 的移动端组件库，下面介绍如何在vue项目中引入Mint UI

安装mint-ui

npm intall mint-ui --save

检查一下是否 安装成功

查看配置文件package.json文件是否有mint-ui的版本信息

main.js中引入mint-ui

import MintUI from 'mint-ui'

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

Vue.use(MintUI)

组件调用

我们测试一下button组件能否正常显示 。

button组件在页面正常显示了，说明我们成功了。

步骤三的方法是将所有的mint-ui组件全部引入，有一些组件可能是项目中不需要的，那么就需要按需引入。

首先需要安装 babel-plugin-component

修改.babelrc文件

"plugins": [["component", [

{

"libraryName": "mint-ui",

"style": true

}

]]]

在main.js中引入项目需要的组件

本例子中引入 button组件用于实践效果

步骤4中的代码不变，查看效果，正常显示，按需引入成功。