Mint UI文檔

時間 2019-12-11

標籤 mint 文檔简体版

原文原文鏈接

Mint UI文檔：http://elemefe.github.io/mint-ui/#/javascript

1、Mint UI的安裝和基本用法。css

1.NPM :npm i mint-ui -S
建議使用npm進行安裝，由於它能夠與webpack無縫協做。
2.CDN:從unpkg.com/mint-ui獲取最新版本，並在您的頁面中導入JavaScript和CSS文件html

<!-- 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頁面。vue









<!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>

關於事件處理程序java

在Vue 2.0中，要在組件上偵聽本機DOM事件，您須要使用.native修飾符：webpack

<my-component @click.native="handleClick">Click Me</my-component>
爲了便於使用，咱們處理了Button組件，以便它能夠監聽click事件：git

<mt-button @click="handleButtonClick">Click Me</mt-button>
可是對於其餘組件，.native仍然須要修改器。github

快速開始：web

使用vue-clivue-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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。