Pengenalan global dan pengenalan tempatan Element-plus ke dalam vue (dengan kod)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue, yang terutamanya memperkenalkan isu yang berkaitan dengan pengenalan global dan kaedah pengenalan tempatan Element-plus bersepadu Mari kita lihat bersama-sama semua orang.

[Cadangan berkaitan: tutorial video javascript, tutorial vue.js]

Elemen muat turun pertama- tambah

npm install element-plus

1. Cara pertama ialah menggunakan import global

untuk memperkenalkan elemen-tambah secara global, yang bermaksud semua komponen dan pemalam akan didaftarkan secara automatik

Kelebihan: Cepat untuk bermula

Kelemahan: Ia akan meningkatkan saiz pakej

Dalam fail utama.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 taip Kaedah, gunakan pengenalan tempatan

Pengenalan tempatan bermaksud komponen tertentu digunakan untuk memperkenalkan komponen tertentu semasa pembangunan,

<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 &#39;vue&#39;
// 局部引入
import { ElButton } from &#39;element-plus&#39;
import &#39;element-plus/theme-chalk/el-button.css&#39;
import &#39;element-plus/theme-chalk/base.css&#39;
export default defineComponent({
  components: { ElButton },
  setup() {
    return {}
  }
})
</script>
 
<style></style>

Tetapi dengan cara ini kita perlu menggunakannya setiap kali semasa pembangunan Memasukkan gaya css yang sepadan secara manual ke dalam komponen akan lebih menyusahkan untuk digunakan

3. Secara automatik memperkenalkan elemen-tambah atas permintaan Adalah disyorkan bahawa

perlu memasang dua pemalam

dan unplugin-vue-components unplugin-auto-import

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

Selepas pemasangan selesai, konfigurasikannya dalam fail 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属性完全一致，最后会进行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自动按需引入element-plus，
      plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()]
        }),
        Components({
          resolvers: [ElementPlusResolver()]
        })
      ]
  }
}

Selepas konfigurasi diperkenalkan secara automatik mengikut keperluan, ia boleh digunakan terus dalam komponen , tidak perlu merujuk dan mendaftar Ia telah dipindahkan secara automatik ke dalam komponen Element-plus atas permintaan untuk kegunaan langsung:

<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 &#39;vue&#39;
export default defineComponent({
  setup() {
    return {}
  }
})
</script>
 
<style></style>

Kesan:

Sambungan :

Kaedah 1, Rujukan global (semua komponen disepadukan sepenuhnya)

Kelebihan: Penyepaduan agak mudah

Kelemahan: Semua komponen dan gaya akan dibungkus, saiz besar

Penggunaan: npm install element-plus --save

Dalam main.ts, rujuk js dan css fail

untuk Ambil halaman About.vue sebagai contoh Hanya gunakan komponen yang berkaitan secara langsung Komponen telah didaftarkan secara global secara lalai dan lakukan tidak perlu didaftarkan semula di halaman

Kaedah 2: Rujukan tempatan (rujukan atas permintaan)

Kelebihan: Pakej akan menjadi lebih kecil

Kelemahan: Petikan lebih menyusahkan

Penggunaan 1: Ambil halaman About.vue sebagai Contohnya, apabila memetik fail js dalam halaman dan mendaftarkan komponen secara setempat, gaya masih menjadi rujukan global Cadangan rasmi ialah

[Cadangan berkaitan:

tutorial video javascript. , tutorial vue.js]

Atas ialah kandungan terperinci Pengenalan global dan pengenalan tempatan Element-plus ke dalam vue (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!