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
为了便于使用,我们处理了Button组件,以便它可以监听click事件:
<mt-button @click="handleButtonClick">Click Me
但是对于其他组件,.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