在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的简单介绍,希望对大家有所帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!
版权声明:在vue项目中安装使用Mint-UI的方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。