Mint-ui 鏄竴涓熀浜?Vue.js 鐨勭Щ鍔ㄧ缁勪欢搴擄紝鎻愪緵浜嗕赴瀵岀殑 UI 缁勪欢鍜屼赴瀵岀殑浜や簰鏁堟灉锛岄潪甯搁€傚悎寮€鍙戠Щ鍔ㄧ搴旂敤銆備笅闈㈡槸涓€涓畝鍗曠殑鎵嬫妸鎵嬫暀绋嬶紝鏁欎綘濡備綍浣跨敤 Mint-ui銆?/p>

姝ラ1锛氬畨瑁?Mint-ui

棣栧厛锛屼綘闇€瑕佸湪浣犵殑椤圭洰涓畨瑁?Mint-ui銆傛墦寮€缁堢锛岃繘鍏ヤ綘鐨勯」鐩洰褰曪紝骞舵墽琛屼互涓嬪懡浠わ細

npm install mint-ui --save

姝ラ2锛氬紩鍏?Mint-ui

鍦ㄤ綘鐨勯」鐩叆鍙ｆ枃浠讹紙涓€鑸槸 main.js锛変腑寮曞叆 Mint-ui锛?/p>

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

姝ラ3锛氫娇鐢?Mint-ui 缁勪欢

鐜板湪浣犲彲浠ュ湪浣犵殑 Vue 缁勪欢涓娇鐢?Mint-ui 鐨勭粍浠朵簡銆傛瘮濡傦紝浣犲彲浠ュ湪浣犵殑缁勪欢妯℃澘涓坊鍔犱竴涓寜閽粍浠讹細

<template>
<div>
<mt-button @click="onClick">鐐瑰嚮鎴?span class="hljs-tag"></mt-button>
</div>
</template>

姝ラ4锛氳繍琛岄」鐩?/p>

鐜板湪浣犲彲浠ヨ繍琛屼綘鐨勯」鐩紝鐪嬪埌浣犳坊鍔犵殑 Mint-ui 缁勪欢浜嗐€備綘鍙互鐐瑰嚮鎸夐挳锛岃Е鍙?onClick 鏂规硶銆?/p>

杩欏彧鏄竴涓畝鍗曠殑绀轰緥锛孧int-ui 鎻愪緵浜嗛潪甯镐赴瀵岀殑缁勪欢鍜屽姛鑳斤紝浣犲彲浠ユ牴鎹嚜宸辩殑闇€姹傦紝鏌ョ湅 Mint-ui 鐨勫畼鏂规枃妗ｏ紝浜嗚В鏇村鐨勭敤娉曞拰绀轰緥銆?/p>

甯屾湜杩欎釜绠€鍗曠殑鏁欑▼鑳藉府鍒颁綘锛?/p>