Mint UI文档
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
