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)站快速成型。

Element Ui組件官網(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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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