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. Migrations中的更新语句写法，摘要

    public override void Up() { AlterColumn("dbo.Dispositions", "Property1", c => ...

  2. 练习二十二：python兵乓求比赛顺序练习，关于连个兵乓球队进行比赛

    已知有两支兵乓球队进行比赛,每队各出3人: 甲队有a,b,c三人,乙队有x,y,z三人,已抽签决定比赛名单 问题:有人向队员打听比赛名单.a说他不和X比,c说他不和x,z比,程序找出比赛对手 方法一: ...

  3. JS——定时器

    定时器在JS中的作用: 1)制作动画.时钟.倒计时 2)异步操作 3)函数缓冲与节流 定时器类型: 1)setTimeout 只执行一次的定时器 2)clearTimeout 关闭只执行一次的定时器 ...

  4. Win7 桌面图标消失

    win7 桌面图标消失或任务栏也消失,可以按Ctrl+Shift+Esc键调出任务管理器,然后点击文件——新建任务,输入explorer.

  5. Android启动时闪一下黑屏或者白屏

    1.设定主题,此主题为透明的,加入到res/values/styles.xml中: <style name="Theme.AppStartLoadTranslucent" p ...

  6. 安全性测试入门 (五)：Insecure CAPTCHA 验证码绕过

    本篇继续对于安全性测试话题,结合DVWA进行研习. Insecure Captcha不安全验证码 1. 验证码到底是怎么一回事 这个Captcha狭义而言就是谷歌提供的一种用户验证服务,全称为:Com ...

  7. 如何去除Discuz标题栏中的Powered by Discuz!

    今天修改discuz代码遇到一个问题,就是标题栏中的Powered by Discuz!,很不美观.查资料后得到了解决方法!介绍给大家. 那么如何去掉标题里面的Powered by Discuz!呢? ...

  8. shell脚本之前的基础知识

    日常的linux系统管理工作中必不可少的就是shell脚本,如果不会写shell脚本,那么你就不算一个合格的管理员.目前很多单位在招聘linux系统管理员时,shell脚本的编写是必考的项目.有的单位 ...

  9. xmanger图形化登陆远程服务器

    由于网上的资料比较杂,经过本人整理实际操作验证,保证ok  本人的服务器系统为centos5.8 下面的都是centos服务器上的操作,需要简单的配置下: win客户端使用xmanger软件:首先是服 ...

  10. 介绍一个很好用的Rsa加解密的.Net库 Kalix.ApiCrypto

    Rsa非对称加密技术 这个就不说了,大家上网搜索都知道,公钥加密,私钥解密.当然大家也可以自己实现.这里就懒了,就去找一个现成的库,Nuget上搜索,GitHub上搜索,发现.Net的加解密库,下载量 ...