解決vue3使用element-ui的具體操作
目前element-ui支持vue2版本，有一些組件在vue3中無(wú)法使用，這時(shí)候我們需要導(dǎo)入element-plus結(jié)合vue3開(kāi)發(fā)
具體操作
1.首先安裝element-ui
npm install element-ui --save
這里為什么要安裝element-ui，我也不清楚，但是我一旦只安裝element-plus，不安裝element-ui就會(huì)報(bào)錯(cuò)，這里建議安裝，或者不安，出問(wèn)題了，再安裝也可
2.安裝element-plus
npm install element-plus --save
3.修改main.js文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app')
添加
import ElementPlus from 'element-plus'; import 'element-plus/theme-chalk/index.css'; import locale from 'element-plus/lib/locale/lang/zh-cn'
并且使用導(dǎo)入的函數(shù)模型
createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app')這樣基本就可以了
比如解決el-table獲取當(dāng)前行的值的問(wèn)題
<el-table :data="list" border style="width: 66%" class="tableel12">
<el-table-column prop="tradeId" label="序號(hào)" width="180" />
<el-table-column prop="stockHolderId" label="股民id" width="180" />
<el-table-column prop="bankCardId" label="卡號(hào)" />
<el-table-column prop="addedMoney" label="交易金額" />
<el-table-column prop="state" label="狀態(tài)" />
<el-table-column prop="type" label="操作股票方式" />
<el-table-column label="重傳">
<template #default="scope">
<el-button type="primary" @click="update2(scope.row.tradeId,scope.row.state)"
>重傳</el-button
>
<!-- <el-button link type="primary" size="small">Edit</el-button> -->
</template>
</el-table-column>
</el-table>如果使用element-ui官方文檔中的方式，會(huì)出錯(cuò)的
補(bǔ)充：Vue3按需引入ElementUI
這里記錄下新構(gòu)建的項(xiàng)目按需引入ElementUI
1、npm install --save element-ui
2、npm install babel-plugin-component -D
3、在 babel.config.js文件里如下圖
module.exports = {
presets: [
"@vue/cli-plugin-babel/preset",//這行是默認(rèn)有的，其余是要加的。
["@babel/preset-env", { modules: false }],//之前第一項(xiàng)寫的是es2015,但是報(bào)錯(cuò)了，后來(lái)看了別的博主，發(fā)現(xiàn)因?yàn)閂ue版本太高了，寫es2015會(huì)出錯(cuò)。
],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk",
},
],
],
};
4、main.js文件中按需引入樣式
import { Button, Select } from "element-ui";
Vue.use(Button);
Vue.use(Select);接下來(lái)就可以在vue文件中寫了。
總結(jié)
到此這篇關(guān)于解決vue3使用element-ui的具體操作的文章就介紹到這了,更多相關(guān)vue3使用element-ui內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue?懶加載組件chunk相對(duì)路徑混亂問(wèn)題及解決
這篇文章主要介紹了vue?懶加載組件chunk相對(duì)路徑混亂問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目使用axios封裝request請(qǐng)求的過(guò)程
這篇文章主要介紹了vue項(xiàng)目使用axios封裝request請(qǐng)求，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
vue-cli的index.html中使用環(huán)境變量方式
這篇文章主要介紹了vue-cli的index.html中使用環(huán)境變量方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
一次Vue中computed沒(méi)有觸發(fā)的原因以及排查經(jīng)歷
這篇文章主要介紹了一次Vue中computed沒(méi)有觸發(fā)的原因以及排查經(jīng)歷,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)物流時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue監(jiān)聽(tīng)數(shù)據(jù)渲染DOM完以后執(zhí)行某個(gè)函數(shù)詳解
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)數(shù)據(jù)渲染DOM完以后執(zhí)行某個(gè)函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無(wú)法顯示的問(wèn)題
這篇文章主要介紹了Vue3解決ElementPlus自動(dòng)導(dǎo)入時(shí)ElMessage無(wú)法顯示的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了詳解vue2.0腳手架的webpack 配置文件分析，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue如何在多個(gè)不同服務(wù)器下訪問(wèn)不同地址
這篇文章主要介紹了vue如何在多個(gè)不同服務(wù)器下訪問(wèn)不同地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Webpack 搭建 Vue3 開(kāi)發(fā)環(huán)境過(guò)程詳解
這篇文章主要介紹了使用Webpack 搭建 Vue3 開(kāi)發(fā)環(huán)境過(guò)程詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07