在vue项目中安装使用Mint-UI的方法

1.Mint UI是饿了么前端团队推出的基于Vue.js的移动组件库。它具有以下功能：使用文档：

http://mint-ui.github.io/#!/zh-cn

Mint UI包含丰富的CSS和JS组件，可以满足日常移动开发的需求。通过它，我们可以快速构建风格统一的页面，提高开发效率。真正意义上的按需加载组件。只能加载声明的组件及其样式文件，无需担心文件过大。考虑到移动终端的性能门槛，Mint UI采用CSS3处理各种动态效果，避免了浏览器不必要的重绘和重排，让用户获得流畅顺滑的体验。得益于Vue.js高效的组件化方案，Mint UI是轻量级的。即使引入所有文件，压缩文件量也只有~30kb (JS CSS) gzip。二、首先创建一个vue项目，参考前面的//www . JB 51 . net/article/131600 . htm。

第三，然后安装Mint UI:

NPM即时消息用户界面保存四。然后需要引入Mint UI。这里有两种情况：

1.介绍所有组件

如果项目将在Mint UI中使用更多组件，最简单的方法就是全部引入。此时，它需要在条目文件main.js中：

从' mint-ui '导入Mint；Vue.use(薄荷)；导入' mint-ui/lib/style . CSS '；2.根据需要介绍

如果只需要使用某个组件，只能引入这个组件。Mint UI可以保证在打包代码时，与这个组件无关的文件不会出现在最终的代码中。例如，如果您需要引入一个按钮组件，在main.js中：

从“mint-ui/lib/button”导入Button；导入' mint-ui/lib/button/style . CSS '；Vue.component(Button.name，Button)；以上两种导入方式需要分别导入对应的CSS文件。这非常不方便，尤其是当您使用按需方法引入多个组件时。

第五，为了避免这个问题，可以使用babel-plugin-component插件。

1.首先，当然要安装它：

Npm i巴别塔-插件-组件-D2。然后在中进行配置。babelrc:

{ '预设' : [ ['env '，{ 'modules': false，' targets ' : { ' browsers ' :[' 1% '，'后2个版本'，' not ie=8 ']}]，' stage-2' ]，' plugins ' :[' transform-runtime '，['component '，[ {'libraryName':'mint-ui '，' style':true} ]]，Env ' :以上两种介绍方法可以简化如下：

//从' mint-ui '导入Mint；//Vue . use(Mint)；//导入' mint-ui/lib/style . CSS '；//无需从‘mint-ui/lib/button’手动导入mint-ui样式导入按钮；Vue.component(Button.name，Button)；从“mint-ui”导入{ Swipe，SwipeItem }；//根据需要介绍一些组件Vue.component(Swipe.name，Swipe)；vue.component(Swipient . name，SwipeItem之前安装的插件会自动引入对应的CSS文件！

第六，UI组件的具体使用——可以直接参考http://mint-ui.github.io/docs/官方文件

在使用的过程中发现Mint UI文档不是很详细，很多具体的用法需要另一个百度.

1.先看官方文件：的首次介绍和用法

引入这个组件时，有一行Vue.component('对应组件名')，使用时是Vue文档的模板部分。使用对应的标签名加属性其实只是为了直接复制公文的代码，但是相对复杂的多属性组件就需要另一个百度了。

然后看看项目中的使用代码：

//add in main . js-复制公文，然后从' mint-ui '导入{Header}。Vue.component(Header.name，Header)；模板mt-header title='修改客户数据' a @ click=' toback ' replace slot=' left ' a class=' back-icon '/a/a！-这个头部导航栏的关键是mt-header父标签，这个标签中的内容是按照需求-/mt-header/template编写的

组件渲染

2.然后看官网文档：的第二个介绍和用法

我们可以看到，在引入这个组件的时候，并没有Vue.component(“对应的组件名”)，再看看基本用法，就这么简单.

我指的是第一种方法，直接介绍文档的Toast组件，然后在脚本中使用。此时，我将报告一个：的错误

//提示框从' mint-ui '导入{ Toast }；Created:function(){ Toast('使用Toast ')；//写在created中用于测试，平时使用时根据自己的需要用在相应的位置。}

百度了一下，似乎有不少人和我一样遇到过这个问题.

其实，如果我们看看吐司的用法表述，就可以知道吐司是一种方法。由于它是一个方法，如果它没有在js中直接定义，它将报告一个错误。因此，在引入这个组件时，我们将这个方法设置为全局变量：

//将其添加到main.js中，在main . js中需要将Toast方法设置为全局变量，否则组件将在使用该方法的每个vue页面中重新引入.从“mint-ui”导入{ Toast }；窗户。吐司=吐司；设置后，您将不再报告错误。再看看页面上的组件：

组件渲染

摘要

以上是在vue项目中安装使用Mint-UI的简单介绍，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！