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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3如何優(yōu)雅的實(shí)現(xiàn)移動(dòng)端登錄注冊模塊
這篇文章主要給大家介紹了關(guān)于vue3如何優(yōu)雅的實(shí)現(xiàn)移動(dòng)端登錄注冊模塊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了解決VantUI popup 彈窗不彈出或無蒙層的問題。具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在Vue3項(xiàng)目中實(shí)現(xiàn)頁面截圖的功能,可以通過使用js-web-screen-shot組件來實(shí)現(xiàn),本文以toolbox.js作為案例,詳細(xì)介紹了如何在Vue3框架下,利用js-web-screen-shot組件實(shí)現(xiàn)頁面截圖的具體步驟和方法,這一技術(shù)的應(yīng)用,不僅可以提高用戶體驗(yàn),還能在需要時(shí)方便地獲取頁面的即時(shí)信息2024-10-10
這篇文章主要為大家詳細(xì)介紹了vue父子組件進(jìn)行通信方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue/cli安裝報(bào)錯(cuò)及解決問題的方法圖文詳解
這篇文章主要給大家介紹了關(guān)于vue/cli安裝報(bào)錯(cuò)及解決問題的方法,如果在安裝@vue/cli時(shí)遇到錯(cuò)誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)畫筆回放canvas轉(zhuǎn)視頻播放功能
這篇文章主要介紹了vue實(shí)現(xiàn)畫筆回放，canvas轉(zhuǎn)視頻播放功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue頁面骨架屏注入的操作，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄和面包屑功能,基于一個(gè)新建的Vue3項(xiàng)目上實(shí)現(xiàn)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue-cli腳手架的.babelrc文件用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
VUE.CLI4.0配置多頁面入口的實(shí)現(xiàn)
這篇文章主要介紹了VUE.CLI4.0配置多頁面入口的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11