Solve vue3 (optionApi) using Element Plus library has no effect

Of course you must download Element Plus before using it

URL : element installation

Install using npm:

#先把npm镜像改为国内的
npm install -g cnpm --registry=https://registry.npm.taobao.org

#然后再下载就会快上许多
cnpm install element-plus --save

Install using yarn (personally I prefer yarn):

#先把npm镜像改为国内的
npm install -g cnpm --registry=https://registry.npm.taobao.org

#然后用cnpm安装yarn
cnpm install -g yarn

#把yarn镜像改为国内的
yarn config set registry https://registry.npm.taobao.org/

#然后再用yarn下载
yarn add element-plus

start using:

<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>

But I found that the effect given by the browser is like this:

 Solution (just add import 'element-plus/theme-chalk/index.css' to the main.js file):

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

The result after the solution:

In fact, you can also import all the components you want to use directly in main.js, and you won’t need to import files one by one later:

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')

The file used can be written like this:

<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>

The effect is the same:

 

I know it might be a bit long-winded. It’s just one sentence, so I have to go into so much detail. It’s my first time blogging, so please don’t complain!