Mint UI 安裝-Install

2022-11-29 09:16 更新

npm 安裝

推薦使用 npm 的方式安裝,它能更好地和 webpack 打包工具配合使用。

npm i mint-ui -S

CDN

目前可以通過 unpkg.com/mint-ui 獲取到最新版本的資源,在頁面上引入 js 和 css 文件即可開始使用。

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui@2.2.13/lib/style.css">
<!-- 引入組件庫 --> <script src="https://unpkg.com/mint-ui@2.2.13/lib/index.js"></script>

Hello world

通過 CDN 的方式我們可以很容易地使用 Mint UI 寫出一個 Hello world 頁面。

實例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<!-- 引入樣式 -->

<link rel="stylesheet" rel="external nofollow" target="_blank" >

</head>

<body>

<div id="app">

<mt-button @click.native="handleClick">

按鈕

</mt-button>

</div>

</body>

<!-- 先引入 Vue -->

<script src="https://unpkg.com/vue/dist/vue.js" rel="external nofollow" >

</script>

<!-- 引入組件庫 -->

<script src="https://unpkg.com/mint-ui/lib/index.js" rel="external nofollow" >

</script>

<script>

new Vue({ el: '#app', methods: { handleClick: function() { this.$toast('Hello world!') } } })

</script>

</html>


嘗試一下 ?

如果是通過 npm 安裝,并希望配合 webpack 使用,請閱讀下一節(jié):快速上手


關(guān)于事件綁定

Vue 2.0 中,為自定義組件綁定原生事件必須使用 ?.native? 修飾符:

<my-component @click.native="handleClick">Click Me</my-component>

從易用性的角度出發(fā),我們對 ?Button? 組件進行了處理,使它可以監(jiān)聽 ?click? 事件:

<mt-button @click="handleButtonClick">Click Me</mt-button>

但是對于其他組件,還是需要添加 ?.native? 修飾符。


實例演示

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號