vue3使用element-plus

这篇具有很好参考价值的文章主要介绍了vue3使用element-plus。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element-ui 是配合 vue2 使用,element-plus 是配置 vue3 使用的

1. 安装

1. 包管理器的方式

如果是使用 webpack 或者 vite 打包工具新建的项目

# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

2. 浏览器直接导入

直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus

<head>
  <!-- 导入样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- 导入 Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- 导入组件库 -->
  <script src="//unpkg.com/element-plus"></script>
</head>

2. 导入使用

1. 导入全部组件且注册所有的图标

// 导入 element-plus
import ElementPlus from "element-plus";
// 导入 element-plus 样式
import "element-plus/dist/index.css";
// 导入 element-plus 图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

声明使用 ElementPlus 全局变量

// 使用router\vuex\element-plus并挂载
app.use(ElementPlus).use(router).use(store).mount("#app");

项目完整的 main.js 文件

// 导入 vue 和 createApp 方法
import App from "./App.vue";
import { createApp } from "vue";
// 导入路由表
import router from "../router/index";
// 导入 vuex
import store from "../store/index";
// 导入 element-plus
import ElementPlus from "element-plus";
// 导入 element-plus 样式
import "element-plus/dist/index.css";
// 导入 element-plus 图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// 导入全局样式
import "@/styles/index.scss";
// 创建 vue 实例
const app = createApp(App);
// 使用router\vuex\element-plus并挂载
app.use(ElementPlus).use(router).use(store).mount("#app");
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

2. 按需导入

完成这个功能需要插件的支持,想了解更多插件的知识 ->webpack_插件plugin_游小北的博客-CSDN博客或者webpack打包工具 & 搭建vue项目_游小北的博客-CSDN博客

1. 安装插件

npm install -D unplugin-vue-components unplugin-auto-import

2. 在 webpack.config.js 里添加如下配置

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

如果使用的是 vite 

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

3. elemetn-plus 图标的使用

安装

1. 包管理器方式

# NPM
npm install @element-plus/icons-vue
# Yarn
yarn add @element-plus/icons-vue
# pnpm
pnpm install @element-plus/icons-vue

2. 标签导入

通过浏览器的 HTML 标签导入,使用全局变量 ElementPlusIconsVue

<script src="//unpkg.com/@element-plus/icons-vue"></script> //unpkg
<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script> //jsDelivr

3. 使用方式

以标签的形式直接使用

<el-icon><Plus /></el-icon>
<el-icon><Minus /></el-icon>
<el-icon><CirclePlus /></el-icon>
<el-icon><Search /></el-icon>

vue3使用element-plus文章来源地址https://www.toymoban.com/news/detail-481404.html

到了这里,关于vue3使用element-plus的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3+Element-Plus 实现用户列表页面的UI结构及动态加载表单功能 三一

    1.1 头部是一个面包屑 (Breadcrumb)导航区域 1.2 白色区域是一个卡片(Card)视图 1.3 卡片 (Card)视图中嵌套了   输入框(Input )、 按钮(Button)、 表单(Form)、分页(Pagination ) Breadcrumb 面包屑 | Element Plus (gitee.io) https://element-plus.gitee.io/zh-CN/component/breadcrumb.html  2.1.1 复制

    2023年04月09日
    浏览(58)
  • 【前端】Element-UI和Element-Plus的区别

    Element-UI对应Element2:基本不支持手机版 Element-Plus对应Element3:组件布局考虑了手机版展示 Element-ui适用于Vue2框架 Element-plus适用于Vue3框架 在element-ui中的dialog有 :visible.sync属性 可进行父子组件之间的双向绑定(vue2写法) 具体的写法为: 需要在computed中进行告知操作 在props传值

    2024年02月11日
    浏览(60)
  • element-ui / element-plus dialog 自定义层级

    背景:          微前端集成后主子应用的dialog 层级冲突导致主应用的弹窗被覆盖, 主子应用的弹窗都是append 到body 下的,  z-index 自动生成   尝试方案:          1. 根据官方Api 给弹窗添加自定义class, 并通过设置自定义 class 样式来控制;                  == 无效, 因为生

    2024年02月11日
    浏览(57)
  • 在Django+Vue3+GraphQL的Blog例子代码中引入Element-Plus UI Framework

    Vue3的UI Framework中有Element-Plus、BalmUI、Quasar、PrimeVue、Ant Design Vue等UI Framework. Element-Plus是Element-UI的Vue3版,Element-UI的使用人数的基数较大,Github上的Star数也较多,就选择了Element-Plus作为这个Blog项目的UI Framework. UI Framework的好处就是提供了相较裸Html+CSS开发起来更好看和方便一些.

    2023年04月13日
    浏览(42)
  • 在Vue3中使用Element-Plus分页(Pagination )组件

    开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中。 记: 在Vue3中使用Element-Plus分页组件与表格数据实现分页交互。 引入表格和分页组件的H5标签。 js代码,先初始化变量。 没用到后台,所以就把表格的数据写固定了。下面就表格数据生成,还有模拟对数据

    2024年02月05日
    浏览(67)
  • 记录--vue3优雅的使用element-plus的dialog

    摆脱繁琐的 visible 的命名,以及反复的重复 dom。 将 dialog 封装成一个函数就能唤起的组件。如下:   首先定义了 dialogList,它包含了所有弹窗的信息。 component 使用 componet is 去动态加载子组件 addDialog 调用唤起弹窗的函数 closeDialog 关闭弹窗的函数 创建一个弹窗组件 在列表页面

    2024年02月05日
    浏览(40)
  • 使用 Vite + Vue3 + Element-Plus + Pinia + Ts 搭建 Vue3 项目

    Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。 首先 npm 输入: Project name :项目名称 Select a framework :选择一个框架 Select a variant :选择 ts 或者 js 输入项目名称后选择 vue 选择

    2024年02月09日
    浏览(63)
  • 解决Vue3 使用Element-Plus导航刷新active高亮消失

    启用路由模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。 接下来打印一下选中项index和index路径, 刷新也是没有任何问题的,active不会消失,整体代码如下:

    2024年02月14日
    浏览(52)
  • Vue3中动态绑定:disabled element-plus使用方法

    @change=\\\"whetherFlag($event)\\\"  根据value值判断是否禁用 :disabled=\\\"isShow\\\" 初始值为禁用状态 const isShow = refboolean(true);  根据value的值判断是否禁用  

    2024年01月25日
    浏览(59)
  • Vue3使用element-plus实现弹窗效果-demo

    2024年02月13日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包