详解Vue3怎么使用element-plus

目录
  • 1、安装
  • 2、在main.js引入
  • 3、使用

vue3出来一段时间了，element也更新了版本去兼容vue3，在这里简单的介绍一下如何使用element-plus吧

1、安装

npm install element-plus --save

2、在main.js引入

import { createApp, Vue } 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')

3、使用

这里使用的是按钮

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

具体的可以查看官方文档

到此这篇关于Vue3怎么使用element-plus的文章就介绍到这了,更多相关Vue3怎么使用element-plus内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 利用vue-i18n实现多语言切换效果的方法

    前言 有些项目我们需要支持多种语言切换,满足国际化需求. vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化.本文主要介绍使用vue-i18n实现切换中英文效果. 安装vue-i18n 我们使用npm安装vue-i18n. npm install vue vue-i18n --save 引入vue-i18n 首先在 main.js 中引入 vue-i18n. import Vue from 'vue' import App from

  • vue项目实现多语言切换的思路

    Web 项目多语言(i18n,即国际化)是比较常见的需求,常规的做法大概有以下几种: 每种语言单独开发页面,适用于 CMS 之类的网站 多语言文本和页面结构分离,运行时动态替换.适用于单页应用(SPA) 直接用网页翻译插件,机器翻译.这种效果不太理想,同时有一些局限性(后面会讲到) 问题 每一种方案都有各自的优点和局限性,具体项目应该根据实际情况选择.最近在工作中碰到的需求是要在现有的项目基础上快速推出多语言版本.项目是基于 Vue.js 开发的,已经迭代过很多版本了.其实一开始是有规划多语言的

  • Vue中使用vue-i18插件实现多语言切换功能

    在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下: step1: 在项目中安装vue-i18插件 cnpm install vue-i18n --save-dev step2:在项目的入口文件main.js中引入vue-i18n插件  import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n

  • vite+vue3+element-plus项目搭建的方法步骤

    vite+vue3+element-plus项目搭建的方法步骤

    使用vite搭建vue3项目 通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目. $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev 引入Element Plus 安装Element Plus: npm install element-plus --save main.js中完整引入 Element Plus: import { createApp

  • 使用vue 国际化i18n 实现多实现语言切换功能

    安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { home: { helloworld: "hello workd !" } }; zh.js export default { home: { helloworld: "你好世界" } }; index.js 创建Vue-i18n实例 import Vue from &qu

  • vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite+vue3.0+ts+element-plus快速搭建项目的实现

    vite 出了 2.x 版本,抱着学一学的心态决定出个简单的项目,结合 element-plus,以及将会成为每位前端必会的 typescript,实现了如下内容. vite是一个由原生 ESM 驱动的 Web 开发构建工具.在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包. vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变. 使用的

  • 详解vue element plus多语言切换

    详解vue element plus多语言切换

    目录 前言 如何实现多语言切换 ? 1.安装包vue-i18n 2.在src目录下新建如图: 3. 在main.js中 4.在vue文件中使用 如何动态切换语言并更改elementUI语言 ? 1.利用vuex,在mutations中写一个方法更改element语言 2.使用 更改完elementUI组件视图不更新? 1. 在router-view上控制视图显示/隐藏 2. 在切换语言时调用reload 3.需在main.js中调用一下commit,不然第一次进入elementUI 不会更改语言

  • 详解vue3.0 diff算法的使用(超详细)

    前言:随之vue3.0beta版本的发布,vue3.0正式版本相信不久就会与我们相遇.尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持,proxy响应式原理,重新虚拟dom,优化diff算法性能提升等等.小编在这里仔细研究了vue3.0beta版本diff算法的源码,并希望把其中的细节和奥妙和大家一起分享. 首先我们来思考一些大中厂面试中,很容易问到的问题: 1 什么时候用到diff算法,diff算法作用域在哪里? 2 diff算法是怎么运作的,到底有什么作用? 3 在v-f

  • 详解Vue3 Teleport 的实践及原理

    详解Vue3 Teleport 的实践及原理

    Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新,Vue3 还新增了一个内置组件: Teleport.这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置. 使用场景 业务开发的过程中,我们经常会封装一些常用的组件,例如 Modal 组件.相信大家在使用 Modal 组件的过程中,经常会遇到一个问题,那就是 Modal 的定位问题. 话不多说,我们先写一个简单的 Modal 组件. <!-- Modal.vue --> <

  • 详解vue3.2新增的defineCustomElement底层原理

    目录 Web Components customElements 概述 HTMLTemplateElement 内容模板元素 概述 常用属性 ShadowRoot 概述 Web Components Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们. 相当于是浏览器原生的定义组件的方式,不用通过vue或者react这些框架实现组件的定义 customElements 概述 customElements 是Wi

  • 详解Vue3中对VDOM的改进

    前言 vue-next 对virtual dom的patch更新做了一系列的优化,从编译时加入了 block 以减少 vdom 之间的对比次数,另外还有 hoisted 的操作减少了内存的开销.本文写给自己看,做个知识点记录,如有错误,还请不吝赐教. VDOM VDOM的概念简单来说就是用js对象来模拟真实DOM树.由于MV**的架构,真实DOM树应该随着数据(Vue2.x中的data)的改变而发生改变,这些改变可能是以下几个方面: v-if v-for 动态的props(如:class,@cl

  • 详解Vue3 Composition API中的提取和重用逻辑

    Vue3 Composition API可以在大型项目中更好地组织代码.然儿,随着使用几种不同的选项属性切换到单一的setup 方法,许多开发人员面临的问题是-- 这会不会更混乱,因为一切都在一个方法中 乍一看可能很容易,但是实际上只需要花一点点时间来编写可重用的模块化代码. 让我们来看看如何做到这一点. 问题 Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法 export default { data () { return { articles: [], se

  • 详解Vue3.0 + TypeScript + Vite初体验

    详解Vue3.0 + TypeScript + Vite初体验

    项目创建 npm: $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev or yarn: $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev 项目结构 main.js 在个人想法上,我觉得createApp()是vue应用的实例,createApp

  • 详解vue3中组件的非兼容变更

    函数式组件 functional attribute 在单文件组件 (SFC) <template> 已被移除 { functional: true } 选项在通过函数创建组件已被移除 // 使用 <dynamic-heading> 组件,负责提供适当的标题 (即:h1,h2,h3,等等),在 2.x 中,这可能是作为单个文件组件编写的: // Vue 2 函数式组件示例 export default { functional: true, props: ['level'], re

  • 详解vue3的沙箱机制

    前言 vue3 沙箱主要分两种 浏览器编译版本,浏览器版本是使用with语法加上proxy代理拦截 本地预编译版本,通过在模版预编译阶段转换阶段,使用转换插件transformExpression将非白名单标识符挂在在组件代理对象下 浏览器编译版本 render 函数编译结果 <div>{{test}}</div> <div>{{Math.floor(1)}}</div> to const _Vue = Vue; return function render

  • 详解Vue3中Teleport的使用

    详解Vue3中Teleport的使用

    在本文中,我们将介绍: Teleport 的目的 Teleport 的例子 一些很有意思的代码交互 Teleport 的目的 首先是什么时候以及使用这个 Teleport 功能. 在开发较大的 Vue 项目时应该以可重用的逻辑去组织代码.但是当处理某些类型的组件(如模式.通知或工具提示)时,模板 HTML 的逻辑可能不会和我们希望渲染元素处于相同的文件中. 实际上在大多数情况下,与 Vue 的 DOM 完全分开处理相比,处理这些元素要容易得多.因为嵌套组件的位置.z-index 和样式等这些东西

  • 详解vue3中渲染函数的非兼容变更

    目录 渲染函数API变更 Render函数参数 渲染函数签名更改 VNode Props 格式化 slot统一 移除$listeners $attrs现在包括class和style 渲染函数API变更 此更改不会影响到<template>用户 h现在全局导入,而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构 Render函数参数 // 2.0 渲染函数 export default { render(h) { return

随机推荐