首页 > 其他分享 >Vue3 引入 Element Plus

Vue3 引入 Element Plus

时间:2023-09-26 17:37:59浏览次数:30  
标签:Element 组件 Plus Vue3 引入 import

Element Plus简介
Element Plus是一个基于Vue3的UI组件库,其设计原则可分为一致(Consistency)、反馈(Feedback)、效率(Efficiency)、可控(Controllability)四个方面。

目前Element Plus可使用的UI组件种类丰富,除了按钮、边框、icon等基本组件,还可以在项目中引入表单组件、数据展示组件、导航、反馈组件进行使用。
 

在 Vue3 项目中引入 Element Plus

注:由于需要使用包管理器引入Element Plus,在正式引入前先确认本机已经下载好相关的包管理器,才能进行后续步骤。

       比如使用 npm安装 Element Plus,需要先在电脑上完成node.js的安装,再对项目进行Element Plus的安装

在项目中打开终端,输入以下指令(npm):

npm install element-plus --save

然后就可以在项目中使用Element Plus了。

完整引入

对打包后文件的大小没有限制时,直接使用完整引入更方便。完整引入代码如下:

//以下代码来自Element Plus官网
 
// main.js
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')

 

标签:Element,组件,Plus,Vue3,引入,import
From: https://www.cnblogs.com/hailexuexi/p/17730724.html

相关文章

  • vue3 + mark.js | 实现文字标注功能
    页面效果具体实现新增1、监听鼠标抬起事件,通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。2、通过选中的文字长度是否大于0或window.getSelection().isCollapsed(返回一个布尔值用于描述选区的起始点和终止点是否位于一个位置,即是否框选了)来......
  • Mybatis-plus mybatis流式查询
    传统查询是一次性取出所有数据然后处理,对上百万的数据突出两个问题:1.处理时间长,阻塞数据库IO;2.一次性占用内存多,易OOM;流式查询则使用数据库游标,查一行处理一行,消耗内存较少,不阻塞数据库IO,在大数据处理场景中推荐使用。/***(Order)表数据库访问层**@authorliudong......
  • element ui 的picker-option 30天前限制和30天后限制
    pickerOptionsStart:{disabledDate:(time)=>{//获取当前日期并减少30天//console.log(time,'..........tiem');//console.log(time,'..........tiem');if(this.endDate!=''){//co......
  • vue3 模糊搜索 不区分大小写 多选框 element plus
    ```javascript<divclass="select-part"ref="selectRef"><divclass="check-type"><inputtype="text"class="check-type-title":placeholder="placeholder"@focus="onFo......
  • Vue3 组件基础:轻松掌握前端开发新技能!
    基本实例这里有一个Vue组件的示例://创建一个Vue应用constapp=Vue.createApp({})//定义一个名为button-counter的新全局组件app.component('button-counter',{data(){return{count:0}},template:`<button@click="count++">......
  • Vue3-vite 按需引入Element-plus
    1.下载unplugin-vue-components,unplugin-auto-import包npmi-Dunplugin-vue-componentsunplugin-auto-import2.vite.config.js文件中配置1importAutoImportfrom'unplugin-auto-import/vite'2importComponentsfrom'unplugin-vue-components/vite�......
  • Mybatis-Plus 系列:简介和基本使用
    目录一、简介二、特性三、基本使用1、初始化数据库2、初始化工程3、精简SpringBoot相关日志一、简介官网:https://www.baomidou.comMyBatis-Plus是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,主要作用为简化开发、提高效率。二、特性无侵入:只做增强不做改......
  • 如何在vite+vue3中的html页面中使用变量?
    如何在vite+vue3中的html页面中使用变量?vite版本:4.1.5vue版本:3.2.47需要引入新的开发依赖:yarnaddvite-plugin-html-D修改vite.config.ts文件配置...//@ts-ignoreimport{createHtmlPlugin}from"vite-plugin-html";exportdefault({mode}:ConfigEnv):Us......
  • 使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理
    目录1、前言2、分析3、实现4、踩坑4.1、拖拽辅助线的坑4.2、数据的坑4.3、限制拖拽4.4、样式调整1、前言最近在做一个文件夹管理的功能,要实现一个树状的文件夹面板。里面包含两种元素,文件夹以及文件。交互要求如下:创建、删除,重命名文件夹和文件可以拖拽,拖拽文件到文件夹中,或......
  • Vue3 基础 – 快速上手 & 常用指令
    1.在HTML网页中使用vue3的3个基本步骤a.通过 script 标签的 src 属性,在当前网页中全局引入vue3的脚本文件:<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script>b.创建vue3的单页面应用程序实例://2.1从Vue对象中解构出createApp函数const{cre......