目录安装element-plus 方式一、全局引入element-plus方式二、单个组件中使用方式三、经过自己封装按需引入1.在项目的src目录下建一个文件夹 globa
element-plus
// NPM
npm install element-plus --save
// Yarn
yarn add element-plus
// pnpm
pnpm install 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>
该文件夹下可以添加很多全局引入的一些设置,添加默认入口 index.ts和具体组件代码文件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)
}
}
import { App } from 'vue'
import registerElement from './register-element'
export function globalRegister (app:App):void{
app.use(registerElement)
}
import { globalRegister } from './global'
const app = createApp(App)
app.use(globalRegister)
大型项目中基本都是使用自己封装的这种方式。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: Vue3.x中使用element-plus的各种方式详解
本文链接: https://www.lsjlt.com/news/147022.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0