html mint ui,vue中Mint UI是什么？

在vue中，Mint UI是饿了么团队开源的一款基于Vue.js的移动端组件库。Mint UI包含丰富的CSS和JS组件，能够满足日常的移动端开发需要；通过它，可以快速构建出风格统一的页面，提升开发效率。

Mint UI是饿了么团队开源的一款基于Vue.js 的移动端组件库。

官网：https://mint-ui.github.io/#!/zh-cn

中文文档：http://mint-ui.github.io/docs/#/zh-cn2

特性介绍Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

在 Vue-cli 中使用 Mint UI

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

(1)、直接在 index.html 中引入

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

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

mint-ui-demo

配置 externals mint-ui

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

配置 mint-ui

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

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

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

3、修改 main.jsimport MINT from'mint-ui'

Vue.use(MINT)

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

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

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

default

primary

danger

5、运行查看结果

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

更多编程相关知识，请访问：编程入门！！

html mint ui,vue中Mint UI是什么？相关推荐

在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能实现效果: 2.1 下 ...
vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...
为什么不能在子线程中更新UI
首先声明一点:子线程里面是可以更新UI的--创建一个空白的Activity,在其xml文件中放一个空白TextView,Java代码如下: @Override protected void onCre ...
5.UI线程和非UI线程的交互方式
转载请标明出处: http://blog.csdn.net/yujun411522/article/details/46041637 本文出自:[yujun411522的博客] 这里说的交互方式应该 ...
html mint ui,vue mint-ui初次使用总结
首先安装npm install mint-ui -S 此处选择全局引入,放main.js下 // 官网上没有引入css,需特别注意要引入 import Mint from 'mint-ui' impo ...
实战Vue：Mint UI移动端购物商城
文章目录 UI组件库下载安装配置UI组件库使用mint-ui组件库中组件短消息提示框 iconfont 确认框创建空组件实现提示框案例 mint-ui表单组件输入框开关组件单选列表表单 ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
vue中使用iview UI
iview ui是一个强大的ui库基于vue,有很多实用的基础组件比elementui的组件更丰富,这里介绍如何在vue项目中使用iview开发项目.iview自己有一套后台管理模版iview-adm ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...

html mint ui,vue中Mint UI是什么？

html mint ui,vue中Mint UI是什么？相关推荐

最新文章

热门文章