Mint UI文档：http://elemefe.github.io/mint-ui/#/

一、Mint UI的安装和基本用法。

1.NPM :npm i mint-ui -S
建议使用npm进行安装，因为它可以与webpack无缝协作。
2.CDN:从unpkg.com/mint-ui获取最新版本，并在您的页面中导入JavaScript和CSS文件

<!-- import CSS -->

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

<!-- import JavaScript -->

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

如果您正在使用CDN，则可以使用Mint UI轻松编写Hello world页面。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<!-- import CSS -->

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

</head>

<body>

<div id="app">

<mt-button @click.native="handleClick">Button</mt-button>

</div>

</body>

<!-- import Vue before Mint UI -->

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- import JavaScript -->

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

<script>

new Vue({

el: '#app',

methods: {

handleClick: function() {

this.$toast('Hello world!')

}

}

})

</script>

</html>

关于事件处理程序

在Vue 2.0中，要在组件上侦听本机DOM事件，您需要使用.native修饰符：

<my-component @click.native="handleClick">Click Me</my-component>
为了便于使用，我们处理了Button组件，以便它可以监听click事件：

<mt-button @click="handleButtonClick">Click Me</mt-button>
但是对于其他组件，.native仍然需要修改器。

快速开始：

使用vue-cli

npm install -g vue-cli

vue init webpack projectname

安装Mint UI

npm install --save mint-ui

您可以完全导入Mint UI，或者只导入您需要的内容。我们先来看看完全导入。

完全导入:

在main.js中：

import Vue from 'vue'

import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

import App from './App.vue'

Vue.use(MintUI)

new Vue({

el: '#app',

components: { App }

})

以上完全导入了Mint UI。请注意，CSS文件需要单独导入。

一经请求:

在babel-plugin-component的帮助下，我们可以导入我们实际需要的组件，使项目比其他方式更小。

首先安装babel-plugin-component：

npm install babel-plugin-component -D

然后编辑.babelrc：

{

"presets": [

["es2015", { "modules": false }]

],

"plugins": [["component", [

{

"libraryName": "mint-ui",

"style": true

}

]]]

}

如果需要Button和Cell，请编辑main.js：

import Vue from 'vue'

import { Button, Cell } from 'mint-ui'

import App from './App.vue'

Vue.component(Button.name, Button)

Vue.component(Cell.name, Cell)

/* or

* Vue.use(Button)

* Vue.use(Cell)

*/

new Vue({

el: '#app',

components: { App }

})

开始编码:

npm run dev

建立：

npm run build

Mint UI文档的更多相关文章

  1. webapi+swagger ui 文档描述

    代码:GitHub swagger ui在我们的.NET CORE和.NET Framework中的展现形式是不一样的,如果有了解的,在.NET CORE中的是比.NET Framework好的.两张 ...

  2. Atitit 项目文档规范化与必备文档与推荐文档列表

    Atitit 项目文档规范化与必备文档与推荐文档列表 ===========比较重要的必备文档========== 项目组名单通讯录( 包括项目组,客户沟通人等 需求文档 原型ui文档 开发计划表 项 ...

  3. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  4. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  5. qt 单文档程序关闭时在delete ui处出现segmentation fault

    做了个显示图片的单文档程序. qt 单文档程序关闭时在delete ui处出现segmentation fault. 调试发现调用两次mainwindow析构函数. http://blog.csdn. ...

  6. Asp.net Core WebApi 使用Swagger做帮助文档，并且自定义Swagger的UI

    WebApi写好之后,在线帮助文档以及能够在线调试的工具是专业化的表现,而Swagger毫无疑问是做Docs的最佳工具,自动生成每个Controller的接口说明,自动将参数解析成json,并且能够在 ...

  7. WeUI首页、文档和下载 - 专为微信设计的 UI 库 - 开源中国社区

    Download Bitnami Review Board Stack click here WeUI首页.文档和下载 - 专为微信设计的 UI 库 - 开源中国社区

  8. Swagger UI及 Swagger editor教程 API文档搭配 Node使用

    swagger ui 是一个在线文档生成和测试的利器,目前发现最好用的.为啥好用呢?打开 demo,支持API自动生成同步的在线文档些文档可用于项目内部API审核方便测试人员了解 API这些文档可作为 ...

  9. 厨娘ui设计文档

    厨娘ui设计文档 一.概述 中国的饮食文化从古到今源远流长.在生活日益丰富的今天,人们对饮食的要求不仅仅是温饱,更讲究健康和美味.近年来,饮食甚至成为娱乐的一部分,关于吃的流行用语层出不穷,可见在当今 ...

随机推荐

  1. 73th LeetCode Weekly Contest Domino and Tromino Tiling

    We have two types of tiles: a 2x1 domino shape, and an "L" tromino shape. These shapes may ...

  2. Spring对数据库的操作

    Spring结合Hibernate                   HibernateTemplate http://www.jb51.net/article/41541.htm //////// ...

  3. 自定义xml spring bean

    一. xml中bean解析过程 扫描META-INF下面的 spring.schemas  bean定义对应的xsd位置,在IDEA中可以辅助校验) spring.handlers   xmlns对应 ...

  4. sql新增字段注意事项

    新增字段的类型.长度(精度)是否合适 解决方法: 跟应用明确加字段和改字段的风险,确认新增字段类型正确.长度(精度)合适. 以及跟应用明确老数据是否要订正?如何订正?新增列是否非空?是否有默认值等等. ...

  5. Docker最全教程之使用PHP搭建个人博客站点（二十二）

    目录 官方镜像  编写简单的Hello world! 1. 编写Hello world! 2. 编写Dockerfile 3. 构建并运行 4. 直接使用PHP Docker镜像运行PHP脚本 构建自 ...

  6. Android模拟器使用SD卡

    在Android的应用开发中经常要用到与SD卡有关的调试,本文就是介绍关于在Android模拟器中SD卡的使用 一.      准备工作 在介绍之前首先做好准备工作,即配好android的应用开发环境 ...

  7. 在Controller方法执行之前进行捕获请求，进行类型的转换

    @ExceptionHandler(TypeMismatchException.class) public ModelAndView ParseException(Excetion ex,HttpSe ...

  8. wepy-cli 开发小程序如何使用vant组件

    同样使用wepy-cli快速生成的小程序,目前可以使用组件: 直接通过 git 下载 Vant Weapp 源代码,并将dist目录拷贝到自己的项目中 git clone https://github ...

  9. RabbitMQ 消息的可靠投递

    mq 提供了两种方式确认消息的可靠投递 confirmCallback 确认模式 returnCallback 未投递到 queue 退回模式 在使用 RabbitMQ 的时候,作为消息发送方希望杜绝 ...

  10. 微信小程序：点击预览图片

    在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...