您好,登錄后才能下訂單哦!
Vue中如何正確使用Element-UI組件?相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。
一、CDN
目前可以通過 unpkg.com/element-ui 獲取到最新版本的資源,在頁面上引入 js 和 css 文件即可開始使用。
<!-- 引入樣式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入組件庫 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
二、npm安裝
1、打開終端(開發工具中打開或(win+r)后輸入cmd進入)
2、進入到對應的項目中
例:
3、輸入vue add element
后回車,等待一小會
4、它會提示你是全局引入(Fully import)還是按需引入(Import on demand),選擇 Fully import 回車即可
5、然后會提示(輸入 N 回車即可)
6、然后會提示你選擇語言,選擇 zh-CN 回車即可
7、引入完成(在src目錄下會新增一個plugins文件夾和element.js文件)
三、測試是否成功引入
1、在main.js文件中引入element.js
import './plugins/element.js'
在.vue文件中輸入<el-button>el-button</el-button>
最后 npm run serve
運行項目,若結果顯示出下圖的按鈕效果則表示引入成功!
看完上述內容,你們掌握Vue中如何正確使用Element-UI組件的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。