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

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

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

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安裝（個人感覺更喜歡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')

解決后的效果：

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

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>

效果是一樣的：