Vue3.x中使用element-plus的各种方式详解
作者:清和时光
这篇文章主要介绍了Vue3.x中使用element-plus的各种方式详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
安装element-plus
// NPM npm install element-plus --save // Yarn yarn add element-plus // pnpm pnpm install element-plus
方式一、全局引入element-plus
在main.ts 中全局注册,这种方式引入后,在全局中使用都不需要 import 就可以直接使用
import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus)
方式二、单个组件中使用
直接在该组件中引入相应的组件,进行使用,这种在项目中一般比较少用到
<template> <el-config-provider> <app /> </el-config-provider> </template>
<script> import { defineComponent } from 'vue' import { ElConfigProvider } from 'element-plus' import {}//引入相应组件的css样式和基本样式 export default defineComponent({ components: { ElConfigProvider, } }) </script>
方式三、经过自己封装按需引入
1.在项目的src目录下建一个文件夹 global
该文件夹下可以添加很多全局引入的一些设置,添加默认入口 index.ts和具体组件代码文件register-element.ts
2.register-element.ts代码如下
import { App } from 'vue' import 'element-plus/dist/index.css' import { ElButton, ElForm, ElMenu } from 'element-plus' //项目中用到哪些组件就往里添加就OK了 const components = [ElButton, ElForm, ElMenu] export default function (app:App):void{ for (const component of components) { app.component(component.name, component) } }
3.index.ts代码如下
import { App } from 'vue' import registerElement from './register-element' export function globalRegister (app:App):void{ app.use(registerElement) }
4.main.ts中引入
import { globalRegister } from './global' const app = createApp(App) app.use(globalRegister)
大型项目中基本都是使用自己封装的这种方式。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能
- 如何利用Vue3+Element Plus实现动态标签页及右键菜单
- Vue3 + elementplus实现表单验证+上传图片+ 防止表单重复提交功能
- vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'分析
- element-plus 在vue3 中不生效的原因解决方法(element-plus引入)
- Vue3+Element-Plus实现左侧菜单折叠与展开功能示例
- 使用Vue3实现一个穿梭框效果的示例代码
- vue3+typeScript穿梭框的实现示例
- vue3+Element Plus实现自定义穿梭框的详细代码