Vue前端整合Element Ui的教程詳解
Vue前端整合Element Ui
本節內容服務於SpringBoot + Vue 搭建 JavaWeb 增刪改查項目。
Element UI 是一套采用 Vue 2.0 作為基礎框架實現的組件庫,一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的組件庫,提供瞭配套設計資源,幫助網站快速成型。
Element Ui組件官網
1.安裝Element Ui組件庫
WIN+R輸入CMD(必須以管理員身份運行)定位到vue項目生成位置後輸入:
npm i element-ui -S
安裝element-ui。
也可以在IDEA中打開Terminada進行安裝;
同時在vue項目的package.json中依賴出現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:
直接復制以下內容直接替換即可
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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3容器佈局和導航路由實現示例
- vue3集成Element-plus實現按需自動引入組件的方法總結
- element-plus中如何實現按需導入與全局導入
- vue+tp5實現簡單登錄功能
- vite+vue3.0+ts+element-plus快速搭建項目的實現