vue中MintUI是什么?

Mint UI是什么?

当我们一听到 XX UI 就可以知道它是一个界面相关的框架,玩过前端的人至少听说过 Bootstrap「它是 Twitter 开源的一个 css/html 工具包」, 而 Mint UI 是饿了么团队开源的一款基于 Vue.js 的移动端组件库

Mint UI 的使用方法

1、使用 cdn 的方式引入

我们在使用 Vue.js 的时候不一定非要使用 vue-cli 来创建一个单页面应用,很可能们使用别的技术栈来搭配 Vue.js「vue只是使用它的模版,减少恶心的动态拼串」,那么我们使用 cdn 直接引入的方式是最好不过了

引入方法

<!-- 引入样式 -->

<link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css">

<!-- 引入组件库 -->

<script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>

当然我们也可以使用 yarn/npm/bower 等来安装 Mint UI 模块,然后在 html 界面中引入

这种方式其实没有什么好说的,就像我们在以前的 vue demo 中引入 vue.js 是一样的,废话不多说了,来两个例子直观感受一下吧

使用几个组件练练手

仿手机 webapp 淘宝登录界面

来张效果图看一下

手淘 webapp 登录界面

1.gif

手淘的登录界面

使用 Mint UI 仿写的手淘 webapp 登录界面

2.gif

仿写手淘的登录界面

怎么样还原度还是挺高的吧,当然这个效果不使用 Mint UI 完全可以实现「实现难度也是非常低的,这里使用 Mint UI 实现此效果有点大材小用,只是为了演示效果」

核心代码

<div id="mydiv">
<!-- 提醒栏 -->
<div class="tipslogin">
<span>你需要登录才能继续仿问</span>
<span class="closeSpan">关闭</span>
</div>
<div class="imgDiv">
<img src="./imgs/tblogo.png" alt=" " class="logo">
</div>
<!-- 操作区域 -->
<div class="operateDiv">
<!-- 账号 -->
<mt-field :placeholder="accountPlaceholder" v-model="uname" class="myinput">
</mt-field>
<!-- 密码 -->
<mt-fieldv-show="isUserAccount" placeholder="请输入密码" type="password" v-model="upass" class="myinput">
</mt-field>
<!-- 短信验证码 -->
<mt-fieldv-show="!isUserAccount" placeholder="校验码" v-model="getCode" class="myinput">
<span class="getCode">获取短信验证码</span>
</mt-field>
<!-- 免费注册块 -->
<div class="registerDiv">
<span>免费注册</span>
<span v-show="forgetPassShowroNot">忘记密码</span>
</div>
<!-- 登录和切换登录方式块 -->
<div>
<mt-button size="large" class="mybutton" @click.native="login">登录</mt-button>
<mt-button size="large" type="primary" class="mybutton" @click.native="changeLoginMethod">{{defaultAccountText}}</mt-button>
</div>
</div>
</div>

这个没有什么好说的,完整的代码请看https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/usecdntaobaologin注释非常清楚,不解释

2、在 Vue-cli 中使用 Mint UI

我们使用 vue-cli 来创建的组件化项目,其实也有三种引入 Mint UI 的方式

(1)、直接在 index.html 中引入,这个和上面的方式一样,不过有一些小区别,我们来感受一下

我们使用 vue-cli 来创建一个项目,过程就不演示了,以前说过,我们直接看核心代码

1)、在 index.html 中使用 cdn 引入 mint-ui 相关的 css 和 js

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mint-ui-demo</title>
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</head>
<body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script>
<!-- built files will be auto injected -->
<scrip tsrc="https://unpkg.com/mint-ui/lib/index.js"></script>
<div id="app"></div>
</body>
</html>

配置 externals mint-ui

2)、配置 webpack.base.conf.js,添加如下代码

1.jpg

配置 mint-ui

我们在 webpack.base.conf.js 的 module.exports 中配置 externals,externals 是把组件公开出去,供全局使用

PS:在这里我们要注意一点 externals 配置的 key:vaule 形式的,这里的 Value 好多文章中说是随意配置的,但是亲过自己亲测,这里不能随便配置,必须要和相关 js 暴漏出来的模块名字一模一样,对于 mint-ui 来说是 MINT,我们可以看一下 mint-ui.js 的源码

2.jpg

mint-ui部分源码

看到了吧,mint-ui 暴露出去供我们使用的是 MINT,所以 externals 的 value 一定是这个值「不能随意配置」

3、修改 main.js

import MINT from'mint-ui'
Vue.use(MINT)

添加以上两句,引入 mint-ui ,并且使用它

经过以上三部,我们就使用 cdn 的方式把 mint-ui 配置完了,我们来测试一下

4、在 App.vue 中的模版中添加以下代码

<template>
<div id="app">
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
<router-view/>
</div>
</template>

5、运行查看结果

3.jpg

show-vue-cli-cdn-mint-ui

怎么样,完美的显示出了 mint-ui 的 Button 效果

更多vue.js的相关知识,可访问:web前端自学!!

以上就是vue中MintUI是什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏