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

发布时间：2020-12-16 23:20:39 所属栏目：百科来源：网络整理

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

Mint UI

GitHub：

项目主页：

Demo：

文档：

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

脚手架

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

首先，全局安装 cooking：


新建项目文件夹：


进入项目文件夹，使用 cooking 进行构建：


最后的参数 vue 表示构建的是基于 Vue.js 的脚手架。
在构建过程中，cooking 需要如下一些参数：

其中“使用何种 CSS 预处理”这里选择的是?，它是一套基于 PostCSS 的解决方案，有兴趣的同学可以了解一下。当然，你也可以选择其他的预处理器。
完成构建后的项目结构为：

接下来安装 Mint UI：


引入 Mint UI
好了，之后的工作可以分为两种情况：
1. 引入全部组件
如果你的项目会用到 Mint UI 里较多的组件，最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中：
<span class="nx">Vue<span class="p">.<span class="nx">use<span class="p">(<span class="nx">MintUI<span class="p">);



2. 按需引入
如果你只需要使用某个组件，可以仅引入这个组件，Mint UI 能够保证在代码打包时，与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件，则在 main.js 中：
<span class="nx">Vue<span class="p">.<span class="nx">component<span class="p">(<span class="nx">Button<span class="p">.<span class="nx">name<span class="p">,<span class="nx">Button<span class="p">);



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


然后在 .babelrc 中配置它：


这样上述两种引入方法就可以简化为：
<span class="nx">Vue<span class="p">.<span class="nx">use<span class="p">(<span class="nx">MintUI<span class="p">);



和
<span class="nx">Vue<span class="p">.<span class="nx">component<span class="p">(<span class="nx">Button<span class="p">.<span class="nx">name<span class="p">,<span class="nx">Button<span class="p">);



插件会自动引入相应的 CSS 文件。
使用
每个组件的使用方法请阅读文档，这里只举一个微小的例子。在 app.vue 中：

  mint-ui-example
  
    选择操作
  
  
  

<span class="p"><<span class="nt">script<span class="p">>

<span class="kr">import <span class="p">{ <span class="nx">Toast<span class="p">,<span class="nx">MessageBox <span class="p">} <span class="nx">from <span class="s1">'mint-ui'<span class="p">;

<span class="kr">export <span class="k">default <span class="p">{

<span class="nx">name<span class="o">: <span class="s1">'app'<span class="p">,<span class="nx">data<span class="p">() <span class="p">{

<span class="k">return <span class="p">{

<span class="nx">sheetVisible<span class="o">: <span class="kc">false<span class="p">,<span class="nx">actions<span class="o">: <span class="p">[{

<span class="nx">name<span class="o">: <span class="s1">'展示 Toast'<span class="p">,<span class="nx">method<span class="o">: <span class="k">this<span class="p">.<span class="nx">showToast

<span class="p">},<span class="p">{

<span class="nx">name<span class="o">: <span class="s1">'展示 Message Box'<span class="p">,<span class="nx">method<span class="o">: <span class="k">this<span class="p">.<span class="nx">showMsgbox

<span class="p">}]

<span class="p">};

<span class="p">},<span class="nx">methods<span class="o">: <span class="p">{

<span class="nx">showToast<span class="p">() <span class="p">{

<span class="nx">Toast<span class="p">(<span class="s1">'这是一个 Toast'<span class="p">);

<span class="p">},<span class="nx">showMsgbox<span class="p">() <span class="p">{

<span class="nx">MessageBox<span class="p">(<span class="s1">'提示'<span class="p">,<span class="s1">'这是一个 Message Box'<span class="p">);

<span class="p">}

<span class="p">}

<span class="p">};

<span class="p"></<span class="nt">script<span class="p">>



则会得到如下页面：

预告
以上就是 Mint UI 的使用方法介绍。如果在使用的过程中遇到任何问题，或者是想给我们一些建议，欢迎大家去?提 issue。
可能有些同学知道，除了这个移动端组件库以外，饿了么还有一套桌面端组件库?。目前我们正在对它进行重构，这次有了 UED 的介入，整体视觉有了很大的提升。完成后也会开源，而且会有两个版本，分别支持 vue 1.0.x 和 vue 2.0。当然，Mint UI 也会考虑支持 vue 2.0。
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!