Element-ui的使用教程 基于HBuilder X

文章目录

1.Element-ui简介

Element,一套为开发者、设计师和产品经理准备的基于 Vue 的桌面端组件库

element-ui官网地址

https://element-plus.org/zh-CN/guide/installation.html

2.使用HBuilderX 创建一个基于Vue3的项目 (由于是使用的基于Vue3的Element-ui)

HBuilderX 安装 自行百度

3.安装element-ui

在HBuilderX 打开控制台界面 输入如下命令 执行安装

bat 复制代码
npm install element-plus --save

4.在项目里完全引用element-ui

修改main.js文件添加如下代码

javascript 复制代码
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

5.引用组件

这里以button 按钮为例

标签是

html 复制代码
    <div class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <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>

修改App.vue文件 添加一组按钮到页面上

html 复制代码
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
  
    <div class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <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>

6.运行项目

bat 复制代码
npm  run dev

结果如图所示

相关推荐
make4 分钟前
AI 流式请求工具函数 (通义千问)
前端·javascript
作曲家种太阳6 分钟前
加餐-Vue3的渲染系统流程解说【手摸手带你实现一个vue3】
前端
前端太佬12 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
京东零售技术20 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
前端大白话36 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys38 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话40 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村1 小时前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg50171 小时前
Vue回调函数中的this
前端·javascript·vue.js
程序猿大波1 小时前
基于Java,SpringBoot,Vue,HTML宠物相亲配对婚恋系统设计
java·vue.js·spring boot