快捷導(dǎo)航

vue3如何定義全局組件

更新時間：2024年10月11日 11:08:11 作者：harmsworth2016

本文介紹了如何在Vue3中注冊和使用全局組件,并解決了通過template定義組件時出現(xiàn)的警告問題,具體方法是在vite.config.js文件中配置Vue構(gòu)建版本為vue.esm-bundler.js,以支持運(yùn)行時編譯,此操作確保全局組件可以正常工作并解決了編譯警告

前言

vue3 全局組件需在 main.js 中定義，參考官網(wǎng)中的 2 個例子，實(shí)操如下。

若需構(gòu)建 vue 項(xiàng)目，請移步 vite構(gòu)建vue3項(xiàng)目。

目錄如下

注冊全局組件

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// createApp 函數(shù)創(chuàng)建一個應(yīng)用實(shí)例
const app = createApp(App)
// 定義全局組件
app.component('alert-box', {
  template: `
  <div class="demo-alert-box">
  <strong>Error!</strong>
  <slot></slot>
  </div>
  `
})

app.component('blog-post', {
  props: ['postTitle'],
  template: `
  <h3>{{ postTitle }}</h3>
  `
})
// mount 函數(shù)返回根組件實(shí)例
const vm = app.mount('#app')

console.warn('app', app, vm);

使用全局組件

// HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>

  <p>
    <a  rel="external nofollow"  target="_blank">
      Vite Documentation
    </a>
    |
    <a  rel="external nofollow"  target="_blank">Vue 3 Documentation</a>
  </p>

  <button @click="state.count++">count is: {{ state.count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
  <table>
    <tr v-is="'blog-post'" post-title="表格行的標(biāo)題"></tr>
  </table>
  <alert-box>
    Something bad happened.
  </alert-box>
  <blog-post post-title="hello!"></blog-post>
</template>

<script setup>
import { defineProps, reactive } from 'vue'

defineProps({
  msg: String
})

const state = reactive({ count: 0 })
</script>

<style scoped>
a {
  color: #42b983;
}
</style>

結(jié)果全局組件未生效，且控制臺打印出警告：

[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.

此處的警告在官網(wǎng)中已經(jīng)有明確的原因描述

運(yùn)行時 + 編譯器 vs. 僅運(yùn)行時

使用構(gòu)建工具

由于 main.js 中全局組件都是使用 html 字符串傳遞到 template 選項(xiàng)，此時就是 運(yùn)行時 + 編譯器，需要完整的構(gòu)建版本，故需在 vite.config.js 中配置 vue 構(gòu)建版本為 vue.esm-bundler.js。

配置 vue 構(gòu)建版本

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue':  'vue/dist/vue.esm-bundler.js' 
    },
  },
})

效果如下：