Mint UI 适配 REM、DPR

适配方案

• 前端页面适配基于淘宝移动端自适应方案 lib-flexible
• Mint UI 的 px2rem(包含字体 dpr 适配）基于 postcss-px2rem-dpr

修改内容

• mint-ui 内容没有做任何更改
• 仅修改了 build 中的 cooking.demo.js、cooking.common.js cooking.component.js 三个 build 配置文件
• 大家可以根据自身需求调整 这三个文件中的 px2remConfig 配置项

遇到的坑

虽然最终修改的内容很少且不影响 mint-ui 后期更新，但是在整个过程中遇到了不少问题，   比如最开始考虑过手动修改 vue 组件里面的 px 和 font，这种方案工作量大且不利于后续更新，

后来开始研究 mint-ui 项目，发现如下问题：

• 这个不是一个标准的 webpack 项目， 这是基于 饿了么自己开发的 cooking 脚手架，该脚手架封装了 webpack；

• 这个项目的 css 使用的是 saladcss，也许你第一次听说，其实这个 saladcss 也是 饿了么自己开发的，但基于的是 postcss；

• webpack、postcss 本来都不太熟，何况还都做了二次封装，尝试各种修改，阅读其逻辑，最终实现了最少改动的适配，真心不容易！

最后

• 其实该适配方案也不完全完美，比如 picker 组件里面的 js 代码用了好多固定死的 px 值！！！

---

Mint UI

Mobile UI elements for Vue 2.0

• Homepage
• Documentation

Installation

npm i mint-ui -S

# for Vue 1.x
npm i mint-ui@1 -S

Usage

Import all components.

import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(Mint);

Or import specified component. (Use babel-plugin-component)

import { Cell, Checklist } from 'mint-ui';

Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

Equals to

import Vue from 'vue';
import Mint from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(Mint);

// import specified component

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

Vue.component(MtRadio.name, MtRadio);

babel-plugin-component

• Auto import css file
• Modular import component

Installation

npm i babel-plugin-component -D

Usage

.babelrc

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

CDN

RawGit

• https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/index.js
• https://cdn.rawgit.com/ElemeFE/mint-ui/master/lib/style.css

NPMCDN

• https://unpkg.com/mint-ui/lib/index.js
• https://unpkg.com/mint-ui/lib/style.css

Development

npm run dev

Contribution

Please make sure to read the Contributing Guide before making a pull request.

License

MIT