Vue前端整合Element?Ui的教程詳解
更新時間：2022年07月06日 12:18:42 作者：*豬耳朵*
這篇文章主要介紹了Vue前端整合Element?Ui,本節(jié)內(nèi)容服務于SpringBoot?+?Vue?搭建?JavaWeb?增刪改查項目，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
Vue前端整合Element Ui
本節(jié)內(nèi)容服務于SpringBoot + Vue 搭建 JavaWeb 增刪改查項目。
Element UI 是一套采用 Vue 2.0 作為基礎框架實現(xiàn)的組件庫，一套為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的組件庫，提供了配套設計資源，幫助網(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：
直接復制以下內(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;
// 設置控件大小為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成功！ ！ ！
到此這篇關于Vue前端整合Element Ui的文章就介紹到這了,更多相關Vue整合Element Ui內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
淺談vue項目用到的mock數(shù)據(jù)接口的兩種方式
這篇文章主要介紹了淺談vue項目用到的mock數(shù)據(jù)接口的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了vue項目從node8.x升級到12.x后的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
利用Vue模擬實現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細介紹了如何利用Vue模擬實現(xiàn)element-ui的分頁器效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下2022-11-11
Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能(推薦)
在elementui Input輸入框中可以找到遠程搜索組件，獲取服務端的數(shù)據(jù)。這篇文章主要給大家介紹Vue el-autocomplete遠程搜索下拉框并實現(xiàn)自動填充功能，感興趣的朋友一起看看吧2019-10-10
watch和computed都是以Vue的依賴追蹤機制為基礎的,當某一個依賴型數(shù)據(jù)發(fā)生變化的時候,所有依賴這個數(shù)據(jù)的相關數(shù)據(jù)會自動發(fā)生變化,即自動調(diào)用相關的函數(shù),來實現(xiàn)數(shù)據(jù)的變動，這篇文章簡單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧2022-12-12
這篇文章主要介紹了修改vue源碼實現(xiàn)動態(tài)路由緩存的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
Vue3為我們開發(fā)提供了兩種組件邏輯實現(xiàn)方式：選項式API和組合式API,本文將嘗試為大家分析什么是選項式API和組合式API,以及兩種API的優(yōu)缺點,希望對大家有所幫助2023-12-12
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-08-08
Vue.js結合bootstrap前端實現(xiàn)分頁和排序效果
這篇文章主要為大家詳細介紹了Vue.js結合bootstrap 前端實現(xiàn)分頁和排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue雙向綁定及觀察者模式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03