vue3(optionApi)使用Element Plus庫(kù)沒有效果的解決方式

更新時(shí)間：2024年03月20日 16:52:12 作者：xiaomaomixj

這篇文章主要介紹了vue3(optionApi)使用Element Plus庫(kù)沒有效果的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3使用Element Plus庫(kù)沒有效果

使用之前當(dāng)然要先下載Element Plus

網(wǎng)址：element安裝

使用npm安裝：

#先把npm鏡像改為國(guó)內(nèi)的
npm install -g cnpm --registry=https://registry.npm.taobao.org
 
#然后再下載就會(huì)快上許多
cnpm install element-plus --save

使用yarn安裝（個(gè)人感覺更喜歡yarn）：

#先把npm鏡像改為國(guó)內(nèi)的
npm install -g cnpm --registry=https://registry.npm.taobao.org
 
#然后用cnpm安裝yarn
cnpm install -g yarn
 
#把yarn鏡像改為國(guó)內(nèi)的
yarn config set registry https://registry.npm.taobao.org/
 
#然后再用yarn下載
yarn add element-plus

開始使用：

<template>
  <el-row>
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>
</template>
<script>
import { ElButton,ElRow } from 'element-plus'
export default {
        components:{
            ElButton,
            ElRow
        }
}
</script>

但是卻發(fā)現(xiàn)瀏覽器給的效果是這樣的：

解決方案

（在main.js文件中加入一句import 'element-plus/theme-chalk/index.css'就好了）：

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/theme-chalk/index.css'
let app=createApp(App)
app.mount('#app')

解決后的效果：

其實(shí)也可以直接在main.js把要用的組件都引好，到后面就不需要一個(gè)一個(gè)文件的引入了：

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/theme-chalk/index.css'
import { ElButton,ElRow } from 'element-plus'
let app=createApp(App)
app.use(ElButton,ElRow)
app.mount('#app')

使用的文件就可以這樣寫：

<template>
  <el-row>
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>
</template>
<script>
</script>

效果是一樣的：

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 中swiper的使用教程
本文通過實(shí)例代碼給大家介紹了vue 中swiper的使用，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-05-05
vue.js路由的基本使用方式
VueRouter是Vue.js的官方路由插件,用于實(shí)現(xiàn)單頁(yè)應(yīng)用的頁(yè)面切換和導(dǎo)航,通過安裝、配置路由規(guī)則、定義路由組件和使用&lt;router-link>、&lt;router-view>標(biāo)簽
2025-01-01
element-ui自定義表格如何給input雙向綁定數(shù)據(jù)
這篇文章主要介紹了element-ui自定義表格如何給input雙向綁定數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue element商品列表的增刪改功能實(shí)現(xiàn)
這篇文章主要介紹了Vue+element 商品列表、新增、編輯、刪除業(yè)務(wù)實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
在Vue項(xiàng)目中封裝axios的最新方法
這篇文章介紹了axios的基本使用和封裝方法,包括設(shè)置接口請(qǐng)求前綴、請(qǐng)求頭和超時(shí)時(shí)間、封裝請(qǐng)求方法、添加請(qǐng)求和響應(yīng)攔截器,封裝axios可以提高代碼質(zhì)量和可維護(hù)性,需要的朋友可以參考下
2025-02-02
vue項(xiàng)目接口訪問地址設(shè)置方式
這篇文章主要介紹了vue項(xiàng)目接口訪問地址設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue實(shí)現(xiàn)配置全局訪問路徑頭(axios)
今天小編就為大家分享一篇vue實(shí)現(xiàn)配置全局訪問路徑頭(axios)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Element-ui upload上傳文件限制的解決方法
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10