vue3(optionApi)使用Element Plus库没有效果的解决方式

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

这篇文章主要介绍了vue3(optionApi)使用Element Plus库没有效果的解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3使用Element Plus库没有效果

使用之前当然要先下载Element Plus

使用npm安装：

#先把npm镜像改为国内的
npm install -g cnpm --registry=https://registry.npm.taobao.org
 
#然后再下载就会快上许多
cnpm install element-plus --save

使用yarn安装（个人感觉更喜欢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

开始使用：

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

但是却发现浏览器给的效果是这样的：

解决方案

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

效果是一样的：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 中swiper的使用教程
本文通过实例代码给大家介绍了vue 中swiper的使用，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-05-05
vue.js路由的基本使用方式
VueRouter是Vue.js的官方路由插件,用于实现单页应用的页面切换和导航,通过安装、配置路由规则、定义路由组件和使用&lt;router-link>、&lt;router-view>标签
2025-01-01
element-ui自定义表格如何给input双向绑定数据
这篇文章主要介绍了element-ui自定义表格如何给input双向绑定数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue element商品列表的增删改功能实现
这篇文章主要介绍了Vue+element 商品列表、新增、编辑、删除业务实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
在Vue项目中封装axios的最新方法
这篇文章介绍了axios的基本使用和封装方法,包括设置接口请求前缀、请求头和超时时间、封装请求方法、添加请求和响应拦截器,封装axios可以提高代码质量和可维护性,需要的朋友可以参考下
2025-02-02
vue项目接口访问地址设置方式
这篇文章主要介绍了vue项目接口访问地址设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue+echarts实现条纹柱状横向图
这篇文章主要为大家详细介绍了vue+echarts实现条纹柱状横向图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue实现配置全局访问路径头(axios)
今天小编就为大家分享一篇vue实现配置全局访问路径头(axios)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Element-ui upload上传文件限制的解决方法
这篇文章主要介绍了Element-ui upload上传文件限制的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
Vue3中Element Plus Table(表格)点击获取对应id方式
这篇文章主要介绍了Vue3中Element Plus Table(表格)点击获取对应id方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10