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. xcode定期清理记录一下

    此文章仅适用于适用于使用Xcode的开发者. 长期不清理Xcode中的一些文件你会发现自己的mac硬盘越来越小,而且是这个其他占了绝大部分的硬盘,在网上搜索了很多办法都没找到如何清理这些其他 后来来来 ...

  2. 调试JMETER脚本的5种方法

    如果你曾经设计过JMeter脚本,我敢打赌你至少有一次弄清楚Json Extractor无法正常工作的原因.你猜怎么着?我去过那儿! 你知道为什么最好的JMeter Performance Engin ...

  3. 自增长 auto_increment

    auto_increment :自动编号,一般与主键组合使用.一个表里面只有一个自增默认情况下,起始值为1,每次的增量为1. 例子:create table tb5(    id int primar ...

  4. vue 生产模式

    vue.js 最后一行添加... Vue.config.productionTip = false;

  5. Linux--7

    一.Nginx.conf主配置文件 Nginx主配置文件conf/nginx.conf是一个纯文本类型的文件,整个配置文件是以区块的形式组织的.一般,每个区块以一对大括号{}来表示开始与结束. 核心模 ...

  6. centos7虚拟机安装

    Centos7 第1章 CENTOS 7 简介 1.1 centos的演变 启动流程sysvinit 串行启动:一次一个, 一个一个启动 并行启动:全部的一起启动 init优点 运行非常良好.主要依赖 ...

  7. leetcoe--47. Permutations II

    1.问题描述 Given a collection of numbers that might contain duplicates, return all possible unique permu ...

  8. (转)linux下文件删除的原理精华讲解（考试题答案系列）

    linux下文件删除的原理精华讲解(考试题答案系列) 说明:本文为老男孩linux培训某节课前考试试题及答案分享博文内容的一部分,也是独立成题的,你可以点下面地址查看全部的内容信息.http://ol ...

  9. jdbc 大数据存储 图片读取

    package com.itheima.clob.test; import java.io.File; import java.io.FileReader; import java.io.FileWr ...

  10. cocos

    cocos compile -p android --android-studio --app-abi=armeabi-v7a ./adb kill-server&& ./adb se ...