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. JavaScript专题（二）闭包

    前言 - ES6 之前,JS没有块级作用域,只有全局作用域和函数作用域 用了许久ES6,春招在即,重写下博文. 还是讲讲闭包.我们要知其然,知其所以然. 仿佛大众情人一般,很多前端面试官都会问一问,说 ...

  2. Angular2.0的学习（三）

    第三节课:依赖注入 1.什么是依赖注入模式及使用依赖注入的好处 2.介绍Angular的依赖注入实现:注入器和提供器 3.注入器的层级结构

  3. CodeForces - 95B

    Petya loves lucky numbers. Everybody knows that positive integers are lucky if their decimal represe ...

  4. CentOS-7.5 解决ifconfig报错

    1.报错信息:-bash: ifconfig: command not found   2.检查IP地址是否设置正常 ip addr 以上说明ip设置正常,如果没有获取到IP地址则设置一个即可,设置i ...

  5. webpack webpack-dev-server报错

    Error: getaddrinfo ENOTFOUND localhost at errnoException (dns.js:28:10) at GetAddrInfoReqWrap.onlook ...

  6. sublime 常用快捷键(转)

    Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键 ...

  7. 【Java/Android性能优5】 Android ImageCache图片缓存，使用简单，支持预取，支持多种缓存算法，支持不同网络类型，扩展性强

    本文转自:http://www.trinea.cn/android/android-imagecache/ 主要介绍一个支持图片自动预取.支持多种缓存算法.支持二级缓存.支持数据保存和恢复的图片缓存的 ...

  8. 浏览器兼容圆角Border-radius的问题

    圆角css代码:border-radius只有在以下版本的浏览器:Firefox4.0+.Google Chrome 10.0+.Opera 10.5+.IE9+支持border-radius标准语法 ...

  9. nmap --script http-enum,http-headers,http-methods,http-php-version -p 80 目标域

    从http服务器上收集到更多地信息 nmap --script http-enum,http-headers,http-methods,http-php-version  -p 80 目标域

  10. JSP注释格式

    一.JSP注释格式来源 JSP是Sun Microsystems公司制定的一种服务器端动态网页技术的组件规范,其主体由HTML.CSS.JavaScript和Java拼凑组成. 正是因为JSP是一种组 ...