今天小編給大家分享一下vue引入Element-plus的全局引入與局部引入實(shí)例分析的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)是專業(yè)的阜陽網(wǎng)站建設(shè)公司，阜陽接單;提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行阜陽網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

首先下載element-plus

npm install element-plus

1、第一種方式，使用全局引入

引入element-plus的方式是全局引入，代表的含義是所有的組件和插件都會(huì)被自動(dòng)注冊，

優(yōu)點(diǎn)：上手快

缺點(diǎn)：會(huì)增大包的體積

在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、第二種方式，使用局部引入

局部引入也就是在開發(fā)中用到某個(gè)組件對某個(gè)組件進(jìn)行引入，

但是這樣我們在開發(fā)時(shí)每次使用都要手動(dòng)在組件中引入對應(yīng)的css樣式，使用起來會(huì)比較麻煩

3、按需自動(dòng)引入element-plus  推薦

需要安裝unplugin-vue-components 和 unplugin-auto-import這兩款插件

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

安裝完成之后在vue.config.js文件中配置

// vue.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 = {
  outputDir: './build',
  // 和webpapck屬性完全一致，最后會(huì)進(jìn)行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自動(dòng)按需引入element-plus，
      plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()]
        }),
        Components({
          resolvers: [ElementPlusResolver()]
        })
      ]
  }
}

按需自動(dòng)引入配置完之后，在組件中可直接使用，不需要引用和注冊 這里已經(jīng)實(shí)現(xiàn)了按需自動(dòng)移入Element-plus組件 組件中直接使用：

效果：

擴(kuò)展：

方式一，全局引用（所有的組件全部集成）

優(yōu)點(diǎn)：集成比較簡單

缺點(diǎn)：組件與樣式全部會(huì)打包，體積大

用法：npm install element-plus --save

在main.ts中，引用js與css文件

以About.vue頁面為例，直接在頁面中使用相關(guān)組件就行，組件已默認(rèn)全局注冊，不需要在頁面中重新注冊

方式二：局部引用（按需引用）

優(yōu)點(diǎn)：包會(huì)小一些

缺點(diǎn)：引用比較麻煩一些

用法一：以About.vue頁面為例，在頁面中引用js文件，局部注冊組件，樣式依然是全局引用,官方推薦

以上就是“vue引入Element-plus的全局引入與局部引入實(shí)例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。