基于VUE。JS的移动端框架薄荷UI的使用

　　

<强>薄荷UI

　　GitHub:github.com/ElemeFE/mint

　　

项目主页:mint-ui.github.io/#

　　

演示:elemefe.github.io/薄荷-

　　

文档:mint-ui.github.io/docs/#

　　

由饿了么前端团队推出的薄荷UI是一个基于Vue。js的移动端组件库。自6月初开源以来,根据社区和团队内部的反馈,修复了一些错误并新增了部分组件,于本周发布了0.2.0版本。本文介绍如何从零开始构建一个使用薄荷UI的Vue项目。

　　

<强>脚手架

　　

随着Vue。js的迅速发展,目前搭建一个Vue项目的脚手架已经有不少选择了。比如可以使用官方提供的vue-cli。本文使用饿了么自己的构建工具烹饪来完成这个任务。

　　

首先,全局安装烹饪:

　　 　　 　　npm我烹饪- g 　　 　　

新建项目文件夹:

　　 　　 　　mkdir mint-ui-example 　　 　　

进入项目文件夹,使用烹饪进行构建:

　　 　　 　　烹饪init vue 　　 　　

最后的参数vue表示构建的是基于vue。js的脚手架。

　　

在构建过程中,烹饪需要如下一些参数:

　　

基于VUE。JS的移动端框架薄荷UI的使用

　　

其中“使用何种CSS预处理”这里选择的是沙拉,它是一套基于PostCSS的解决方案,有兴趣的同学可以了解一下。当然,你也可以选择其他的预处理器。

　　

完成构建后的项目结构为:
　　

　　

基于VUE。JS的移动端框架薄荷UI的使用

　　

接下来安装薄荷UI:

　　 　　 　　npm我mint-ui——保存 　　 　　

<强>引入薄荷UI

　　

好了,之后的工作可以分为两种情况:

　　

1。引入全部组件
　　如果你的项目会用到薄荷UI里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件主要。js中:
　　

　　 　　 　　从“mint-ui”进口进民退”; 　　进口“mint-ui/lib/style.css”; 　　 　　Vue.use(进民退”); 　　之前 　　 　　

2。按需引入

　　

如果你只需要使用某个组件,可以仅引入这个组件,薄荷UI能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入按钮组件,则在主。js中:

　　 　　 　　进口从“mint-ui/lib/按钮”按钮; 　　导入“mint-ui/lib/按钮/style.css”; 　　 　　Vue.component (Button.name、按钮); 　　之前 　　 　　

可以看的出,上面两种引入方法都要单独引入相应的CSS文件。这很不方便,尤其当你使用按需引入的方法引入多个组件时。为了避免这个问题,可以使用babel-plugin-component插件。首先当然是安装它:

　　 　　 　　npm我babel-plugin-component - d 　　 　　

然后在.babelrc中配置它:

　　 　　 　　{ 　　“插件”:(“其他插件”,(“组件”, 　　{“libraryName”:“mint-ui”、“风格”:真正的} 　　]]] 　　} 　　 　　

这样上述两种引入方法就可以简化为:

　　 　　 　　从“mint-ui”进口进民退”; 　　 　　Vue.use(进民退”); 　　之前 　　 　　

和

　　 　　 　　进口从“mint-ui/lib/按钮”按钮; 　　 　　Vue.component (Button.name、按钮); 　　之前 　　 　　

插件会自动引入相应的CSS文件。

　　

<强>使用

　　

每个组件的使用方法请阅读文档,这里只举一个微小的例子。在app.vue中:

　　 　　 　　& lt; template> 　　& lt; h2> mint-ui-example 　　& lt; mt-button 　　type="主" 　　@click=" sheetVisible=true "比; 　　选择操作 　　& lt;/mt-button> 　　& lt; mt-actionsheet 　　cancel-text=" " 　　:行动="行动” 　　祝辞:visible.sync=" sheetVisible”; 　　& lt;/mt-actionsheet> 　　& lt;/template> 　　 　　& lt; script> 　　从“mint-ui”进口{吐司,弹出窗口}; 　　出口默认{ 　　名称:“应用程序”, 　　 　　数据(){ 　　返回{ 　　sheetVisible:假的, 　　行动:[{ 　　名称:“展示土司”, 　　方法:this.showToast 　　}, { 　　名称:“展示消息框”, 　　方法:this.showMsgbox 　　}) 　　}； 　　}， 　　 　　方法:{ 　　showToast () { 　　烤面包(“这是一个面包'); 　　}， 　　 　　showMsgbox () { 　　弹出窗口(“提示”、“这是一个消息框”); 　　} 　　} 　　}； 　　& lt;/script> 　　 　　

基于VUE。JS的移动端框架薄荷UI的使用