首页 > 其他分享 >前端_vue3引入Element-plus

前端_vue3引入Element-plus

时间:2022-10-11 18:14:38浏览次数:74  
标签:vue app element plus vue3 import Element App

element-plus官网:https://element-plus.gitee.io/zh-CN/component/button.html

1、安装element-plus

npm install element-plus -D

2、在index.js中导入element-plus

import { createApp } from 'vue'

// 引入element-plus
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"

import App from "./App.vue"
const app = createApp(App)

// 使用element-plus
app.use(ElementPlus)

app.mount("#app")

3、在app.vue文件中写入下面button的标签

<template>
    <el-row 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>
    </el-row>
</template>
   
<script>
</script>

<style>
</style>

4、打开页面查看展示效果

 

标签:vue,app,element,plus,vue3,import,Element,App
From: https://www.cnblogs.com/testlearn/p/16780078.html

相关文章

  • Element UI-实现树形控件单选
    ElementUI-实现树形控件单选1.单选功能elementui中的树形可以设置checkbox,但是不能设置radio的单选功能但官方提供了自动勾选方法:想实现单选只需要给node增加点......
  • elementUI Tree 树形控件实现单选+获取树形控件单选框勾选内容
    elementUITree树形控件实现单选+获取树形控件单选框勾选内容  html部分<el-tree:data="data"show-checkbox......
  • MyBatis-Plus个人笔记
    第一章MyBatis-Plus入门1)MP简介官方地址:http://mp.baomidou.com代码发布地址:Github:https://github.com/baomidou/mybatis-plusGitee:https://gitee.com/baomi......
  • vue3中tab详情页多开keepalive根据key去动态缓存与清除缓存
    一.场景由于存在tab栏,当从查询页面点击列表进入详情时,需求是详情页都会新开一个tab,并缓存,tab中的切换不会重新加载详情页数据,但是关闭一个详情tab,再次从查询页点击这条详......
  • Mybatis-Plus实现分页
    1、导入maven依赖springboot版本2.7.3<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</art......
  • Vue3的模板语法
    1.插值语法1.1基本使用点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • 使用CDN方式引用Vue3和ElementPlus
    使用CDN方式引用Vue3和ElementPlus​​引用Vue​​​​代码​​​​注意事项​​​​Elementplus​​​​代码​​​​注意事项​​升级了之前做的vue2+ElementUI的项目,......
  • 使用element ui的el-upload组件上传图片,记录一下
    使用elementui的el-upload组件上传图片效果预览下面是实现效果,接口方面是把有两个接口,一个接口上传图片,传参是图片和路径,返回值是路径。另一个接口是上传表单内容(用户,......
  • VUE自学日志00-Vue3安装
    目录#1.发布版本说明#2.VueDevtools#3.CDN#4.下载并自托管#5.npm#6.命令行工具(CLI)#7.Vite#8.对不同构建版本的解释#8.1.使用CDN或没有构建工具#vue(.runtime).global......
  • 29. JS Element对象(元素对象)
    1.前言通过《文档对象模型》一节的学习我们知道,当网页加载时,浏览器就会自动创建当前页面的文档对象模型(DOM),并将文档的所有部分(例如元素、属性、文本等)组织成一个逻辑树结......