基于VUE.JS的移动端框架Mint UI的使用

 更新时间:2017年10月11日 10:50:03   作者:转身回头处   我要评论
本篇文章主要介绍了基于VUE.JS的移动端框架Mint UI的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

Mint UI

GitHub:github.com/ElemeFE/mint

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

Demo:elemefe.github.io/mint-

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

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

脚手架

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

首先,全局安装 cooking:

npm i cooking -g

新建项目文件夹:

mkdir mint-ui-example

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

cooking init vue

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

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

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

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

接下来安装 Mint UI:

npm i mint-ui --save

引入 Mint UI

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

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

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(MintUI);

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

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

npm i babel-plugin-component -D

然后在 .babelrc 中配置它:

{
 "plugins": ["other-plugin", ["component", [
  { "libraryName": "mint-ui", "style": true }
 ]]]
}

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

import MintUI from 'mint-ui';

Vue.use(MintUI);

import Button from 'mint-ui/lib/button';

Vue.component(Button.name, Button);

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

使用

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

<template>
 <h1>mint-ui-example</h1>
 <mt-button
  type="primary"
  @click="sheetVisible = true">
  选择操作
 </mt-button>
 <mt-actionsheet
  cancel-text=""
  :actions="actions"
  :visible.sync="sheetVisible">
 </mt-actionsheet>
</template>

<script>
 import { Toast, MessageBox } from 'mint-ui';
 export default {
  name: 'app',

  data() {
   return {
    sheetVisible: false,
    actions: [{
     name: '展示 Toast',
     method: this.showToast
    }, {
     name: '展示 Message Box',
     method: this.showMsgbox
    }]
   };
  },

  methods: {
   showToast() {
    Toast('这是一个 Toast');
   },

   showMsgbox() {
    MessageBox('提示', '这是一个 Message Box');
   }
  }
 };
</script>

则会得到如下页面:

预告

以上就是 Mint UI 的使用方法介绍。如果在使用的过程中遇到任何问题,或者是想给我们一些建议,欢迎大家去 GitHub 仓库提 issue。

可能有些同学知道,除了这个移动端组件库以外,饿了么还有一套桌面端组件库vue-desktop。目前我们正在对它进行重构,这次有了 UED 的介入,整体视觉有了很大的提升。完成后也会开源,而且会有两个版本,分别支持 vue 1.0.x 和 vue 2.0。当然,Mint UI 也会考虑支持 vue 2.0。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 9102年webpack4搭建vue项目的方法步骤

    9102年webpack4搭建vue项目的方法步骤

    这篇文章主要介绍了9102年webpack4搭建vue项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Vue.js每天必学之方法与事件处理器

    Vue.js每天必学之方法与事件处理器

    Vue.js每天必学之方法与事件处理器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • vue 实现单选框设置默认选中值

    vue 实现单选框设置默认选中值

    今天小编就为大家分享一篇vue 实现单选框设置默认选中值,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue2导航根据路由传值,而改变导航内容的实例

    vue2导航根据路由传值,而改变导航内容的实例

    下面小编就为大家带来一篇vue2导航根据路由传值,而改变导航内容的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue-hook-form使用详解

    vue-hook-form使用详解

    这篇文章主要为大家详细介绍了vue-hook-form的使用方法,以及如何安装vue-hook-form,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue项目优化之通过keep-alive数据缓存的方法

    vue项目优化之通过keep-alive数据缓存的方法

    本篇文章主要介绍了vue项目优化之通过keep-alive数据缓存的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 稍微学一下Vue的数据响应式(Vue2及Vue3区别)

    稍微学一下Vue的数据响应式(Vue2及Vue3区别)

    这篇文章主要介绍了稍微学一下 Vue 的数据响应式(Vue2 及 Vue3),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 对 Vue-Router 进行单元测试的方法

    对 Vue-Router 进行单元测试的方法

    这篇文章主要介绍了对 Vue-Router 进行单元测试的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vue.js与 ASP.NET Core 服务端渲染功能整合

    Vue.js与 ASP.NET Core 服务端渲染功能整合

    本文通过案例给大家详细分析了ASP.NET Core 与 Vue.js 服务端渲染,需要的朋友可以参考下
    2017-11-11
  • vue+layui实现select动态加载后台数据的例子

    vue+layui实现select动态加载后台数据的例子

    今天小编就为大家分享一篇vue+layui实现select动态加载后台数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论