Vue前端整合Element?Ui的教程詳解
更新時間：2022年07月06日 12:18:42 作者：*豬耳朵*
這篇文章主要介紹了Vue前端整合Element?Ui,本節(jié)內(nèi)容服務(wù)于SpringBoot?+?Vue?搭建?JavaWeb?增刪改查項目，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
Vue前端整合Element Ui
本節(jié)內(nèi)容服務(wù)于SpringBoot + Vue 搭建 JavaWeb 增刪改查項目。
Element UI 是一套采用 Vue 2.0 作為基礎(chǔ)框架實現(xiàn)的組件庫，一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的組件庫，提供了配套設(shè)計資源，幫助網(wǎng)站快速成型。
1.安裝Element Ui組件庫
WIN+R輸入CMD（必須以管理員身份運行）定位到vue項目生成位置后輸入：
npm i element-ui -S
安裝element-ui。
也可以在IDEA中打開Terminada進行安裝;
同時在vue項目的package.json中依賴出現(xiàn)Element Ui：
dependencies": {
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
"vue": "^2.6.14",
"vue-router": "^3.5.1"
},
2.測試Element Ui是否整合成功
打開vue項目main.js文件引入Element Ui：
直接復(fù)制以下內(nèi)容直接替換即可
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
// 設(shè)置控件大小為mini
Vue.use(ElementUI,{ size: "mini" });
new Vue({
router,
render: h => h(App)
}).$mount('#app');在Home.vue中添加一個按鈕進行測試：
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
<h1>{{title}}</h1>
<el-button type="primary>{{message}}</el-button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
},
data(){
return{
title:"cjw-demo",
message: "測試按鈕"
}
}
}
</script>
在IDEA的Terminal中輸入
npm run serve
啟動vue項目，也可以通過CMD命令行（以管理員身份運行）啟動；
啟動成功后在瀏覽器中輸入
http://localhost:8080/
查看測試按鈕：
Vue前端頁面整合Element Ui成功！ ！ ！
到此這篇關(guān)于Vue前端整合Element Ui的文章就介紹到這了,更多相關(guān)Vue整合Element Ui內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3如何優(yōu)雅的實現(xiàn)移動端登錄注冊模塊
這篇文章主要給大家介紹了關(guān)于vue3如何優(yōu)雅的實現(xiàn)移動端登錄注冊模塊的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了解決VantUI popup 彈窗不彈出或無蒙層的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在Vue3項目中實現(xiàn)頁面截圖的功能,可以通過使用js-web-screen-shot組件來實現(xiàn),本文以toolbox.js作為案例,詳細介紹了如何在Vue3框架下,利用js-web-screen-shot組件實現(xiàn)頁面截圖的具體步驟和方法,這一技術(shù)的應(yīng)用,不僅可以提高用戶體驗,還能在需要時方便地獲取頁面的即時信息2024-10-10
這篇文章主要為大家詳細介紹了vue父子組件進行通信方式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要給大家介紹了關(guān)于vue/cli安裝報錯及解決問題的方法,如果在安裝@vue/cli時遇到錯誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下2023-07-07
vue實現(xiàn)畫筆回放canvas轉(zhuǎn)視頻播放功能
這篇文章主要介紹了vue實現(xiàn)畫筆回放，canvas轉(zhuǎn)視頻播放功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue頁面骨架屏注入的操作，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導(dǎo)航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導(dǎo)航欄和面包屑功能,基于一個新建的Vue3項目上實現(xiàn)，本文結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue-cli腳手架的.babelrc文件用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了VUE.CLI4.0配置多頁面入口的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11