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
<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=http://www.wztg.net/wenda/"https://unpkg.com/mint-ui/lib/style.css">