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. 华东交通大学2017年ACM“双基”程序设计竞赛 1010

    Problem Description 定义操作:将数 n 变为 f(n) = floor(sqrt(n)).即对一个数开平方后,再向下取整.如对 2 进行一次操作,开平方再向下取整, 1.41421 ...

  2. Hadoop实战：微博数据分析

    项目需求 自定义输入格式,将明星微博数据排序后按粉丝数 关注数 微博数 分别输出到不同文件中. 数据集 下面是部分数据,猛戳此链接下载完整数据集 数据格式: 明星   明星微博名称    粉丝数    ...

  3. vs2017通过snippet代码片断进行标准化注释

    我们在进行团队开发时,类的注释已经可以做到自定义了,详细看上篇文章<vs2017通过模块文件添加自定义注释>,而对于方法的注释,我们也需要完善一下,这里我们用到了“代码片断”插件,VS里有 ...

  4. Mysql 如何设置字段自动获取当前时间，附带添加字段和修改字段的例子

    --添加CreateTime 设置默认时间 CURRENT_TIMESTAMP  ALTER TABLE `table_name`ADD COLUMN  `CreateTime` datetime N ...

  5. C 碎片八 结构体&枚举&联合

    一.结构体 1, 结构体定义 结构体类型的定义:任意数据类型变量的集合.用于描述一个具体的事物的信息,在C语言中描述一件事物一般都是用结构体 声明结构体类型的格式: struct  结构体名 {成员列 ...

  6. Js常见算法实现汇总

    /*去重*/ <script> function delRepeat(arr){ var newArray=new Array(); var len=arr.length; for(var ...

  7. FRM-92050错误

    使用IE8在打开EBS Form界面时,窗口提示信息“Internet Explorer 已对此页面进行了修改,以帮助阻止跨站脚本.单击此处,获取详细信息...”或者R12 IE8中出"FR ...

  8. git 初始化仓库与远程clone

    使用命令 git –bare init /home/git/myRep.git,初始化化仓库 在gitClient_01上,通过git clone命令进行克隆远程仓库,并在各自的电脑上运行开发. Gi ...

  9. 【Oracle】曾经的Oracle学习笔记（1-3） 数据库常见用语，常见命令，创建测试表

    一.数据库的登录 二.数据库常用语 三.测试表的创建,测试数据初始化 四.常见命令介绍 五.测试 user:jeffreysn:jeffrey user:systemsn:jeffrey 浏览器中输入 ...

  10. restesay部署学习过程中遇到的问题

    Exception starting filter org.jboss.resteasy.plugins.serer.servlet.Filter30Dispatcherjava.lang.Class ...