Mint UI教程

1 介绍

Mint UI基于 Vue.js 的移动端组件库。
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。
本章节介绍的是基于webpack的开发方式。

2 npm 安装

npm i mint-ui -D

3 CDN

目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

4 导入方式

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);
// 按需引入部分组件
import { Cell, Checklist } from 'mint-ui';
Vue.component(Cell.name, Cell);
Vue.component(Checklist.name, Checklist);

5 基本使用

本文是在学会使用webpack构建vue项目的基础上撰写的，如果不了解这部分的可以先去看看webpack中使用vue
main.js

// 导入 Mint-UI
import MintUI from 'mint-ui' //把所有的组件都导入进来
// // 这里 可以省略 node_modules 这一层目录
import 'mint-ui/lib/style.css'
// // 将 MintUI 安装到 Vue 中
Vue.use(MintUI) // 把所有的组件，注册为全局的组件

app.vue

<template>
    <div align="center">
        <h1>主页</h1>
        <mt-button type="primary">登录</mt-button>
    </div>
</template>

5 按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

编辑.babelrc

{
  "presets": [
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [["component",
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]
}

编辑main.js
在主入口引入Button和Cell并且命名为mybutton和mycell这样我们就可以使用这两个插件了

import { Button, Cell } from 'mint-ui'
Vue.component("mybutton", Button)
Vue.component("mycell", Cell)

var vm = new Vue({
  el: '#app',
  render: c => c(app),
  router
})

编辑app.vue

<mybutton type="primary">登录</mybutton>

更多详细资料参见：Mint UI官网