本篇文章给大家带来了关于vue的相关知识，其中主要介绍了关于vue3集成element-plus使用全局引入以及局部引入方法的相关问题，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、vue.js教程】
首先下载element-plus
npm install element-plus
1、第一种方式，使用全局引入引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册，
优点：上手快
缺点：会增大包的体积
在main.ts文件中
import { createapp } from 'vue'// 全局引入import elementplus from 'element-plus'import 'element-plus/dist/index.css'import app from './app.vue'import router from './router'import store from './store' const app = createapp(app)app.use(router)app.use(store)app.use(elementplus)app.mount('#app')
2、第二种方式，使用局部引入局部引入也就是在开发中用到某个组件对某个组件进行引入，
<template> <div> <el-button>default</el-button> <el-button type="primary">primary</el-button> <el-button type="success">success</el-button> <el-button type="info">info</el-button> <el-button type="warning">warning</el-button> <el-button type="danger">danger</el-button> <el-button>中文</el-button> </div></template><script>import { definecomponent } from 'vue'// 局部引入import { elbutton } from 'element-plus'import 'element-plus/theme-chalk/el-button.css'import 'element-plus/theme-chalk/base.css'export default definecomponent({ components: { elbutton }, setup() { return {} }})</script> <style></style>
但是这样我们在开发时每次使用都要手动在组件中引入对应的css样式，使用起来会比较麻烦
3、按需自动引入element-plus 推荐需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -d unplugin-vue-components unplugin-auto-import
安装完成之后在vue.config.js文件中配置
// vue.config.jsconst autoimport = require('unplugin-auto-import/webpack')const components = require('unplugin-vue-components/webpack')const { elementplusresolver } = require('unplugin-vue-components/resolvers')module.exports = { outputdir: './build', // 和webpapck属性完全一致，最后会进行合并 configurewebpack: { resolve: { alias: { components: '@/components' } }, //配置webpack自动按需引入element-plus， plugins: [ autoimport({ resolvers: [elementplusresolver()] }), components({ resolvers: [elementplusresolver()] }) ] }}
按需自动引入配置完之后，在组件中可直接使用，不需要引用和注册 这里已经实现了按需自动移入element-plus组件 组件中直接使用：
<template> <div> <el-button>default</el-button> <el-button type="primary">primary</el-button> <el-button type="success">success</el-button> <el-button type="info">info</el-button> <el-button type="warning">warning</el-button> <el-button type="danger">danger</el-button> <el-button>中文</el-button> </div></template><script>import { definecomponent } from 'vue'export default definecomponent({ setup() { return {} }})</script> <style></style>
效果：
扩展：方式一，全局引用（所有的组件全部集成）优点：集成比较简单
缺点：组件与样式全部会打包，体积大
用法：npm install element-plus --save
在main.ts中，引用js与css文件
以about.vue页面为例，直接在页面中使用相关组件就行，组件已默认全局注册，不需要在页面中重新注册
方式二：局部引用（按需引用） 优点：包会小一些 
 缺点：引用比较麻烦一些
用法一：以about.vue页面为例，在页面中引用js文件，局部注册组件，样式依然是全局引用,官方推荐
【相关推荐：javascript视频教程、vue.js教程】
以上就是vue引入element-plus的全局引入与局部引入（附代码）的详细内容。