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