vue3+Vite项目中引入Element plus组件库及基本使用步骤

一、Element Plus组件库介绍

      Element Plus组件库饿了么团队为Vue3发布的组件库,它含有丰富的样式,该组件的官网:element-plus

二、Element Plus组件安装

        (1)通过vscode打开创建的vue项目,本文的项目名称为“shop-admin”,打开项目后,打开项目终端,其截图如下所示。

      (2)在终端窗口输入如下命令行进行安装element-plus组件库。其中安装截图如下所示。

npm install element-plus --save

项目中增加element-plus组件库成功代码体现在文件“package.json”中,代码如下所示

{
  "name": "shop-admin",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.7.5",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.0"
  }
}

(3)通过在src/main.js文件中修改如下代码,完成真个项目中可以ElementPlus组件,具体代码如下。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')

(4)在App.vue文件中使用ElementPlus组件中的按钮,代码如下所示

<script setup> 
</script>
<template>
   <div class="mb-4">    
   
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
</template>

<style scoped>
 
</style>

(5)运行结果如下图所示

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

计算机软件大师

您的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值