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

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

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

vue3使用Element Plus庫沒有效果

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

網(wǎng)址：element安裝

使用npm安裝：

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

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

#先把npm鏡像改為國內(nèi)的
npm install -g cnpm --registry=https://registry.npm.taobao.org
 
#然后用cnpm安裝yarn
cnpm install -g yarn
 
#把yarn鏡像改為國內(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實(shí)現(xiàn)點(diǎn)擊展開點(diǎn)擊收起效果
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊展開,點(diǎn)擊收起效果，首先我們需要定義data里面的數(shù)據(jù)，使用computed對data進(jìn)行處理,需要的朋友可以參考下
2018-04-04
一文詳解如何在Vue3中使用jsx/tsx
本篇文章旨在帶領(lǐng)大家快速了解和使用?Vue?中的?JSX?語法,好讓大家在?Vue?中遇到或使用?JSX?的時(shí)候能很快入手，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03
proxy代理不生效以及vue?config.js不生效解決方法
在開發(fā)Vue項(xiàng)目過程中,使用了Proxy代理進(jìn)行數(shù)據(jù)劫持,但是在實(shí)際運(yùn)行過程中發(fā)現(xiàn)代理并沒有生效,也就是說數(shù)據(jù)并沒有被劫持,這篇文章主要給大家介紹了關(guān)于proxy代理不生效以及vue?config.js不生效解決方法的相關(guān)資料,需要的朋友可以參考下
2023-11-11
詳解一次Vue低版本安卓白屏問題的解決過程
這篇文章主要介紹了詳解一次Vue低版本安卓白屏問題的解決過程,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情
這篇文章主要介紹了vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue2.0在table中實(shí)現(xiàn)全選和反選的示例代碼
這篇文章主要介紹了vue2.0在table中實(shí)現(xiàn)全選和反選的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài)實(shí)例代碼
要求點(diǎn)擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài)。下面我給大家分享一段實(shí)例代碼基于vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài)，需要的的朋友參考下
2017-04-04
Vue使用NProgress的操作過程解析
這篇文章主要介紹了Vue使用NProgress的操作過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
vue2實(shí)現(xiàn)pdf電子簽章問題記錄
仿照e簽寶,實(shí)現(xiàn)pdf電子簽章?=>?拿到pdf鏈接,移動章的位置,獲取章的坐標(biāo),怎么實(shí)現(xiàn)呢,下面小編給大家介紹vue2實(shí)現(xiàn)pdf電子簽章問題記錄,感興趣的朋友一起看看吧
2023-12-12