瑕佷娇鐢╡lement鎻掍欢锛屾偍闇€瑕佸畬鎴愪互涓嬫楠わ細

1. 棣栧厛锛屾偍闇€瑕佸湪HTML鏂囦欢涓紩鍏lement鎻掍欢鐨凜SS鍜孞avaScript鏂囦欢銆傛偍鍙互浠巈lement瀹樻柟缃戠珯锛坔ttps://element.eleme.io/锛変笅杞借繖浜涙枃浠讹紝鎴栬€呮偍涔熷彲浠ヤ娇鐢–DN閾炬帴杩涜寮曞叆銆備緥濡傦細

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 鍦╒ue椤圭洰涓紝鎮ㄩ渶瑕佸湪main.js鏂囦欢涓敞鍐宔lement鎻掍欢銆傚彲浠ヤ娇鐢╒ue.use()鏂规硶鏉ュ畬鎴愭敞鍐屻€?/li>

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 鍦ㄦ偍鐨刅ue缁勪欢涓紝鎮ㄥ彲浠ヤ娇鐢╡lement鎻愪緵鐨勫悇绉嶇粍浠躲€備緥濡傦紝濡傛灉鎮ㄦ兂浣跨敤涓€涓寜閽粍浠讹紝鎮ㄥ彲浠ュ湪妯℃澘涓坊鍔犱互涓嬩唬鐮侊細

<template>
  <el-button>{{ buttonText }}</el-button>
</template>

<script>
export default {
  data() {
    return {
      buttonText: 'Click me'
    }
  }
}
</script>

4. 杩愯鎮ㄧ殑Vue椤圭洰锛屽苟鏌ョ湅缁撴灉銆傛偍搴旇鍙互鐪嬪埌涓€涓甫鏈夆€淐lick me鈥濇枃瀛楃殑鎸夐挳銆?/li>

杩欏彧鏄痚lement鎻掍欢浣跨敤鐨勫熀鏈楠ゃ€傛偍鍙互鍦╡lement瀹樻柟鏂囨。锛坔ttps://element.eleme.io/#/en-US锛変腑鎵惧埌鏇村鐨勭粍浠跺拰鐢ㄦ硶銆?/p>